/* main stylesheet for spectral site */

/* @group common */
/* reset general settings so same across all browsers */
body, html, ul, li, dl, dt, dd, form, h1, h2 , h3, h4, h5, p {margin: 0; padding: 0;}
ul, li, ul li {list-style-type: none;}

a {outline: none;}


body {background: #fff; color: #415968; font: 100.1% "Century Gothic", "Gill Sans MT", Verdana, Arial, Helvetica, sans-serif; /*text-align: center;*/ line-height:1.125em;}

ul, li {margin: 0; padding: 0;}
a {text-decoration: none;}
p {font-size: 0.8em;} /* color: #495357;  */
.image_replace {display:-moz-inline-box; display: inline-block; background:transparent none  0 0 no-repeat; text-indent:-3000px; font:0/0 Arial; overflow:hidden; color:rgba(255,255,255,0); vertical-align:bottom;} /*  text-indent set to 0 elsewhere for both IE6 & IE7 */
/* @end */

/* @group main layout */
/*#header {margin: 0 0 1em; text-align: left; position: relative; margin: 0 auto; width: 960px;}
#header #header_links {font-size: 0.7em; font-weight: bold; text-align: center; top: 10px; width: 960px;}*/
#footer {letter-spacing: 2px; margin: 0 0 2em; text-align: center; width: 100%;}

/* home page */
/*body#page_home #header {margin: 0; width: 100%;}*/
body#page_home #header_links {color: #C0C0C0; font-size: 0.7em; font-weight: normal; /*position: absolute; right: 3px; text-align: right; top: 0px; z-index: 4000; width: 100%;*/}
body#page_home #main_content {left: 50%; margin: -235px 0 0 -286px; position: fixed; top: 50%; z-index: 50;}


/* about page */
/*body#page_about #header {margin: 0 0 20px; position: relative; width: 100%;}
body#page_about #header img {left: 15%; position: absolute; top: 10px;}
body#page_about #header_links {position: absolute; right: 10px; text-align: right; top: 0; z-index: 4000; width: 250px;}*/
/*body#page_about #main_content {left: 50%; margin: -235px 0 0 -286px; position: fixed; top: 50%; z-index: 50;}*/
/*body#page_about #main_content {background: url(/images/backgrounds/about_content_back.png) no-repeat 50% 50%; height: 450px; left: 50%; margin: -225px 0 0 -300px; overflow: hidden; position: absolute; top: 50%; width: 600px;}*/

#section_team, #section_services {margin: 1em 0 0; width: 300px;}
#section_team div {background-image: url(/images/backgrounds/photos_ring.png); background-position: 0 0; background-repeat: no-repeat; padding: 18px 18px 19px 18px; margin: 0 0 10px; width: 64px;}
div#dom_biog_link {background-color: #AF006E;}
div#ray_biog_link, div#james_biog_link {background-color: #26bcdf;}
div#matt_biog_link {background-color: #8D8B00;}
/*#section_team a {background-position: 50% 0; background-repeat: no-repeat; display: block; height: 64px; outline: none; width: 64px;}
#section_team a:hover {background-position: 50% -100px;}*/
div#dom_biog_link a {background-image: url(/images/photos/about_thumbnails_dom.jpg);}
div#ray_biog_link a {background-image: url(/images/photos/about_thumbnails_ray.jpg);}
div#matt_biog_link a {background-image: url(/images/photos/about_thumbnails_matt.jpg);}
div#james_biog_link a {background-image: url(/images/photos/about_thumbnails_james.jpg);}

/*#section_team a {background-image: url(/images/photos/about_thumbnails.jpg); background-repeat: no-repeat; display: block; height: 101px; margin-bottom: 10px; width: 100px;}
#section_team a#dom_biog_link {background-position: 0 0;}
#section_team a#ray_biog_link {background-position: 0 -109px;}
#section_team a#matt_biog_link {background-position: 0 -217px;}*/

/*#section_team {float: left; text-align: left; padding: 0;}*/
#section_services {float: right; text-align: right;}
#section_services ul {color: #415968; font-size: 0.75em;}
/*#section_services ul li {padding: 0 0 10px 0; margin: 0;}*/

/* contact page  */
/*body#page_contact #header {margin: 0 0 20px; position: relative; width: 100%;}
body#page_contact #header img {left: 15%; position: absolute; top: 10px;}
body#page_contact #header_links {position: absolute; right: 10px; text-align: right; top: 0; z-index: 4000; width: 350px;}*/

body#page_contact #main_content {height: 461px; left: 50%; margin: -228px 0 0 -300px; overflow: hidden; position: absolute; top: 50%; width: 600px;}
body#page_contact #main_content form {padding-top: 10px; text-align: left;}
body#page_contact #main_content .contact_inner {height: 420px; overflow: hidden;}
body#page_contact #main_content .contact_inner p {margin-bottom: 1.5em;}

body#page_contact #main_content p span {display: block; float: left; width: 150px;}


/* links page */
/*body#page_links #header {margin: 0 0 20px; position: relative; width: 100%;}
body#page_links #header img {left: 15%; position: absolute; top: 10px;}
body#page_links #header_links {position: absolute; right: 10px; text-align: right; top: 0; z-index: 4000; width: 350px;}*/

body#page_links #main_content {height: 450px; left: 50%; margin: -225px 0 0 -300px; overflow: hidden; position: absolute; top: 50%; width: 600px;}



/* @end */

/* @group links, text and lists */
h1 {font-size: 1.35em; font-weight: normal; text-align: center;} 
h2 {color: #495357; font-size: 1.1em; font-weight: normal; margin-bottom: 2em;}


a:link, a:visited {color: #8b180d;}
a:hover {text-decoration: underline;}

#header #header_links, #header #header_links a {color: #495357;}
body#page_home #header_links a {color: #C0C0C0;}
#header_links a:hover, #footer a:hover {text-decoration: none;}
#header #header_links a.link_about:hover, #header_links a.link_about:hover, a.link_about:hover, #header #header_links a.link_home:hover, #header_links a.link_home:hover, a.link_home:hover {color: #26bcdf;}
#header #header_links a.link_work:hover, #header_links a.link_work:hover, a.link_work:hover {color: #AF006E;}
#header #header_links a.link_contact:hover, #header_links a.link_contact:hover, a.link_contact:hover {color: #8D8B00;}
#header #header_links a.link_links:hover, #header_links a.link_links:hover, a.link_links:hover {color: #333;}

body#page_home #footer a.link_home, body#page_about #footer a.link_about, body#page_work #footer a.link_work, body#page_contact #footer a.link_contact {color: #495357;}
body#page_home #footer a.link_home:hover, body#page_about #footer a.link_about:hover, body#page_work #footer a.link_work:hover, body#page_contact #footer a.link_contact:hover {text-decoration: none;}

body#page_links #main_content ul a {color: #495357;}

body#page_contact #main_content p span a img {border: none;}
body#page_contact a.email_link {background: url(/images/buttons/email_link.png) no-repeat 0 0; height: 19px; display: block; width: 150px;}
body#page_contact a.email_link:hover {background-position: 0 100%;}
body#page_contact a.email_link em {display: none;}
/* @end */     


/* @group Form Stuff */

label {display: block; font-size: 0.7em;}

div.form_row, div.form_row_textarea {padding: 7px 0; width: 480px;}
div.form_row label, div.form_row_textarea label {color: #415968; display: block; float: left; font-size: 0.8em; width: 220px; text-align: right; padding: 4px 4px 0 0;} 
div.form_row_button {text-align: right;}
.form_row input, .form_row_textarea textarea, .form_row textarea {background: #fff; border: 2px solid #cacaca; color: #415968;} 
div.form_row_textarea textarea {height: 180px; width: 200px;}
div.form_row_button {padding-top: 10px; text-align: center;}
div.form_row_button input {outline: none;}

.date_of_birth_container {opacity:0;}
.date_of_birth_container input {background: #fff; border: 1px solid #fff;}
.date_of_birth_container label {color: #fff; font-size: 0.7em;}
/* @end */     

/* Added 11. april 2010 by Hilde to make hover effect on the submit button in the contact page */
.button {
	width: 114px;
	height: 21px;
	background: url(/images/buttons/send_message-sprite.png) 0 0 no-repeat;
	border: none;
	cursor: pointer;
	color: white;
}
.button:hover {
	background-position: 0 -21px;
}
body#page_contact #header #header_links a.link_about:hover {
	color: #8D8B00;
}
/* Added 11. april 2010 by Hilde to make the header with links and logo appear in the same position in IE as in "normal" browsers */
#header {
	position: absolute; 
	width: 100%; 
	margin: 0; 
	top: 21px;
	text-align: left;
}
#header img {
	position: absolute;
	top: 9px;
	left: 15%;
}
#header_links {
	text-align: right; 
	padding: 0 8px; 
	color: #415968;
	font-size: .7em;
	font-weight: bold;
}
a {
	outline: none;
}

/* Changes july 2010 - Hilde */
body#page_about #main_content {height: 450px; left: 50%; margin: -225px 0 0 -300px; overflow: hidden; position: absolute; top: 50%; width: 600px;}
#section_services {float: left; width: 160px; padding: 0;}
#section_clients {float: right; text-align: right; width: 200px; margin: 1em 0 0;}
#section_clients ul {color: #415968; font-size: 0.75em;}
#section_clients ul li {padding: 0 0 8px 0; margin: 0;}
#section_services ul li {padding: 0 0 10px 0; margin: 0;}
#section_team {float: left; width: 200px;}
#section_team, #section_services, #section_clients {margin: 3em 0 0 0;}
#section_team a {background-position: 0 0; background-repeat: no-repeat; display: block; height: 68px; outline: none; width: 68px; margin: -2px 0 0 -2px;}
#section_team a:hover {background-position: 0 -70px;}