/*
todo:
- alpha png nav elements
*/

body{
	/*background: #FFF url(images/home_img.jpg) 20 5 fixed no-repeat; */
	background: #FFF url(images/bg_gradient.jpg) 0 0 repeat-x;
	/*background-color: #EAFFFF;*/
	margin: 20px 5px;
	padding: 0;
	font: 11px Arial;
	color: #000;
}

img {
	border: none;
	display: block;
}

a {
	color: #FFF;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#nav a:hover {
	text-decoration: none;
}


h1 {
	margin: 0;
	padding: 0;
	width: 220px;
}

h2 {
	margin: 0;
	padding: 0;
	font: 24pt/24pt Arial;
	font-weight: normal;
	color: #164B81; /* dark blue */
}

h3 {
 	margin: 0;
	font: 14pt/14pt Arial;
	font-weight: normal;
}
h4 {
	margin: 0;
	font: 10pt/10pt Arial;
	font-weight: normal;
}

h5 {
	margin: 4px 0 0;
	padding: 0;
	color: #333;
	font: 8pt/8pt Arial;
	font-weight: bold;
}
#page {
	width: 880px;
	height: auto;
}
body.home #footer {
	background-color:#164B81;
	margin-top:0px;
	padding-top:4px;
	height:50px;
	color: #FFFFFF;
	font: Verdana, Arial;
	text-align:center;		
}
#nav {
	position: relative;
	height: 84px;
	background-color: #CDFFFF;
	/*z-index: 100;*/
}

#aboutnav {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 26px;
	left: 474px;
}
#setnav {
	margin: 0;
	padding: 0;
	position: absolute;
	top:196px;
	left: 220px;
}
#mainnav {
	margin: 0;
	padding: 0;
	position: absolute;
	left: 1px;
	top: 15px;
	width: 880px;
	/*background-color: #4D97B2; */
}

#nav ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

#nav li {
	float: left;
	position: relative;
	width: 100px;
	border: 1px solid #CDFFFF;
}

#mainnav li.nav_off, #mainnav li.nav_off a {
	/* background: transparent url(images/nav_off.jpg) 0 0 no-repeat; */
}

#mainnav li.nav_on, #mainnav li.nav_on a {
	/*background: transparent url(images/nav_off.jpg) 0 0 no-repeat; */
	text-decoration: none;
	color: #CDFFFF;
}

#mainnav li.nav_off a:hover {
	color: #164B81;
}
#nav li ul {
	display: none;
	position: absolute;
	top: 400px;
	margin-top: -2px;
	left: 0;
	/*border-bottom: 2px solid #333;*/
	width: 100px;
}

#nav li>ul {
	top: auto;
	left: auto;
	width: 100px;
}

#nav li:hover ul, #nav li.over ul {
	display: block;
}

#mainnav a {
	background: transparent url(images/nav_off.jpg) 0 0 no-repeat;
	/*background-color: #4D97B2;*/
	display: block;
	width: 100px;
	height:50px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	font: bold 11px Verdana, Arial, Helvetica;
	/*	margin-top: 10px;*/
}

#mainnav a:hover, body.home #mainnav a.home, body.new #mainnav a.new, body.signup #mainnav a.signup, body.department #mainnav a.department {
	background: transparent url(images/nav_over.jpg) 0 0 no-repeat;			  	    
	/* background-color: #4D97B2; */
	text-decoration: none;
	color: #164B81;
}

body.info {
	background-color:#FFFFFF;
}
body.info #page {
	height:inherit;
}
#mainnav ul a {
	background-image: none;
	text-align: center;
	width: auto;
	color: #FFF;
	background-color: #4D97B2;
	padding: 0 4px;
	font: bold 11px/18px Verdana, Arial, Helvetica;
}

#mainnav ul a:hover {
	background-image: none;
	background: #ED1D2F;
	text-decoration: none;
	color: #FFF;
}

#promos {
	clear: both;
}

#promos div {
	width: 254px;
	height: 145px;
	float: left;
}

#promos form {
	margin: 0;
	padding: 0;
}

#promos form div {
	width: 221px;
	height: 125px;
	padding: 10px 15px;
	float: left;
	background: transparent url(images/finder_bg.gif) 0 0 no-repeat;
}

#promos h3 {
	margin: 0 0 5px 0;
	padding: 0;
	color: #ED1D2F;
}

#postcode {
	width: 70px;
	font: 10px Arial;
}

#locations {
	width: 130px;
	font: 10px Arial;
}

#find_a_store p {
	margin: 0;
	padding: 0;
}

#footer {
	clear: both;
	color: #FFF;
	font-size: 10px;
	font-family: Verdana, Arial, Helvetica;
	/*font-weight: bold; */
	margin: 0;
	padding: 10px 0;
	position: relative;
}

#footer a {
	color: #FFF;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

#subnav {
	display: block;
	padding: 3px 5px;
	margin: 0;
	background: #FF9900;
	color:#FFFFFF;
	font-family:verdana,arial;
	font-size:11px;
	font-weight:bold;
}

#subnav a {
	color:#ffffff;
	text-decoration:none;
}

#subnav a.selected, #subnav a:hover {
	color: #ED1C2E
}

#content {
	width: 880px;
	height: auto;
	position: relative; 
	margin-bottom: 50px;
	background-color:#FFFFFF;
}
#content h3 {
	padding-top: 50px;
	padding-left: 250px;
	color: #274F73;
}
#content h4 {
	padding-left: 250px;
	font-weight: bold;
	color: #274F73;
}
#content h5 {
	padding-left: 250px;
	color: #274F73;
}
#content p {
	margin-top:0px;
	padding-left:250px;
	width: 450px;
	color: #000;
	font: 12px Verdana, Arial, Helvetica;
}
#content a {
	color: #274F73;
	font-weight: bold;
}
/*body.info h2 {
	color: #fff;
}

body.info h3 {
	padding: 10px 0 4px 0;
	color: #fff;
}

body.info h4, .redheader_sml {
	margin: 0;
	padding: 0;
	color: #ED1D2F;
	font-size: 10pt;
}*/

body.press h4 {
	margin: 15px 0 5px;
}

body.hoffice h5 {
	margin: 15px 0 2px;
}

body.info p {
	margin: 0 0 15px 0;
	padding: 0;
	font-family:verdana,arial;
}

body.info #content {
	background: #fff;
}

/* clear: both should be on #content (above) but incorrectly gets inherited on macie
http://www.macedition.com/cb/ie5macbugs/#floatclearbug so have to use extra div for now
*/
body.info #rule2 {
	clear: both;
	background: #fff;
	font-size: 1px;
}

body.info #content p {
	margin: 2px 0;
	font: 11px/12px Verdana;
}

body.results #content p {
	margin: 6px 0;
	font: 11px/12px Verdana;
}

body.results #content h5 {
	margin: 26px 0 0 0;
}

body.editorial h2 {
	margin-bottom: 10px;
	color: #759935;
}

body.editorial h3 {
	padding: 0 0 0 0;
	color: #759935;
}

body.editorial #content {
	background: white url(images/lookwhite_bg.gif) 0 0 repeat-y;
}

body.editorial #content p {
	margin: 0 0 14px 0;
	font: 11px/12px Verdana;
}

body.tv #content {
	background: url(images/tvad_img.jpg) right no-repeat; 
	background-color: #ED1D2F;
	color:#FFF; 
	height:440px
}
div.columnA {
	width: 371px;
	float: left;
}

div.columnB {
	width: 388px;
	float: left;
}
div.columnC {
	/*width: 600px;*/
	float: left;
}

body.editorial h2 {
	margin-bottom: 10px;
	color: #759935;
}

body.surf h3 {
	padding: 0 0 0 0;
	color: #759935;
}

body.surf #content {
	width: 758px;
	background-color:#FFFFFF;
}

body.surf #content p {
	margin: 0 0 14px 0;
	font: 11px/12px Verdana;
}

/* have to specify columnA class only applies to divs otherwise iemac goes loopy
should also be a nice 10px all round padding but confuses iemac
*/
body.surf div.columnA {
	padding: 10px 9px 10px 10px;
	width: 352px;
}

body.surf div.columnC {
	padding: 10px;
}
body.editorial div.columnA {
	padding: 10px 9px 10px 10px;
	width: 352px;
}
body.editorial div.columnC {
	padding: 10px;
}
body.info #content div.columnA {
	padding: 10px;
	width: 351px;
}

body.info #content div.columnB {
	padding: 10px;
	width: 368px;
}

#title {
	background: #ED1D2F;
	height: 143px;
	padding: 10px;
	overflow: hidden;
}

#title p {
	color: #fff;
	font-weight: bold;
}

#rule {
	clear: both;
}

body.sitemap h4 {
	margin: 15px 0;
}
/* roomsets style */
#setsnav {
	position: absolute;
	top: 148px;
	right: 10px;
	width: 164px;
}

#setsnav p {
	color: #666;
	font-size: 7pt;
	margin: 25px 0;
}

#setsnav table {
	border: none;
	border-collapse: collapse;
}

#setsnav td {
	margin: 0;
	padding: 0;
}

#setsnav a {
	border: 1px solid #fff;
	display: block;
	width: 80px;
	height: 60px;
	line-height: 60px;
	color: #666;
	text-align: center;
	font-weight: bold;
	font-size: 7.5pt;
	text-decoration: none;
}

#setsnav a:hover span, a.neutralSelected span, a.floralSelected span, a.glossSelected span, a.goldSelected span, a.polkaSelected span, a.monoSelected span {
	visibility: hidden;
}

a.neutral:hover, a.neutralSelected {
	background: #d8caa3 url(images/mini_neutral.jpg) 0 0 no-repeat;
}

a.floral:hover, a.floralSelected {
	background: #d8caa3 url(images/mini_flora.jpg) 0 0 no-repeat;
}

a.gloss:hover, a.glossSelected {
	background: #d8caa3 url(images/mini_gloss.jpg) 0 0 no-repeat;
}

a.gold:hover, a.goldSelected {
	background: #d8caa3 url(images/mini_gold.jpg) 0 0 no-repeat;
}

a.polka:hover, a.polkaSelected {
	background: #d8caa3 url(images/mini_polkadot.jpg) 0 0 no-repeat;
}

a.mono:hover, a.monoSelected {
	background: #d8caa3 url(images/mini_monochrome.jpg) 0 0 no-repeat;
}

#sets {
	width: 540px;
	margin: 0 0 0 15px;
	position: relative;
	/* min-height: 550px; */
}

#sets h4 {
	color: #444;
	font-size: 11pt;
	margin: 0 0 5px 0;;
	padding: 0;
}

#sets p {
	color: #666;
	margin: 6px 0;
	padding: 0;
}