/* ----- http://www.cybermill.co.uk ------------------------------------------------------------------------------------- */
/* ----- © 2009 The Cybermill Ltd --------------------------------------------------------------------------------------- */

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 { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
body { line-height:1; color:black; background:white; height:100%; }
table { border-collapse: separate; border-spacing:0; }
caption, th, td { text-align:left; font-weight:normal; }

blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote, q { quotes:"" ""; }

strong { font-weight:bold; }
em { font-style:italic; }



/* TYPE --------------------------------------------------------------------------------------------- */

body { font:normal 12px helvetica,arial,sans-serif; line-height:20px; color:#31352F; }

p  { padding:0; margin:10px 0; }
ul { padding:0; margin:10px 0; list-style:none outside; }
li { padding:0 0 0 20px; margin:10px 0; background:url('../images/bullet.gif') center left no-repeat; }

h1 { padding:0; margin:0; font:normal 25px 'trebuchet ms',sans-serif; line-height:30px; color:white; }
h2 { padding:0; margin:0; font:normal 20px 'trebuchet ms',sans-serif; line-height:20px; color:white; }
h3 { padding:0; margin:0; font:bold   12px 'trebuchet ms',sans-serif; line-height:20px; color:#333333; }

a { color:white; }
a:visited { color:white; }
a:hover   { color:#E84515; }



/* LAYOUT --------------------------------------------------------------------------------------------- */

html { height:100%; }
body { height:100%; background:#7A796A url('../images/body_bg.gif') center top repeat-y; }

#wrapper { width:840px; margin:0 auto; }

#header { height:190px; background:url('../images/header_bg.jpg') center top repeat-x; }

#nav { height:60px; }

#content { background:#A3B52D; }

#footer { }



/* HEADER --------------------------------------------------------------------------------------------- */

#header { position:relative; }

#header #logo { margin:0; padding:0; width:340px; height:110px; position:absolute; top:35px; left:65px; z-index:500; }
#header #logo a { display:block; width:340px; height:110px; text-indent:-9999em; background:url('../images/thecybermill_logo.png') center center no-repeat; }
* html #header #logo a { background-image:url('../images/thecybermill_logo.gif'); }

#header .cloud { width:840px; height:190px; position:absolute; top:0; left:0; background:0px center repeat-x; z-index:200; }

#header #cloud1 { background-image:url('../images/header_cloud1.png'); }
#header #cloud2 { background-image:url('../images/header_cloud2.png'); }
#header #cloud3 { background-image:url('../images/header_cloud3.png'); }

* html #header #cloud1 { background-image:url('../images/header_cloud1.gif'); }
* html #header #cloud2 { background-image:url('../images/header_cloud2.gif'); }
* html #header #cloud3 { background-image:url('../images/header_cloud3.gif'); }



/* NAV --------------------------------------------------------------------------------------------- */

#nav { overflow:visible; }

#nav ul { list-style:none; margin:0; padding:0; }
#nav li { list-style:none; margin:0; padding:0 0 0 10px; background:url('../images/nav_separator.gif') left center no-repeat; float:left; position:relative; }

#nav a { display:block; height:60px; float:left; padding:0 20px; font:normal 22px helvetica,arial,sans-serif; line-height:60px; color:#EEE2C9; text-decoration:none; }
#nav a:hover { color:#E75F23; }

#nav li.clientarea { padding:0; background:transparent; float:right; }
#nav li.clientarea a { font-size:14px; }

#nav li.first { padding:0; background:transparent; }



/* Highlighting --------------- */

#nav li span { display:none; }

body.contact #nav li.contact span,
body.blog #nav li.blog span,
body.testimonials #nav li.testimonials span,
body.services #nav li.services span,
body.portfolio #nav li.portfolio span,
body.home #nav li.home span { display:block; height:15px; width:40px; position:absolute; bottom:-15px; left:50%; margin:0 0 0 -20px; line-height:0; background:url('../images/nav_marker.gif') bottom center no-repeat; }



/* CONTENT --------------------------------------------------------------------------------------------- */

#content { overflow:auto; _height:200px; _overflow:visible; }

#content hr { clear:both; margin:0 45px; border:none; border-bottom:1px solid #8B9B2C; background:transparent; height:1px; color:#8B9B2C; }



/* Columns & boxes --------------- */

#content .column { width:350px; _height:200px; margin:45px 0; }

#content .column.full { width:750px; margin:45px; }

#content .column.left  { margin-left:45px; float:left; }
* html #content .column.left { margin-left:22px; }

#content .column.right { margin-right:45px; float:right; }
* html #content .column.right { margin-right:22px; }

#content .column.wide { width:485px; }
#content .column.slim { width:220px; }

#content .column.widebox { width:465px; padding:10px; background:#2D322A url('../images/box_bg.jpg') top right no-repeat; }
#content .column.slimbox { width:200px; padding:10px; background:#2D322A url('../images/box_bg.jpg') top right no-repeat; }



/* Uppercontent --------------- */

#content .uppercontent { background:#C8D566 url('../images/uppercontent_bg.gif') top repeat-x; overflow:auto; padding:30px 45px; }

#content .uppercontent h1 { margin:0; font:normal 30px 'trebuchet ms',sans-serif;  line-height:45px; color:#2D322A; }
#content .uppercontent h2 { margin:0; font:normal 15px helvetica,arial,sans-serif; line-height:25px; color:#2D322A; }



/* Slideshow --------------- */

#content .slideshow { position:relative; }

#content .slideshow .belt { width:465px; height:260px; position:absolute; left:0; top:0; overflow:hidden; }

#content .slideshow .panel { width:465px; height:260px; float:left; overflow:hidden; }
#content .slideshow .panel img { width:465px; height:260px; margin:0; padding:0; }

#content .slideshow .next { display:block; width:20px; height:50px; position:absolute; top:50%; right:-20px; margin:-25px 0 0 0; background:url('../images/slideshow_next.gif') center top no-repeat; text-indent:-9999em; }
#content .slideshow .prev { display:block; width:20px; height:50px; position:absolute; top:50%; left:-20px;  margin:-25px 0 0 0; background:url('../images/slideshow_prev.gif') center top no-repeat; text-indent:-9999em; }

#content .slideshow .next:hover { background-position:center bottom; }
#content .slideshow .prev:hover { background-position:center bottom; }

#content #slideshow { width:465px; height:260px; position:relative; }



/* Boxlist --------------- */

#content .column.serviceslist { width:180px; height:240px; padding:20px; }

#content .column.serviceslist ul { list-style:none; padding:0; }
#content .column.serviceslist li { list-style:none; padding:0 0 0 25px; margin:0; line-height:35px; }

#content .column.serviceslist a { color:#E0B939; }
#content .column.serviceslist a:hover { color:#E84515; }

#content .column.serviceslist li.design      { background:url('../images/icon_design.gif') left center no-repeat; }
#content .column.serviceslist li.development { background:url('../images/icon_development.gif') left center no-repeat; }
#content .column.serviceslist li.cms         { background:url('../images/icon_cms.gif') left center no-repeat; }
#content .column.serviceslist li.ecommerce   { background:url('../images/icon_ecommerce.gif') left center no-repeat; }
#content .column.serviceslist li.seo         { background:url('../images/icon_seo.gif') left center no-repeat; }
#content .column.serviceslist li.branding    { background:url('../images/icon_branding.gif') left center no-repeat; }




/* Contact form --------------- */

#content .contact { overflow:auto; _height:255px; }

#content .contact label { display:block; width:204px; color:#2D322A; }

#content .contact .inputbox { display:block; width:204px; margin:0; padding:6px; font:normal 13px verdana; border:1px solid #2D322A; }
#content .contact .inputbox.required { border-color:#2D322A; }

#content .contact textarea.inputbox { width:470px; height:200px; }

#content .contact p { line-height:1; padding:10px 0; margin:0; }

#content .contact p.send,
#content .contact p.email,
#content .contact p.phone,
#content .contact p.name { float:right; clear:right; }

#content .contact p.message { float:left; }

#content .contact p.send .button { width:220px; padding:5px; font-size:16px; }

#content .contact ul.errors { color:red; }

#content .map iframe { border:1px solid #444444; }
#content .map p { text-align:right; margin:0; }



/* FOOTER --------------------------------------------------------------------------------------------- */

#footer { overflow:auto; color:#EEE2C9; font-size:11px; padding:20px; position:relative; }

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

#footer a { color:#EEE2C9; }
#footer a:hover { color:#E75F23; }

#footer .contactdetails { float:left; }
#footer .contactdetails .thecybermill { height:30px; width:120px; background:url('../images/thecybermill_footerlogo.gif') center center no-repeat; text-indent:-9999em; }

#footer .copyright { position:absolute; right:20px; bottom:20px; color:#898676; }



/* --------------------------------------------------------------------------------------------- */