/* Project: Soldiersface.com
   Version: 1.60
    Author: Steve Skladany, www.skladany.net
      Date: 3.14.10

======================================== */

/* =====================================
::::::::::::: the LEVELER ::::::::::::::
========================================
 http://www.websemantics.co.uk/tutorials/useful_css_snippets/#leveller
 "The intention is to remove as many of the differences
 between browsers and platforms as possible in one fell swoop."

 The 'height/min-height' code keeps the vertical scroll bar from disappearing in Firefox
======================================== */

* { margin:0; padding:0;
}

body { min-height:101%; font:100.01%/130% Arial, Tahoma, Helvetica, sans-serif; color:#fff; background:#000;
}


/*
#viewport {
	position: fixed;
	z-index: 100;
	width: 1000px;
	top: 578px;
	border-bottom: 2px solid yellow;
}
*/






/* =====================================
:::::::::::: GLOBAL STYLES :::::::::::::
======================================== */
body {
	font-size: .75em;
	height: 100%; /* this is the key! */
}

p {
	margin: 0;
	padding: 0;
	line-height: 1.85em;
}

h1, h2 {
	font-size: 1.4em;
	line-height: 1.4em;
	font-weight: normal;
}

li {
	list-style-type: none;
}

hr {
	display: none;
}

.clearBoth {
	clear: both;
}

.cursor {
	cursor: hand;
}


/* Links
======================================== */

a, a h1, a h2,  a p, a img {
	text-decoration: none;
}

a img {
	border: 0;
}



/* =====================================
:::::::::::: MAIN STRUCTURE ::::::::::::
======================================== */

body {
	position: relative;
}


#mainContent {
	position: fixed;
	width: 225px;
	top: 25px;
	left: 40px;
	/* Needed for Firefox2 to keep soldier in background */
	z-index: 100;
}

#commentBlockWrapper {
	background: url(../images/contentBackground.png);
}




/* =====================================
::::::::::::::: ELEMENTS :::::::::::::::
======================================== */

/* header
---------------------------- */
#solider h1, .soldierInfo h2 {
	text-indent: -9000px;
}

.soldierInfo {
	text-indent: -9000px;
    display: block;
    overflow: hidden;
   	float: left;
   	margin-left: 7px;
}

#soldierImg {
	position: absolute;
	top: 0;
	left: 0;
	height: 1100px;
	width: 1500px;
}



/* 
---------------------------- */
#mainNav {
	clear: both;
	width: 280px;
	margin-left: 9px;
	padding-top: 9px;
}

#mainNav li {
 	float: left;
	display: block;
	width: 19px;
	height: 13px;
 	/* necessary for height/width to take effect */
 	font-size: 100px;
 	font-weight: bold;
    overflow: hidden;
	margin: 4px 5px 0 0;
}

#mainNav li a {
	color: #f60;
	background-color: #f60;
}

#mainNav li a:hover, #mainNav li a.selected {
	color: #999;
	background-color: #999;
}



/* comment
---------------------------- */

#commentBlockWrapper #commentForm {
	display: none;
}

#commentBlockWrapper {
	margin: 8px 0 10px 0;
	padding-bottom: 25px;
	height: 295px;
	width: 246px;
}

#commentBlockWrapper #commentBlock {
	padding: 7px;
	overflow: auto;
	height: 250px;
}

#commentBlock h3, #commentBlock h3 a, #commentBlock h4 {
	font-weight: normal;
	color: #f60;
	display: inline;
}

#commentBlock h3 {
	font-size: 1em;
}

#commentBlock h4 {
	font-size: .8em;
	margin-left: 1em;
	font-style: italic;
}

#commentBlock h4 span {
	margin-left: 1em;
}

#commentBlock p {
	font-size: .9em;
	margin-bottom: 1em;
	line-height: 1.4em;
}

#commentBlock .comment {
	margin-bottom: .75em;
	border-bottom: 1px solid #666;
}

#footer {
	clear: both;
	padding: 4px 0 0 7px;
	border-top: 1px solid #777;
}

#footer li a {
	display: block;
	color: #fff;
	font-size: .95em;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 1px 0;
	text-align: center;
	background-color: #f60;
}

#footer li {
	float: left;
	padding: 2px;
}

#footer #fComment 	{	width: 113px; }
#footer #fAll 		{	width: 113px; }
#footer #fPress 	{	width: 68px; }
#footer #fTwitter 	{	width: 158px; }









/* =====================================
:::::::::::: Page Specific :::::::::::::
======================================== */

#kitchen .soldierInfo {
    height: 45px;
    width: 189px;
    background: url(../soldier/kitchen/header.png) 0 0;
}

#kitchen #soldierImg {
	background: url(../soldier/kitchen/soldier.jpg);
}


#claxton .soldierInfo {
    height: 44px;
    width: 192px;
    margin-top: 1px;
    background: url(../soldier/claxton/header.png) 0 0;
}

#claxton #soldierImg {
	background: url(../soldier/claxton/soldier.jpg);
}

#birkholz .soldierInfo {
    height: 45px;
    width: 267px;
    background: url(../soldier/birkholz/header.png) 0 0;
}

#birkholz #soldierImg {
	background: url(../soldier/birkholz/soldier.jpg);
}

#bruno .soldierInfo {
    height: 43px;
    width: 170px;
    margin-top: 1px;
    margin-bottom: 1px;
    background: url(../soldier/bruno/header.png) 0 0;
}

#bruno #soldierImg {
	background: url(../soldier/bruno/soldier.jpg);
}

#jefferson .soldierInfo {
    height: 45px;
    width: 206px;
    background: url(../soldier/jefferson/header.png) 0 0;
}

#jefferson #soldierImg {
	background: url(../soldier/jefferson/soldier.jpg);
}


#mickelson .soldierInfo {
    height: 45px;
    width: 215px;
    background: url(../soldier/mickelson/header.png) 0 0;
}

#mickelson #soldierImg {
	background: url(../soldier/mickelson/soldier.jpg);
}

#crumm .soldierInfo {
    height: 44px;
    width: 189px;
    margin-top: 1px;
    background: url(../soldier/crumm/header.png) 0 0;
}

#crumm #soldierImg {
	background: url(../soldier/crumm/soldier.jpg);
}

#dougherty .soldierInfo {
    height: 44px;
    width: 226px;
    margin-top: 1px;
    background: url(../soldier/dougherty/header.png) 0 0;
}

#dougherty #soldierImg {
	background: url(../soldier/dougherty/soldier.jpg);
}

#williams .soldierInfo {
    height: 45px;
    width: 194px;
    background: url(../soldier/williams/header.png) 0 0;
}

#williams #soldierImg {
	background: url(../soldier/williams/soldier.jpg);
}

#diaz .soldierInfo {
    height: 45px;
    width: 182px;
    background: url(../soldier/diaz/header.png) 0 0;
}

#diaz #soldierImg {
	background: url(../soldier/diaz/soldier.jpg);
}









/* billboards & sponspors
---------------------------- */

#billboards {
	float: left;
	position: relative;
	margin-top: 0px;
	width: 114px;
	z-index: 90;
}



#press, #pressRelease {
	margin-top: 7px;
}

.billboard {
	margin-top: 11px;
	margin-left: 7px;
	width: 237px;
	height: 137px;

}

.billboard a {
	display: block;
	width: 250px;
	height: 135px;
	/* Necessary for IE6 to respect width & height */
    background: url(../images/billboardPlaceholder.png) no-repeat;
}

#kitchen .billboard a {
    background: url(../soldier/kitchen/billboard.jpg) no-repeat;
}

#birkholz .billboard a {
    background: url(../soldier/birkholz/billboard.jpg) no-repeat;
}

#bruno .billboard a {
    background: url(../soldier/bruno/billboard.jpg) no-repeat;
}

#jefferson .billboard a {
    background: url(../soldier/jefferson/billboard.jpg) no-repeat;
}

#claxton .billboard a {
    background: url(../soldier/claxton/billboard.jpg) no-repeat;
}

#crumm .billboard a {
    background: url(../soldier/crumm/billboard.jpg) no-repeat;
}

#dougherty .billboard a {
    background: url(../soldier/dougherty/billboard.jpg) no-repeat;
}

#mickelson .billboard a {
    background: url(../soldier/mickelson/billboard.jpg) no-repeat;
}

#williams .billboard a {
    background: url(../soldier/williams/billboard.jpg) no-repeat;
}

#diaz .billboard a {
    background: url(../soldier/diaz/billboard.jpg) no-repeat;
}

.billboard a:hover, #kitchen .billboard a:hover, #birkholz .billboard a:hover, #bruno .billboard a:hover, #jefferson .billboard a:hover, #claxton .billboard a:hover, #crumm .billboard a:hover, #dougherty .billboard a:hover, #mickelson .billboard a:hover, #williams .billboard a:hover, #diaz .billboard a:hover  {
 	background-position: 0 -137px;
}

.billboard .h4 {
	text-indent: -9000px;
    display: block;
    overflow: hidden;
    position: relative;
    top: 5px;
	left: 203px;
	height: 11px;
	width: 29px;
	background: #f60 url(../images/billboardMap.png) no-repeat 6px 3px;
}

.billboard a .popup {
	visibility: hidden; /* hide message initially */
	display: none;
	position: absolute;
	top: 11px;
	left: 254px;
	width: 500px;
	height: 350px;
	padding: 10px;
	border: 1px solid #999;
	background-color: #ddd;
	z-index: 10;
}

/*
	filter:alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
*/



.billboard a:hover .popup {
	visibility: visible;
	display: block;
}

.billboard a:hover .h4, #footer a:hover {
	background-color: #999;
	cursor: hand;
}

.billboard a .popup .addressLink {
	float: left;
	width: 275px;
	color: #000;
	margin-top: 15px;
	font-size: 1.1em;
}

.billboard a .popup .addressLink .link {
	display: block;
	margin-top: 5px;
	text-decoration: underline;
	font-weight: bold;
	cursor: hand;
}

.billboard a .popup .sponsorLink {
	float: right;
	margin: 15px 5px 0 0;
	cursor: hand;
}

.billboard a .popup h3 {
	font-weight: normal;
	font-size: 1.1em;
	float: right;
	margin: 15px 10px 0 0;
}

.billboard a span.popup .map {
	float: left;
	margin: 0;
	border: 1px solid #ccc;
	cursor: hand;
}

#claxton .billboard a .popup, #jefferson .billboard a .popup, #williams .billboard a .popup {
	width: 800px;
}

#claxton .billboard .col, #jefferson .billboard .col, #williams .billboard .col {
	float: left;
	width: 390px;
}

#claxton .billboard .col#leftcol, #jefferson .billboard .col#leftcol, #williams .billboard .col#leftcol {
	margin-right: 20px;
}

#claxton .billboard .addressLink, #jefferson .billboard .addressLink, #williams .billboard .addressLink {
	width: 200px;
}




/* =====================================
:::::::::::::::: Press :::::::::::::::::
======================================== */


#press #mainContent, #pressRelease #mainContent {
	position: absolute;
	top: 18px;
	left: 47px;
}

#press #thanks {
	margin-top: 30px;
	width: 320px;
	height: 290px;
	color: #000;
	font-size: 1.2em;
	line-height: 1.3em;
	font-family: Georgia, Times, serif;
	color: #ccc;
}

#press #thanks h2 {
	font-size: 1.2em;
	line-height: 1.5em;
	margin-bottom: 1.8em;
}

#press #specialThanks {
	padding-top: 1em;
}


#press #thanks li {
	display: block;
	margin-bottom: 1.15em;
}


#press #links {
	position: absolute;
	top: 61px;
	left: 350px;
	width: 320px;
}


#press #other {
	position: absolute;
	top: 61px;
	left: 700px;
	width: 320px;
}


#press li a, #specialThanks a, #designer a, #press h2 a, #pressRelease a {
	color: #f60;
}

#press li a:hover, #specialThanks a:hover, #press h2 a:hover,  #press #designer a:hover, #press h2 a:hover, #pressRelease a:hover {
	text-decoration: underline;
}

#press #links li {
	margin-top: .75em;
}

#press #links h2, #press #other h2 {
	margin-top: 25px;
	margin-bottom: .5em;
	font-size: .95em;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .01em;
}

#press #links a, #press #other a {
	display: block;
}

#press .source, #press .date {
	margin-left: 1em;
	font-size: .9em;
	font-style: italic;
	color: #fff;
}

#press .date {
	margin-left: 1em;
	font-style: normal;
}





#press a .popup #designer {
	margin-top: 1.15em;
	font-size: .8em;
}

#press a .popup #header .link {
	display: inline;
}


#specialThanks {
	margin-bottom: 3em;
}

#designer {
	font-size: .75em;
	font-family: Arial, Tahoma, Helvetica, sans-serif;
}

#press #other img {
	margin-bottom: 10px;
}



/* =====================================
:::::::::::::::: Index :::::::::::::::::
======================================== */

a:hover, a:visited, a:active {
	color: #000;
}

#index, body#index #mainContent {
	margin: 0;
	padding: 0;
}

#index h1, #index h2 {
	margin: 0;
	padding: 0;
	text-indent: -9000px;
	display: block;
	overflow: hidden;
	cursor: hand;
}

#index h1, #commentsPage h1 {
	height: 54px;
	width: 293px;
	margin: 130px 0 0 83px;
	background: url(../images/soldierHeadline.png) 0 0;
}

#index #soldierImg {
	position: relative;
	height: 174px;
	width: 1274px;
	margin-top: 19px;
	background: url(../images/soldierIndex.jpg) no-repeat;
}

#index #soldierImg img {
	position: relative;
	height: 174px;
	width: 1274px;
}

#index h2 {
	height: 19px;
	width: 149px;
	margin: 35px 0 0 221px;
	background: url(../images/opton.png) 0 0;
	cursor: hand;
}

#index h4 {
	position: relative;
	top: -19px;
	left: 515px;
	color: #ccc;
	font-size: 1.1em;
	line-height: 1.5em;
	letter-spacing: .02em;
	font-family: Georgia, Times, serif;
	font-weight: normal;
	font-style: italic;
}

#index h5 {
	position: relative;	
	top: 20px;
	left: 515px;
 	color: #ccc;
 	font-size: .85em;
	line-height: 1.5em;
 	font-weight: normal;
}

#index h3 {
	position: relative;
	top: 4px;
	left: 515px;
 	color: #ccc;
 	font-size: 1em;
	line-height: 1.5em;
}

#index h3 a {
	color: #f60;
}

#index h3 a:hover {
	color: #ccc;
}

#index ul {
	position: relative;
	top: -55px;
	left: 70px;
 	color: #ccc;
 	font-size: .9em;
 	line-height: 1.5em;
 	text-align: right;
 	width: 300px;
}




/* =====================================
:::::::::::: View/Add Comment ::::::::::
======================================== */

#commentsPage #commentBlock {
	margin-left: 290px;
}


#commentsPage #mainContent, #press h1 #mainContent {
	position: relative;
	margin-left: 7px;
	width: 800px;
}

#commentsPage #mainContent #nav {
	position: fixed;
}



#commentsPage #form {
	position: fixed;
	top: 80px;
	left: 47px;
	width: 219px;
	background-color: #444;
	padding: 5px 10px;
}


/* elements
---------------------------- */

#commentsPage h1, #press h1, #pressRelease h1, #nav h1 {
	margin: 0;
	padding: 0;
	text-indent: -9000px;
	display: block;
	overflow: hidden;
}

#commentsPage h1, #press h1, #pressRelease h1, #nav h1 {
    height: 27px;
    width: 147px;
    background: url(../images/soldierSmallHeadline.png) 0 0;
}

#commentsPage h2 a, #press h2 a, #pressRelease h2 a, #allBillboards #nav h2 a {
	color: #f60;
	font-weight: bold;
	text-transform: uppercase;
	font-size: .7em;
	letter-spacing: .1em;
	line-height: 1.8em;
}

#commentsPage #form label {
	display: block;
	font-size: 1.2em;
	font-family: Georgia, Times, serif;
	margin: 5px 0;
}

#commentsPage fieldset, #commentsPage textarea {
	border: none;
}

#commentsPage #captcha p {
	margin: 5px 0;
	font-size: .9em;
	line-height: 1.2em;
}

#commentsPage #captcha img {
	margin: 5px 0 10px 10px;
}

#commentsPage #submit input {
	text-align: center;
	width: 140px;
	margin-top: 5px;
	margin-left: 39px;
	background-color: #fff;
}

#commentsPage input, #commentsPage textarea {
	border: 1px solid #333;
	width: 213px;
	margin-bottom: 5px;
	padding: 2px;
	font: Arial, Tahoma, Helvetica, sans-serif;
}

 #commentsPage textarea {
 	height: 8em;
 }

.c5t_error_message_item {
	background-color: #ccc;
	color: #333;
	font-size: .9em;
	font-weight: bold;
	padding: 7px;

}

#commentsPage .comment {
	font-size: 1.1em;
	border-bottom: 1px solid #444;
}

#commentsPage .comment h3 {
	line-height: 1.75em;
}

#commentsPage .comment p {
	margin-bottom: 1em;
	line-height: 1.5em;
}


/* =====================================
:::::::::::: Press Release :::::::::::::
======================================== */

#pressRelease {
	width: 945px;
}

#pressRelease #mainContent {
	width: 600px;
}
#pressRelease #mainContent h3 {
	text-align: center;
	margin: 1em;
}

#pressRelease #date, #pressRelease #contact {
	line-height: 1.2em;
	width: 200px;
}

#pressRelease #date {
	float: left;
}

#pressRelease #contact {
	float: right;
	text-align: right;
}

#pressRelease #pressCopy {
	clear: both;
	margin-top: 2em;
	padding: 0;
}

#pressRelease #pressCopy p {
	margin-bottom: 1em;
}

#pressRelease #images {
	float: right;
	padding-top: 182px;
	width: 260px;
}

#pressRelease #images img {
	margin-bottom: 1em;
}


/* =====================================
:::::::::::::: Billboards ::::::::::::::
======================================== */

#allBillboards #mainContent {
	position: absolute;
	left: 47px;
	width: 950px;
}

#allBillboards #mainContent #nav {
	margin-bottom: 2em;
}

#allBillboards .billboardGroup .caption {
	float: left;
	padding: 0;
	margin: 0;
	width: 300px;
}

#allBillboards .billboardGroup .caption .soldierInfo {
	margin: 0;
}

#allBillboards .billboardGroup img {
	float: left;
	margin: 0 0 30px 30px;
}

#allBillboards #claxton .multipleImg {
	float: left;
	padding-bottom: 50px;
	width: 605px;
}

#allBillboards h2 {
	color: #f60;
	clear: left;
	font-weight: normal;
	padding-top: 8px;
	text-transform: uppercase;
	font-size: 2em;
	letter-spacing: .1em;
	line-height: 1.8em;
	border-bottom: 1px solid #ccc;
	margin-bottom: 24px;
}

#allBillboards .billboardGroup h3 {
	color: #ccc;
	clear: left;
	font-size: .8em;
	font-weight: normal;
	font-style: italic;
	padding-top: 6px;
}