/*
##############################
Main Framework
##############################
*/
body {background: #DBDBDB url(http://www.graffica.co.uk/images/graffica/framework/background/home5.jpg) no-repeat; background-position: center 131px}
strong {font-weight: bold}

div#header {height:131px;background: url(http://www.graffica.co.uk/images/graffica/framework/header-bg.png) repeat-x;width:100%;}
div.inner960 {width:960px;margin:0 auto;position:relative;clear:both;}
div.inner936 {width:936px;margin:0 auto;padding:12px;background-color: #FFF;margin-top:109px;}
body.home div.inner936 {margin-top: 210px}
div#footer {width:936px;margin:0 auto;padding:12px;background-color: #5D5D5F;color:#939394;font-size:12px;line-height: 15px}

div.col1, div.col2, div.col3 {width:215px;margin-right:25px;float:left}
div.col4 {width:216px;float:left}

input.error,textarea.error{border:1px dotted #BC0D2D !important;background-color: #FFF !important}

/*
##############################
Body Classes
##############################
*/
body.about {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body3.jpg)}
body.atm {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body4.jpg)}
body.asm {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body2.jpg)}
body.rtm {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body2.jpg)}
body.experience {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body2.jpg)}
body.contact {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body1.jpg)}
body.careers {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body5.jpg)}
body.news {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body1.jpg)}
body.generic {background-image: url(http://www.graffica.co.uk/images/graffica/framework/background/body5.jpg)}

/*
##############################
Header
##############################
*/
ul#mainNav {position:absolute;right:0px;font-size:12px;top:83px}
ul#mainNav li {display:block;float:left;margin-left:2px;width:98px;}
ul#mainNav li a {display:block;float:left;color:#FFF;text-decoration:none;padding-top:5px;height:40px;width:98px}

ul#mainNav li#home a {border-top:4px solid #88888A}
ul#mainNav li#about a {border-top:4px solid #4B4B4D}
ul#mainNav li#experience a {border-top:4px solid #AD2065}
ul#mainNav li#atm a {border-top:4px solid #EC7f00}
ul#mainNav li#asm a {border-top:4px solid #BC0D2D}
ul#mainNav li#rtm a {border-top:4px solid #008963}
ul#mainNav li#contact a {border-top:4px solid #88888A}

ul#mainNav li a:hover,body.home li#home a,body.about li#about a,body.experience li#experience a,body.atm li#atm a,body.asm li#asm a,body.rtm li#rtm a,body.contact li#contact a {border-top-width:8px !important;margin-top:-4px}

ul#secondaryNav {position:absolute;right:0px;font-size:12px;top:15px;color:#4b4b4d}
ul#secondaryNav li {display:block;float:left;margin-left:5px}
ul#secondaryNav li a {color:#4b4b4d;text-decoration:none;}
ul#secondaryNav li a:hover {text-decoration:underline;}

ul#subNav {position:absolute;left:262px;font-size:12px;top:131px;background-color: #DBDBDB;padding:5px;width:688px}
ul#subNav li {display:block;float:left;margin-right:5px;}
ul#subNav li a {display:block;float:left;color:#4B4B4D;text-decoration:none;}
ul#subNav li a:hover {text-decoration:underline;}
ul#subNav li a.current {font-weight: bold}
ul#subNav li a.current:hover {text-decoration:none;}

div#header span {position:absolute;right:0px;top:45px;color:#4B4B4D;font-size:17px}

/*
##############################
Footer
##############################
*/
div#deepFooter {font-size:12px}
div#deepFooter div {position:relative;height:280px}
div#deepFooter div h3 {font-size:12px;color:#4B4B4D;font-weight: bold}
div#deepFooter div h3 a {color:#4B4B4D;text-decoration: none}
div#deepFooter div p {color: #4B4B4D}
div#deepFooter div p.date {color: #b6b6b7;font-style: italic;margin-top:15px}
div#deepFooter div p.sub-header {color:#008963;margin-bottom:10px}
div#deepFooter div img {display:block;margin-bottom:10px;}
div#deepFooter div a.arrow {display:block;position:absolute;text-decoration: none;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:190px;padding:4px 0px 4px 25px;bottom:0px;color:#5D5D5F;font-size:12px}
div#deepFooter div a.arrow:hover {text-decoration: underline}

div#deepFooter .testimonial h3 {margin-bottom:48px}
div#deepFooter .testimonial p {color:#BC0D2D;font-size:12px;margin-bottom:15px;}
div#deepFooter .testimonial p.quote {font-size:18px}

div#deepFooter .project h3 {margin-bottom:29px}
div#deepFooter .experience h3 {margin-bottom:52px}

div#footerCap {border-top: 1px solid #DDD;margin-top:10px;padding-top:10px}
div#footerCap div h3 {font-size:12px;color:#4B4B4D;font-weight: bold}
div#footerCap .col1 {width:695px}
div#footerCap .col1 h3 {margin-bottom:20px}
div#footerCap .col1 img {display:block;float:left;margin-right:10px;vertical-align: middle}

div#footerCap .col4 {font-size: 12px;color:#4B4B4D}
div#footerCap .col4 p {margin:5px 0px}
div#footerCap .col4 div {position: relative}
div#footerCap .col4 input {border:1px solid #E5E5E5;background: #E5E5E5;padding:5px;width:204px;margin-bottom:5px}
div#footerCap .col4 label {top:5px;left:7px;position: absolute}
div#footerCap .col4 label.error {width:0px;height:0px;overflow:hidden}
div#footerCap .col4 input.arrow {background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:70px;padding:4px 0px 4px 25px;color:#5D5D5F;font-size:12px;cursor: default;border:none;text-align: left}
div#footerCap .col4 input.arrow:hover {text-decoration: underline;cursor: pointer}

div#footer strong {color:#FFF}
div#footer a {color:#FFF;text-decoration: none}
div#footer a:hover {text-decoration: underline}
div#footer ul {float:left;margin-right:15px}
div#footer ul a {color:#939394}

/*
##############################
Homepage
##############################
*/
div#rotator {height:280px;background-color:#DBDBDB;color:#4B4B4D;margin-bottom:30px}
div#rotator .col1 {width:240px;float:left;margin:0}
div#rotator .col2 {width:696px;float:left;margin:0;position:relative}

div#rotator .col1 .item {height:50px;padding:10px;cursor: pointer;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) 214px 10px no-repeat;display: block;text-decoration: none;color:#4B4B4D}
div#rotator .col1 .item:hover, div#rotator .col1 .currentItem {background-color: #9C9C9D}
div#rotator .col1 .item h2 {font-size: 15px;margin-bottom:5px}
div#rotator .col1 .item p {font-size: 12px}

div#rotator .col2 .item {height:240px;width:656px;padding:20px;position:absolute;display:block;text-decoration: none;color:#4B4B4D}
div#rotator .col2 .item h3 {font-size: 25px;margin-bottom:5px;width:435px}
div#rotator .col2 .item p {font-size: 15px;margin-top:30px}

div#rotator .col2 .graffica {background: url(http://www.graffica.co.uk/images/graffica/content/home/graffica-header.jpg) no-repeat;color:#FFF}
div#rotator .col2 .asm {background: url(http://www.graffica.co.uk/images/graffica/content/home/asm-header.jpg) no-repeat;display:none}
div#rotator .col2 .atm {background: url(http://www.graffica.co.uk/images/graffica/content/home/atm-header.jpg) no-repeat;display:none}
div#rotator .col2 .rtm {background: url(http://www.graffica.co.uk/images/graffica/content/home/rtm-header.jpg) no-repeat;display:none;color:#FFF}

div#rotator .col2 .graffica h3 {width:550px}
div#rotator .col2 .asm h3 {width:500px}
div#rotator .col2 .atm h3 {}
div#rotator .col2 .rtm h3 {}

/*
##############################
Content Pages
##############################
*/
div#pageHeader {margin-bottom:30px}
div#pageHeader h1 {width:200px;height:169px;background-color: #4B4B4D;float:left;color:#FFF;font-size:25px;padding:20px}
.atm div#pageHeader h1 {background-color: #ED7F00}
.asm div#pageHeader h1 {background-color:#BC0D2D}
.rtm div#pageHeader h1 {background-color:#008963}
.experience div#pageHeader h1 {background-color: #AD2065}
div#pageHeader img {display:block;float:left}

div#content {border-bottom:1px solid #DDD;margin-bottom:20px;color:#4B4B4D;font-size:12px}
div#content .col2 {width:455px;}
div#content .col2 h2 {font-size:25px;margin-bottom:20px}
div#content .col2 p {font-size:12px;margin-bottom: 10px}
div#content .col2 a {color:#4B4B4D}


div#content .col2 ul, div#content .col2 ol {display:block;margin-bottom:10px;margin-left:20px;}
div#content .col2 ul li, div#content .col2 ol li {list-style-type: disc;list-style-position: outside;margin-bottom:10px}
div#content .col2 ul li ul, div#content .col2 ol li ol {margin-top: 10px}
div#content .col2 ol li {list-style-type: decimal;}
div#content .col2 ul li a, div#content .col2 ol li a {text-decoration: none}

.news div#content .col2 ul, .news div#content .col2 ol {width:455px;margin-right: 25px}


div#content .col4 h3 {font-weight:bold;margin-bottom:10px;font-size:12px}

div#content .gallery h3 {margin-bottom:20px}
div#content .gallery div {margin-bottom: 30px}
div#content .gallery a {display:block;float:left;border:2px solid #FFF}

div#content .caseStudies {}
div#content .caseStudies img {display:block;margin-bottom:10px}
div#content .caseStudies h4 {font-weight:bold;margin-bottom:3px}
div#content .caseStudies p {margin-bottom:3px}
div#content .caseStudies p em {font-style: italic;color:#B0B0B1}
div#content .caseStudies a.arrow {display:block;text-decoration: none;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:191px;padding:4px 0px 4px 25px;color:#4B4B4D;font-size:12px;margin-bottom:15px;margin-top:10px}
div#content .caseStudies a.arrow:hover {text-decoration: underline}

/*
##############################
Experience Page
##############################
*/
div#experience {border-bottom:1px solid #DDD;margin-bottom:20px;color:#4B4B4D;font-size:12px;padding-bottom:10px}
div#experience div.experience {position:relative;background-color: #E9E9E9;z-index: 2;margin-bottom: 20px;height:147px;width:215px;float:left;margin-right:25px}
div#experience div.experience img {display:block;border:10px solid #E9E9E9;}
div#experience div.experience div {border-left:10px solid #E9E9E9;border-right:10px solid #E9E9E9;border-bottom:10px solid #E9E9E9;background-color:#E9E9E9;display:none;position:absolute;left:0px;top:147px;width:195px}
div#experience div.experience:hover {z-index:3}
div#experience div.experience:hover div {display: block;}
div#experience div.experience div h2 {color:#4b4b4d;font-weight:bold;margin-bottom:10px}

div#experience div.experienceFour {width:216px;margin-right: 0px}
div#experience experienceFour div {width:196px}


/*
##############################
Contact Page
##############################
*/
.contact div#map_canvas {float:left;width:696px;height:209px;}

.contact div#content .col2 {margin-bottom: 30px}
.contact div#content .col2 p {margin-bottom:20px}
.contact div#content .col2 label {display:block;float:left;width:455px;margin-bottom:10px;font-weight:bold}
.contact div#content .col2 label.error {width:0px;height:0px;overflow:hidden}
.contact div#content .col2 textarea {float:left;width:443px;height:100px;border:1px solid #E9E9E9;background-color: #E9E9E9;margin-bottom: 10px;padding:5px;font-size:12px;color:inherit}
.contact div#content .col2 input {float:left;width:228px;border:1px solid #E9E9E9;background-color: #E9E9E9;margin-bottom: 10px;padding:5px;font-size:12px;color:inherit}
.contact div#content .col2 input.arrow {background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:70px;padding:4px 0px 4px 25px;color:#5D5D5F;font-size:12px;cursor: default;border:none;text-align: left;float:right}

.contact div#content .col4 p {margin-bottom:10px}
.contact div#content .col4 p a {text-decoration: none;color: #4B4B4D}
.contact div#content .col4 p a:hover {text-decoration: underline;}

/*
##############################
Careers Page
##############################
*/
.careers div#content .col2 {width:696px;margin-right: 0px}
.careers div#content .col2 .job {margin-bottom:20px;padding-top:20px;border-top:1px solid #DDDDDD}
.careers div#content .col2 .firstJob {padding-top:0px;border-top:none}
.careers div#content .col2 h2, .careers div#content .col2 p, .careers div#content .col2 a {width:455px;margin-right:25px;float:left;}
.careers div#content .col2 h2 {margin-bottom:10px}
.careers div#content .col2 p.salary {width:216px;margin-right: 0px;float:right;font-weight: bold}
.careers div#content .col2 a {display:block;text-decoration: none;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:190px;padding:4px 0px 4px 25px;color:#5D5D5F;}
.careers div#content .col2 a:hover {text-decoration: underline}

/*
##############################
News Page
##############################
*/
.news div#content .col1 {border-top:1px solid #DDD;}
.news div#content .col1 h3 {margin:10px 0px;font-weight: bold}
.news div#content .col1 ul li {display:block;float:left;border-bottom:1px solid #DDD;width:215px}
.news div#content .col1 ul li a {display:block;width:190px;color:#4B4B4D;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;padding:4px 0px 4px 25px;text-decoration:none;margin:3px 0px}
.news div#content .col1 ul li a:hover {text-decoration: underline}

.news div#content .col2 {width:696px;margin-right: 0px}
.news div#content .col2 .article {margin-bottom:20px;padding-top:20px;border-top:1px solid #DDDDDD}
.news div#content .col2 .firstArticle {padding-top:0px;border-top:none}
.news div#content .col2 h2, .news div#content .col2 p, .news div#content .col2 a {width:455px;margin-right:25px;float:left;}
.news div#content .col2 img {display:block;float:left;margin-bottom:10px}
.news div#content .col2 h2 {margin-bottom:10px}
.news div#content .col2 p.date {width:216px;margin-right: 0px;float:right;font-weight: bold}
.news div#content .col2 a {display:block;text-decoration: none;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:190px;padding:4px 0px 4px 25px;color:#5D5D5F;}
.news div#content .col2 a:hover {text-decoration: underline}

.news-detail div#content .col2 a {display:inline;text-decoration: none;background: none;width:auto;padding:0px;color:#5D5D5F;}

/*
##############################
Case Study Pages
##############################
*/

.casestudies div#content .col2 {width:696px;margin-right: 0px}
.casestudies div#content .col2 .article {margin-bottom:20px;padding-top:20px;border-top:1px solid #DDDDDD}
.casestudies div#content .col2 .firstArticle {padding-top:0px;border-top:none}
.casestudies div#content .col2 h2, .casestudies div#content .col2 p, .casestudies div#content .col2 a {width:455px;margin-right:25px;float:left;}
.casestudies div#content .col2 img {display:block;float:left;margin-bottom:10px}
.casestudies div#content .col2 h2 {margin-bottom:10px}
.casestudies div#content .col2 p.date {width:216px;margin-right: 0px;float:right;font-weight: bold}
.casestudies div#content .col2 a {display:block;text-decoration: none;background: url(http://www.graffica.co.uk/images/graffica/framework/arrow.png) no-repeat;width:190px;padding:4px 0px 4px 25px;color:#5D5D5F;}
.casestudies div#content .col2 a:hover {text-decoration: underline}

/*
##############################
Bug Fixes and Tweaks
##############################
*/
.clearfix:after { clear:both; content:"."; display:block; height:0; line-height:0; visibility:hidden;}
.clearfix {display:inline-block;}
html[xmlns] .clearfix {display:block;}
* html .clearfix {height:1%;}
a:focus, a:active {outline: none;}