/*
CONTENTS

1. Reset and initial style
2. Site structure
3. Generic styling and page layout (that's not in 1.)
4. Promos -> Breadcrumbs, contacts, downloads, beam news, case studies, clients



*/

/*1. RESET AND INITIAL STYLE--------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
section, article, canvas, nav, header, footer, aside, time {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	background:transparent;
}

section, nav, header, footer, article, aside, time {
	display:block;
}

body {font-size:62.5%; color:#363434; line-height:1; letter-spacing:-0.1px;
	font-family: 'Lucida Sans Unicode','Lucida Sans','Lucida Grande',Tahoma,Arial,sans-serif;
	/*font-family: "DINMittelEF-Regular", "Trebuchet MS", Trebruchet, Arial, Helvetica, sans-serif;*/
	background:white url('../images/nav-top.gif') repeat-x left top;
}

/* remember to define focus styles! */
:focus {outline: 0;}

/*lists*/
ol, ul {list-style:none;}
.column ul, .column ol {font-size:1.2em; line-height:138%;}
.column ul p, .column ol p, .column ul a, .column ol a {font-size:1em;}
.column ul li {text-indent:20px; padding-bottom:10px; background:transparent url('../images/bullet.gif') no-repeat left top;}
.column ol li {text-indent:8px; padding-bottom:10px; list-style: decimal inside;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left;font-weight: normal;}

/*time, dates etc...*/
time {font-size:1.1em; line-height:138%;}

/*quotes*/
/*blockquote:before, blockquote:after,
q:before, q:after {content: "";}*/
blockquote, q {quotes:"'" "'"; color:black; background:#e8e9e8 url('') no-repeat top left;}
q {font-size:1.1em; padding:10px; margin:10px auto; display:block; width:90%;}

/*text styling*/
p {font-size:1.2em; line-height:138%;}
.column p {padding:0px 0px 14px 0px;}
strong {font-weight:bold; letter-spacing:-0.2px;}
em {font-style:italic;}
big {font-size:1.23em; line-height:125%;}
small {font-size:0.77em;}

/*headers*/
h1 {color:#ffffff; font-size:2.6em; line-height:1.4em;}
h2, h3 {color:#ffffff; font-size:1.3em;}
h4, h5 {font-size:1.5em; font-weight:bold; letter-spacing:-0.2px; padding-bottom:10px;}
h6 {font-size:1.2em; padding-bottom:4px;}
/*h1, h2, h3, h4, h5, h6 {color:#ffffff;}
h2, h3 {padding-bottom:10px;}
h4, h5, h6 {padding-bottom:10px;}*/


/*links*/
a, a:link {text-decoration:none; color:#7d9c2a; font-weight:normal; border-bottom:1px dotted #99d200; font-size:1.2em;}
a:hover, a:active {color:#99d200; border-bottom:none;}
p a {font-size:1em;}
.article p a {font-size:1em;}
a span {display:none;}
a.more, a.view-all {background:transparent url('../images/link-arrow.gif') no-repeat 0px 0px;}
a.more, a.view-all {padding:0px 0px 0px 10px;}
a.more:hover, a.view-all:hover {background-position:0px -26px;}
a.view-all {float:right; margin:0px 10px 0px 0px;}

/*forms*/
form {}
fieldset {}
form .form-field {position:relative;}
legend {display:none;}
label, input, select, textarea {display:block;}
label {font-size:1.2em; position:absolute; top:3px; left:6px; color:#ffffff; text-shadow:#696665 1px 1px 1px; }
.no-js label {position:relative; color:#363434;}
input, select, textarea {}
input {color:#ffffff; font-size:1.2em; background-color:#9c9897; text-shadow:#696665 1px 1px 1px; border:1px solid #696665; margin-right:3px; padding:2px;}
.form-error input {border:1px solid #cc2d52;}
input.button {color:white; font-size:1.1em; text-shadow:#3c8c78 1px 1px 1px; background-color:#53c0a5; border:1px solid #3c8c78; padding:2px 7px;}
input.button:hover {background-color:#ffffff; cursor:pointer; color:#3c8c78;}

/*images*/
img {margin-bottom:10px;}

/*SITE STRUCTURE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*#page {width:953px; margin:0px auto;}*/
#masthead {width:953px; margin:0px auto; overflow:hidden; clear:both; padding:0px 0px 20px; position:relative; z-index:30;}

/*languages nav*/
#choose-language {width:953px; overflow:hidden; margin:0px 0px 22px;}
#choose-language li {display:block; float:left; padding:0px 0px 0px 5px;}
#choose-language li a {text-align:center; display:block; font-size:1.1em; padding:8px 25px 10px 20px; color:#959595; border-bottom:none;}
#choose-language li a:hover {color:#666666;}
#choose-language li.selected {background:transparent url('../images/nav-topl.gif') no-repeat left top;}
#choose-language li.selected a {background:white url('../images/nav-topr.gif') no-repeat right top; color:#666666;}

/*branding*/
#branding {width:500px; padding:0px; float:left; clear:left; overflow:hidden; position:relative;}
#branding h1 {color:#cccccc; font-size:2.0em; position:relative; width:160px; padding:10px 0px; line-height:1em;}
#branding h1 a {background:transparent url('../images/logo.gif') no-repeat left top; position:absolute; top:0px; left:0px; height:100%; width:100%; display:block; text-indent:-999em; border-bottom:none;}

/*login error*/
.login-error {width:247px; padding:6px 10px; position:absolute; top:36px; left:316px; border:1px solid #cc2d52; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.login-error p {color:#cc2d52;}
.login-error p strong {display:block;}



/*login form*/
#login {width:371px; float:right; overflow:hidden;}
#login .form-field {float:left;}
#login input {width:146px;}
#login input.button {float:left; width:auto;}
#login a, #login a:visited {color:#32759c; border-bottom:1px dotted #32759c; font-size:1.1em; line-height:1.38em;}
#login a:hover, #login a:active {color:#32759c; border-bottom:none;}

/*nav*/
#site {border-top:1px solid #cccccc; border-bottom:1px solid #cccccc;}
#site ul {width:943px; margin:0px auto; border-left:1px dotted #cccccc; background-color:#ffffff; overflow:hidden;}
#site ul #facebook {float: right; margin-top:8px; margin-right: 7px;}
#site ul li {float:left; border-right:1px dotted #cccccc;}
#site ul li a, #site ul li a:visited {display:block; font-size:1.3em; line-height:1.2em; color:#666666; padding:10px 22px; position:relative; z-index:210; border-bottom:none;}
#site ul li a:hover, #site ul li a:active {color:#ffffff; background-color:#99d200; text-shadow:#80af00 1px 1px 1px;}

/*who we are dd*/
#site ul li.nwho a {width:78px;}
#site ul li.nwho ul li a {border-bottom:1px dotted #cccccc;}
#site ul li.nwho ul {width:120px;}

/*services dd*/
#site ul li.nservices a {width:70px; padding-left:15px; text-align:center; text-transform:lowercase;}
#site ul li.nservices ul li a {border-bottom:1px dotted #cccccc; text-align:left;}
#site ul li.nservices ul {width:108px;}

#site ul li ul {position:absolute; border:1px solid #cccccc; z-index:180;
		-webkit-box-shadow:rgba(0,0,0,0.5) 0 1px 10px;
		-moz-box-shadow:rgba(0,0,0,0.5) 0 1px 10px;
		box-shadow:rgba(0,0,0,0.5) 0 1px 10px;
}
/*#site ul li ul li a {position:relative; z-index:190;}*/

/*footer*/
#site-footer {background:#333333 url('../images/footer-logo.gif') no-repeat right bottom; width:100%; overflow:hidden; padding:30px 0px 90px 0px; color:#cccccc; position:relative; z-index:60;}
#site-footer a {color:#ffffff;}
#site-footer .offices, #copyright-links {width:943px; margin:0px auto; clear:both;}
#site-footer .vcard {width:130px; float:left; margin:0px 30px 0px 0px;}
#site-footer .vcard a {border-bottom:1px dotted #ffffff; font-size:1em;}
#site-footer .vcard a:hover {border-bottom:none;}
#site-footer .vcard p {text-transform:lowercase; font-weight:bold; font-size:1.4em; padding:14px 0px 14px 0px;}
#site-footer .vcard span {display:block; line-height:1.2em;}
#site-footer .vcard span.locality, #site-footer .vcard span.region, #site-footer .vcard span.postal-code {display:inline;}
#site-footer .vcard .adr {height:auto !important; height:60px; min-height:60px;}

#copyright-links {padding:30px 0px 0px 0px; overflow:hidden;}
#copyright-links p {float:left; font-size:1em; vertical-align:bottom; padding-top:16px;}
#copyright-links a {float:right; padding:0px 0px 0px 10px; border-bottom:none; display:block; text-indent:-999em; background:transparent url() no-repeat bottom right; height:30px;}
#copyright-links #mill {background-image:url('../images/mill-logo.gif'); width:37px;}
#copyright-links #adtext {background-image:url('../images/adtext-logo.gif'); width:56px;}


/*3. page layouts and generic content~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.content {margin:20px auto 0px; position:relative; width:953px; clear:both; z-index:90;}

.page-header {width:999em; background-color:#99d200; text-align:right; padding:2px 12px 10px 10px; overflow:hidden; position:absolute; top:0px; right:620px;}
.page-header h1, .page-header h2 {width:306px; float:right; clear:both; text-shadow:#80af00 1px 1px 1px;}
.long-header {right:364px;}
.long-header h1 {width:572px;}

.intro-media {position:relative; float:left; overflow:hidden; width:953px;}
.intro-media figure {position:relative; float:right; overflow:hidden; margin:0px 0px 0px 0px; height:296px; width:528px; background:transparent url('../images/figure-bk.png') no-repeat left top; z-index:12;}
.intro-media figure img {position:absolute; top:6px; left:12px; z-index:110;}
.intro-media figure a#player {display:block; position:absolute; top:6px; left:12px; z-index:13; height:284px; width:504px; border-bottom:none;}
.intro-media h3 {background-color:#99d200; padding:10px 100px 10px 12px; margin:78px 0px 0px 26px; width:300px; line-height:1.4em; text-shadow:#80af00 1px 1px 1px;}
.intro-media p {width:300px; margin:20px 0px 0px 36px; color:#464646; font-size:1.3em;}
.intro-media p em {font-style:normal; font-size:0.8em;}
.intro-media p a {font-size:1em;}


.columns {clear:both; overflow:hidden; padding:10px 0px 20px;}
.column {width:297px; padding:0px 15px 0px 5px; float:left; overflow:hidden;}
.double-col {width:590px; padding:0px 15px 0px 5px; float:left; overflow:hidden;}
.promos {border-left:1px dotted #cccccc; padding:0px 5px 0px 15px;}


/*PROMOS~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

aside {padding:0px 0px 14px 0px; margin:0px 0px 14px 0px; border-bottom:1px dotted #cccccc;}
aside article {padding:8px 0px 14px 0px; border-top:1px dotted #e8e3e1;}
aside article.first-one {border-top:none;}

/*breadcrumbs*/
.breadcrumbs {background:#f3f3f3 url('../images/bread-corner.gif') no-repeat right top;}
.breadcrumbs ul {padding:7px 7px 10px 7px; overflow:hidden;}
.breadcrumbs ul li {background:none; float:left; margin:3px; text-align:center; text-indent:0px; padding:0px;}
.breadcrumbs ul li a {display:block; width:80px; border-bottom:none; color:#464646; background:#ffffff url() repeat top left; padding:6px 4px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; text-transform:lowercase; height:20px;}
.breadcrumbs ul li a.long-bread {line-height:0.8em;}
.breadcrumbs ul li.master-page {float:none;}
.breadcrumbs ul li.master-page a {margin-bottom:7px; position:relative;}
.breadcrumbs ul li.master-page a span {position:absolute; bottom:-7px; left:0px; display:block; width:88px; height:7px; background:transparent url('../images/bread.gif') no-repeat center bottom;}
.breadcrumbs ul li a:hover, .breadcrumbs ul li a.selected {color:#f3f3f3; background-color:#464646;}
.breadcrumbs ul li.master-page a:hover span, .breadcrumbs ul li.master-page a.selected span {background-image:url('../images/bread-hover.gif');}

/*clients*/
.clients {}
.clients .viewer {width:296px; height:140px; position:relative; overflow:hidden; padding-top:10px;}
.clients ul {height:140px; width:900px; position:relative; left:-170px;}
.clients ul li {background:none; text-indent:0px; float:left; width:150px; margin:0px 10px 0px 10px; padding:0px;}
.clients .viewer a.lscroll, .clients .viewer a.rscroll {display:block; width:14px; height:100%; position:absolute; text-indent:-999em; top:0px;}
.clients .viewer a.lscroll {left:0px; background:transparent url('../images/clients-fl.png') repeat-y left top;}
.clients .viewer a.rscroll {right:0px; background:transparent url('../images/clients-fr.png') repeat-y left top;}
.clients .viewer a.lscroll span, .clients .viewer a.rscroll span {display:block; width:13px; height:20px; position:absolute; top:50px;}
.clients .viewer a.lscroll span {left:0px; background:transparent url('../images/clients-al.gif') no-repeat 0px 0px;}
.clients .viewer a.rscroll span {right:0px; background:transparent url('../images/clients-ar.gif') no-repeat 0px 0px;}
.clients .viewer a.lscroll:hover span, .clients .viewer a.rscroll:hover span {background-position:0px -20px;}
.no-js .clients .viewer {width:290px; height:auto;}
.no-js .clients .viewer a.lscroll, .no-js .clients .viewer a.rscroll {display:none;}
.no-js .clients ul {width:auto; height:auto;}
.no-js .clients ul li {}

/*news promo*/
.news-promo {padding-bottom:8px;}
.news-promo a.view-all {margin:-23px 20px 0px 0px; line-height:1.2em;}
.news-promo p {padding:0px 0px 4px;}

/*case studies*/
.case-studies {padding-bottom:4px;}
.case-studies a.view-all {margin:-23px 0px 0px 0px; line-height:1.2em;}
.case-studies img {border:1px solid #cecac8;}

/*news article and case study listings*/
.picture-list  {}
.picture-list li {overflow:hidden; border-bottom:1px dotted #ccc; padding:14px 0px 4px;}
.picture-list li img {float:left; border:1px solid #ccc; margin-right:14px;}
.picture-list li h6 {font-weight:bold; padding:10px 0px;}

/*downloads*/
.downloads ul {overflow:hidden;}
.downloads ul li {background:none; text-indent:0px; float:left; padding:0px 0px 4px 0px;}
.downloads ul li a {display:block; width:148px; height:65px; position:relative; border:none;}
.downloads ul li a span {display:block; width:148px; height:65px; position:absolute; top:0px; left:0px;}
.downloads ul li a:hover span {background-position:0px -65px;}

/*contacts*/
dl.contacts {line-height:160%;}
dl.contacts dt, dl.contacts dd {}
dl.contacts dt {font-size:1.2em;}
dl.contacts dd {padding-bottom:8px;}
dl.contacts dd a {border-bottom:none;}

.article p {padding-bottom:10px;}


/*spot rods*/
.spot-rods {background:#ffffff; padding:13px 0px 15px 23px; margin-left:5px;}
.spot-rods ul li {height:auto !important; height:291px; min-height:291px; float:left; padding:0px 0px 0px 0px; clear:none;}
.spot-rods ul li h5 {width:100px; height:291px; float:left; position:relative; font-size:1.5em; padding:0px 10px 0px 0px;}
.spot-rods ul li h5 span {width:100px; height:291px; position:absolute; top:0px; left:0px; background:transparent url('') no-repeat top left; cursor:pointer;}
.spot-rods ul li p {width:136px; padding:5px 0px 0px 0px; float:left; overflow:hidden;}
/*.spot-rods dl dd.displayed {display:block;}
.spot-rods dl dd p {width:136px; overflow:hidden;}*/

#play span {background-image:url('../images/play.jpg');}
#change span {background-image:url('../images/change.jpg');}
#send span {background-image:url('../images/send.jpg');}
#store span {background-image:url('../images/store.jpg');}

#what-we-do .spot-rods ul li {height:auto !important; height:250px; min-height:250px;}
#what-we-do .spot-rods ul li h5 {padding-bottom:10px; height:250px;}
#what-we-do .spot-rods ul li h5 span {height:250px;}
#what-we-do .spot-rods ul li .description {float:left;}
#what-we-do .spot-rods ul li p {width:175px; padding:5px 10px 5px 0px; float:none;}

#what-we-do #play span {background-image:url('../images/play.gif');}
#what-we-do #change span {background-image:url('../images/change.gif');}
#what-we-do #send span {background-image:url('../images/send.gif');}
#what-we-do #store span {background-image:url('../images/store.gif');}


/*.no-js .spot-rods dl dd {width:170px;}*/


/*pagination*/
.pagination {float:right; clear:right;}
.pagination a, .pagination span {display:block; float:left; font-size:1.8em; padding:0px 4px; line-height:100%;}
.pagination .previous, .pagination .next {height:18px; width:21px; padding:0px; background:transparent url('../images/page-arrows.gif') no-repeat top left; text-indent:-999em;}
.pagination .previous:hover, .pagination .previous:active {background-position:-21px 0px;}
.pagination .next {background-position:0px -18px;}
.pagination .next:hover, .pagination .next:active {background-position:-21px -18px;}