/***** Loud Louder Loudest 09 *****/

html {
	overflow-y:scroll;
}

 /*
  PNG Support for IE thanks to http://www.twinhelix.com/css/iepngfix/
  Alternatively, you can specify that this will apply to all tags like so:
  { behavior: url(iepngfix.htc) }
 */
img, div, a, a:hover, h1, p { behavior: url(global/iepngfix.htc) }

body {
	font-size: .9em;
	line-height: 1.4em;
	padding: 0;
	border: 0;
	margin: 0;
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
}

/*****  default styles ****************/

/*zeros out all defaults and flattens text sizes*/
h1, h2, h3, h4, h5, h6, p, div, table, tr, td {
	border:0;
	margin:0;
	padding:0;
	font-size:1em;
	font-weight:normal;
}

img, div {
	display:block;
	margin:0;
	padding:0;
	border:0;
}

b {font-weight:bold;}

en {font-weight:normal;}

p {
	display:block;
	padding-top:.2em;
	padding-bottom:1.2em;
}

p.twocol {
	position:absolute;
	top:0;
	left:210px;
}

h4 {
	font-size:1.3em;
	line-height:1.4em;
}


/***** default links ****************/
a {
	text-decoration: none;
	color: #9C9C9C;
	font-weight:bold;
}

a:visited {
	text-decoration: none;
	color: #9C9C9C;
}

a:hover {
	text-decoration: none;
	color: #000;
	border-color:#000;
}

a:active, a:focus {
   outline: 0;
} 

/***** White Page ****************/

.whitepage {
	display:block;
	position:relative;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:48px;
	width:456px;
	background-color:white;
	padding:6px;
	z-index:2000;
}

.header {
	margin:0;
	margin-left:5px;
	margin-top:18px;
}

.header a, .header a:visited, .header a:hover, .header a:active, .header a:focus {
	/*background-image: url(../images/loudlouderloudest.png);*/
	background-repeat:no-repeat;
    display:block;
    outline: 0
	text-decoration: none;
	height:142px;
	width:240px;
}

.header h1 {
	display:none;
	font-family: Cooper Std Black; cooper black, cooper, georgia, serif;
	font-size:60px;
	line-height:48px;
	letter-spacing: -2px;
}


.nav {
	width:444px;
	margin:2px;
	border-top:3px solid #000;
	padding-top:2px;
	margin-left:6px;
}

.nav div {
	margin:0px;
	border-top:1px solid #000;
	padding-top:6px;
}

.nav div a {
	display:block;
	float:left;
	margin-right:1em;
	padding-bottom:3px;
	border-bottom:2px solid #fff;
	margin-bottom:18px;
}

.nav div a:hover {
	color: #9C9C9C;
	border-color:#9C9C9C;
}

.nav div a:active, .nav div a:focus {
	color:#fff;
	border-color:#fff;
} 

/* so the current page link is black underlined */
#about a.aboutlink, #services a.serviceslink, #clients a.clientslink, #contact a.contactlink {
	color: #000;
	border-color:#000;
}

.content {
	position:relative;
	clear:both;
	display:block;
	margin:6px;
	margin-top:17px;
	padding-bottom:.9em;
}

.content p {
	padding-right:36px;
}

/*** backpage ***/

.backtext {
	display:block;
	position:absolute;
	z-index:500;
	width:100%;
}

.backpage {
	display:block;
	position:fixed;
	z-index:100;
	width:100%;
	height:100%;
	overflow:hidden;
	min-width:1000px;
	top:0;
	left:0;
	text-align:center;
}

.backpage img {	
	margin-left:auto;
	margin-right:auto;
}


/* home */

#home {
	background-color: #5aa2ee;
}

#home div.content {
	padding-bottom:0;
}

#home div.backtext {
	text-align:center;
	top:0;
	padding-top:300px;
}
#timer {
	color:gold;
	font-weight:bold;
	letter-spacing: -2px;
	font-size: 5.5em;
	line-height:1em;
}
#timer span {
	color:white;
}


/* about */

#about {
	background-color: #e39000;
}

.nav a.aboutlink:active, .nav a.aboutlink:focus {
	background-color:#f1b324;
}

#about div.backtext {
	width:144px;
	position:absolute;
	top:6px;
	right:12px;
}


/* services */

#services {
	background-color: #888888;
}

a.serviceslink:active, a.serviceslink:focus {
	background-color:#888888;
}

/* clients */

#clients {
	background-color: #1b6913;
}

a.clientslink:active, a.clientslink:focus {
	background-color:#1b6913;
}

#clients p {
	width:198px;
}


/* contact */

#contact {
	background-color: #bf3279;
}

a.contactlink:active, a.contactlink:focus {
	background-color:#bf3279;
}

#contact div.backpage img{
	position:absolute;
	bottom:-40px;
}

#contact b {
	color:#bf3279;
}

/*** colors ***/

#gn, .gn {
color:#509230;
}
#bl, .bl {
	color:#297bcd;
}
#or, .or {
	color:#e07516;
}
#rd, .rd  {
	color:#b01f1c;
}
#bn, .bn {
	color:#5b3a1c;
}



/*** toggle styles***/

dl {
	display:block;
}

dt, dd {
	display:block;
	top:0;
	margin:0;
	padding:0;
	padding-left:24px;
		color:black;
}

dt {
	font-size:1.3em;
	line-height:1.4em;
	margin-top:.7em;
	color:black;
}

dd {
	padding-right:24px;
}

.clicker {
	cursor:pointer;
}
.closed {
	background:url(../images/arrow_up.gif) left center no-repeat;
}
.open {
	background:url(../images/arrow_dn.gif) left center no-repeat;
}

dt#gn.open {
	background-image:url(../images/arrow_gn_dn.gif);
}

dt#gn.closed {
	background-image:url(../images/arrow_gn_up.gif);
}

dt#bl.open {
	background-image:url(../images/arrow_bl_dn.gif);
}

dt#bl.closed {
	background-image:url(../images/arrow_bl_up.gif);
}

dt#or.open {
	background-image:url(../images/arrow_or_dn.gif);
}

dt#or.closed {
	background-image:url(../images/arrow_or_up.gif);
}

dt#bn.open {
	background-image:url(../images/arrow_bn_dn.gif);
}

dt#bn.closed {
	background-image:url(../images/arrow_bn_up.gif);
}

dt#rd.open {
	background-image:url(../images/arrow_rd_dn.gif);
}

dt#rd.closed {
	background-image:url(../images/arrow_rd_up.gif);
}

a.doubletriple, a.doubletriple:hover {
	position:fixed;
	bottom:0;
	right:0;
	font-family:arial, helvetica, sans-serif;
	font-size: 9px;
	line-height:9px;
	padding:2px;
	background-color:#edecec;
	color:#6d6d6d;
	z-index:1900;
}

a.doubletriple:hover {
	background-color:black;
	color:white;
}