/* Body Markup */

* {
margin:0;
padding:0;
list-style:none;
}
body {
background:url(images/bg-body.jpg);
text-align:center;
color:#777;
font:13px/20px Arial, Verdana, sans-serif;
}
.Clear {
clear:both;

}

/* Links */

a {
color:#cacaca;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#2297d3;
}


/* Typo  */

h2.About, h2.Roster, h2.Social, h2.Links, h2.Contact {
display:block;
text-indent:-9999px;
height:35px;
width:150px;
background-position:top right;
}

h2.About {background:url(images/h2-about.png) no-repeat;}
h2.Roster {background:url(images/h2-roster.png) no-repeat;}
h2.Social {background:url(images/h2-social.png) no-repeat;}
h2.Links {background:url(images/h2-links.png) no-repeat;}
h2.Contact {background:url(images/h2-contact.png) no-repeat;}

p {
padding-bottom:30px;
}
h3 {
color:#fff;
font-weight:bold;
font-size:13px;
margin-bottom:15px;
}


/* Wrapper */

#Wrapper {
margin:0 auto;
width:620px;
text-align:left;
}

/* Header */ 

#Header {
height:252px;
background:url(images/bg-header.jpg) repeat-x;
}
#HeaderWrap {
margin:0 auto;
width:960px;
height:252px;
background:url(images/bg-headerwrap.jpg) repeat-x;
}

/* Navi */ 

#Navi {
width:100%;
height:50px;
position:fixed;
top:0;
left:0;
background:url(images/bg-navi.png) repeat-x;
}
#NaviWrap {
margin:0 auto;
width:620px;
}
#NaviWrap  ul {
float:right;
}
#NaviWrap  ul li {
float:left;
padding:0 15px;
line-height:40px;
background:url(images/bg-navi-spacer.png) top left no-repeat;
}
#NaviWrap  ul li a {
font-weight:bold;
outline:none;
text-decoration:none;
}

/* Main */ 

.Section {
background:url(images/bg-spacer.jpg) bottom left repeat-x;
display:block;
margin-top:30px;
}
.Wrap {
padding-top:30px;
}
.Title {
float:left;
width:160px;
padding-top:5px;
padding-left:10px;
}
.Content {
float:right;
width:400px;
}

/* Roster */ 

ul.RosterList {
height:220px;
}
.Content ul.RosterList li {
float:left;
margin-right:15px;
margin-bottom:15px;
display:block;
}
a.Soldier, a.Medic, a.Scout, a.Demoman {
display:block;
width:85px;
height:85px;
text-indent:-9999em;
}
a.Soldier {background:url(images/img-soldier.jpg) bottom left;}
a.Medic {background:url(images/img-medic.jpg) bottom left;}
a.Scout {background:url(images/img-scout.jpg) bottom left;}
a.Demoman {background:url(images/img-demoman.jpg) bottom left;}

a:hover.Soldier, a:hover.Medic, a:hover.Scout, a:hover.Demoman {
background-position:top left;
}

ul.SubList {
margin-bottom:30px;
}

ul.SubList li {
height:30px;
padding-left:25px;
line-height:30px;
background:url(images/ico-arrow.png) center left no-repeat;
}


/* Tooltips */ 

.tooltip { 
display:none; 
background:url(images/bg-tooltip.png) no-repeat; 
height:130px; 
width:230px; 
} 
.tooltip .Wrap {
padding:10px 10px 10px 15px;
}
.tooltip .Wrap ul {
float:left;
}
.tooltip .Wrap ul.Info li {
padding-left:20px;
}
.tooltip .Wrap ul.Info li a {
color:#FFF;
text-decoration:underline;
}
.tooltip .Wrap ul li {
height:20px;
line-height:20px;
margin:0;
padding:0;
float:none;
font-size:12px;
list-style:none;
color:#555;
}
.tooltip .Wrap ul li b {
color:#FFF;
}

/* Twitter */ 

.Content ul.tweet_list li {
padding:0px 0 18px 0px;
margin-top:10px;
line-height:16px;
background:url(images/bg-spacer.jpg) bottom left repeat-x;
}
.Content ul.tweet_list li .TweetTime {
font-weight:bold;
font-size:11px;
}
.Content ul.tweet_list li .tweet_text {
color:#888;
font-size:11px;
}
.Content ul.tweet_list li .tweet_avatar {
float:left;
width:50px;
}
.TweetLink {
height:20px;
line-height:20px;
padding-left:30px;
display:block;
margin-bottom:30px;
margin-top:10px;
float:right;
background:url(images/bg-twitter.png) top left no-repeat;
}

/* Links */ 

.Content ul.LinkList {
margin-bottom:30px;
}
.Content ul.LinkList li {
height:30px;
padding-left:25px;
line-height:30px;
background:url(images/ico-link.png) center left no-repeat;
}

/* Footer */ 

#Footer {
height:115px;
width:100%;
clear:both;
background:url(images/bg-footer.jpg) top left repeat-x;
position:relative;
}
#FooterWrap {
margin:0 auto;
width:620px;
height:115px;
text-align:left;
font-weight:bold;
}
#FooterWrap p {
float:left;
width:500px;
margin:0;
padding:0;
line-height:115px;
}
a.Illusiv {
display:block;
width:85px;
height:35px;
margin-top:45px;
text-indent:-9999em;
float:right;
background:url(images/img-illusiv.png) top left no-repeat;
}
a:hover.Illusiv {
background-position:bottom left;
}

/* ContactForm */

.contact .clearsection {
float: left;
width: 370px;
}
.Input {
clear: left;
margin: 0 0 7px 0;
}
.Input label {
display: block;
float: left;
margin: 3px 10px 0 0;
text-align: left;
width: 120px;
}
.Input input {
background:url(images/bg-input.jpg) top left no-repeat;
border: 0;
float: left;
display: block;
padding: 6px 7px 0px 7px;
margin: 0 0 7px 0;
height: 19px;
width:180px;
color:#888;
font-size:11px;
}
.Input input:focus,.Input input:active {
background-position: bottom left !important;
}
.Input textarea {
background:url(images/bg-textarea.jpg) top left no-repeat;
float: left;
display: block;
padding: 5px 7px;
margin: 0 0 7px 0;
width: 240px;
height:140px;
border:0;
overflow:auto;
color:#888;
font-size:11px;
font-family:arial;
}
.SubmitButton{
clear: left;
margin-left:130px;
}
.SubmitButton {
height:25px;
padding: 0 15px;
line-height:25px;
background:#444;
cursor:pointer;
color:#fff;
margin-bottom:30px;
font-size:12px;
font-family:arial;
font-weight:bold;
border:0;
background:url(images/bg-button.jpg) repeat-x;
}