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

Title : Mediarock Ltd Stylesheet
Author : Darren Lynch / darren.lynch@mediarock.co.uk / Mediarock Ltd
Author : Wes Smith / wes.smith@mediarock.co.uk / Mediarock Ltd

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

/* COMMON AND GLOBAL */
body { font:62.5%/1.6 arial, verdana, helvetica, sans-serif; margin:0; padding:0; background:#bfbdbc url(../images/layup/bodyBg.gif) top left repeat-x; color:#000000; text-align:center; }
td, textarea, input, select { font:100% arial, verdana, helvetica, sans-serif; }
body, html {width:100%;}

/* ----- IDS ----- */
#outterContainer { position:relative; min-width:960px;}
#container { width:960px; height:750px; position:relative; background:url(../images/layup/containerBg.jpg) top left no-repeat; margin:0 auto; text-align:left; font-size:120%; }   
#printHeader { display:none;}
#orangeDude { position:absolute; top:0px; right:0px;}
#callOrClick { position:absolute; left:240px; top:666px;}
#container #page { width:547px; height:620px; background:#FFFFFF; position:absolute; left:230px; top:23px;}
#container #page .padding { padding:0 13px 0 14px;}
#container #page #header { height:82px; background:url(../images/layup/dotsH.gif) bottom left repeat-x; position:relative;}
#container #page #header #logo { width:247px; height:60px; position:absolute; top:12px; left:0px; background:url(../images/layup/logo.gif) top left no-repeat;}
#container #page #header #logo a { width:247px; height:60px; display:block;}
#container #page #header #logo span { display:none;}
#container #page #header #email { width:137px; height:13px; position:absolute; top:31px; left:380px;}
#container #page #header #telephone { width:180px; height:13px; position:absolute; top:49px; left:338px;}
#container #page #content { line-height:120%;}
#container #page #content .padding { padding:15px 0px 10px 0px;}
#container #page #content ul { margin:0; padding:0; list-style:none; line-height:120%;}
#container #page #content ul li { padding:0 0 5px 25px;}
#container #page #content ul li ul { margin-top:5px;}
#container #page #content #tab-container-1 ul { margin:0; padding:0; list-style:none;}
#container #page #content #tab-container-1 ul li { padding:0;}
#container #page #content .bulletOrange { background:url(../images/layup/bulletOrange.gif) 0px 2px no-repeat;}
#container #page #content .bulletGrey { background:url(../images/layup/bulletGrey.gif) 0px 2px no-repeat;}
#container #page #content .bulletModx { background:url(../images/layup/modx.gif) 0px 10px no-repeat; padding-left:135px; padding-bottom:15px;}
#container #page #content .bulletMagento { background:url(../images/layup/magento.gif) 4px 7px no-repeat; padding-left:135px;}
#container #page #content #homeLeftCol { width:285px; float:left; padding-right:60px;}
#container #page #content #homeRightCol { width:175px; float:left;}
#container #page #content #ourRecentWork {background:url(../images/layup/dotsH.gif) bottom left repeat-x; margin:22px 0 0 0;}
#container #page #content #ourRecentWork img {}
#container #page #content #ourRecentWork .middle { margin:0 27px;}
#container #page #content #testimonials { padding:12px 0;}
#container #page #content #testimonials .testimonial { background:url(../images/layup/quoteLeft.gif) 0px 3px no-repeat; padding-left:17px;}
#container #page #content #testimonials .testimonial.paddingRight { padding:0 100px 5px 17px;}
#container #page #footer { color:#666666; position:absolute; bottom:-5px; left:13px; width:520px; font-size:90%; padding-top:4px; background:url(../images/layup/dotsH.gif) top left repeat-x; font-size:90%;}
#container #page #footer a { color:#666666; font-weight:normal; text-decoration:none;}
#container #page #footer a:hover { text-decoration:underline;}
#container #page #content #termsList ul { margin:0; padding:0; list-style:none;}
#container #page #content #termsList ul li { padding:0 0 0 25px; margin:0;}
#container #page #content #termsList .bulletOrange { background:url(../images/layup/bulletOrange.gif) 0px 3px no-repeat; font-size:90% !important; padding:0 0 1px 25px;}
#container #page #content #termsList .bulletGrey { background:url(../images/layup/bulletGrey.gif) 0px 3px no-repeat; font-size:90% !important; padding:0 0 1px 25px;}
#container #page #content .teamMember { width:520px; position:relative; min-height:110px;}
#container #page #content .teamMember .padding { padding:10px 10px 10px 110px;}
#container #page #content .teamMember .pic { position:absolute; top:10px; left:0;}

/* ----- HOMEPAGE IMAGE SLIDER ----- */
#gallery_container { width:520px !important; height:84px; margin:0 0 15px 0; padding:0; background:#EDEDEC; position:relative; }
#thumb_container { width:440px !important; height:64px; margin:0; padding:3px; position:relative; overflow:hidden; top:8px; left:40px; }
#thumbs { width:447px; height:64px; margin:0 !important; padding:0 !important; white-space:nowrap; }
#thumbs ul { width:447px; height:64px; margin:0; padding:0; list-style:none; }
#thumbs ul li { width:138px !important; height:64px; margin:0 8px 0 0 !important; padding:0 !important; display:inline; border:none !important;  }
#thumbs ul li img { width:138px !important; height:64px; margin:0 !important; padding:0 !important; display:inline; }
.addbkwd { margin:0 0 0 10px; padding:0 0 0 0; display:block; position:absolute; cursor:pointer; width:20px; height:64px; top:10px; left:0px; background:url(../images/layup/left_Arrow.gif) no-repeat #EDEDEC;  }
.addfwd { margin:0 10px 0 0; padding:0 0 0 0; display:block; position:absolute; cursor:pointer; width:20px; height:64px; top:10px; right:0px; background:url(../images/layup/right_Arrow.gif) no-repeat #EDEDEC;  }

/* ----- SERVICES BULLETS ----- */
#servicesNav ul { list-style:none; margin:0; padding:0;}
#servicesNav li { display:block; padding:0 !important; margin:0 0 1px 0;}
#servicesNav li a {  background: url(../images/layup/bulletServices.gif) repeat-x; margin:0; padding:5px 0 2px 7px !important; height:18px; display:block; font-weight:bold; font-size:100%; text-decoration:none; width:513px; color:#333333;}
#servicesNav li a:hover { text-decoration:none; background:url(../images/layup/bulletServicesHover.gif) repeat-x; }
#servicesNav .more { font-weight:normal; font-size:11px; }

/* ----- CLASSES ----- */
.clear { clear:both; }
.hide { display:none; }
.show { display:block; }
.printShow { display:none; }
.float_left { float:left !important; }
.float_right { float:right !important; }
.align_left { text-align:left !important; }
.align_center { text-align:center !important; }
.align_right { text-align:right !important; }
.align_justify { text-align:justify !important; }
.align_bottom { vertical-align:bottom !important; }
.image_right { float:right; padding:0 0 10px 10px; }
.image_left { float:left; padding:0 15px 15px 0; }
.image_center { margin:0 auto;}
.relative { position:relative; }
.inline {display:inline;}
.hand { cursor:pointer;}
.title { color:#008bc0; font-size:130%; font-weight:normal;}
.orangeText { color:#008bc0;}
.divider { height:20px; line-height:10px; font-size:10px; background:url(../images/layup/dotsH.gif) 0px 5px repeat-x;}
.more { padding:0 0 5px 0;}
.testimonial { background:url(../images/layup/quoteLeft.gif) 0px 3px no-repeat; padding-left:17px;}
.smallerText { font-size:90%; line-height:15px !important;}

/* ----- HEADINGS & PARAGRAPHS ----- */
h1, h2, h3, h4, h5, h6 { margin:0; padding:0 0 10px 0; font-size:100%; font-weight:normal;}

/* ----- TOP NAVIGATION ----- */
#topNav {position:absolute; left:203px; top:23px; width:27px;}
#topNav ul { margin:0; padding:0; list-style:none;}
#topNav li { display:block; width:27px; margin-bottom:3px; float:left;}
#topNav a { display:block; width:27px;}
#topNav a span { display:none;}
#topNav a.home { background:url(../images/layup/topNavHome.gif) 0px 0px no-repeat; height:58px;}
#topNav a:hover.home { background:url(../images/layup/topNavHome.gif) -27px 0px no-repeat; height:58px;}
#topNav .active a.home { background:url(../images/layup/topNavHome.gif) -27px 0px no-repeat; height:58px;}
#topNav a.theTeam { background:url(../images/layup/topNavTheTeam.gif) 0px 0px no-repeat; height:74px;}
#topNav a:hover.theTeam { background:url(../images/layup/topNavTheTeam.gif) -27px 0px no-repeat; height:74px;}
#topNav .active a.theTeam { background:url(../images/layup/topNavTheTeam.gif) -27px 0px no-repeat; height:74px;}
#topNav a.services { background:url(../images/layup/topNavServices.gif) 0px 0px no-repeat; height:73px;}
#topNav a:hover.services { background:url(../images/layup/topNavServices.gif) -27px 0px no-repeat; height:73px;}
#topNav .active a.services { background:url(../images/layup/topNavServices.gif) -27px 0px no-repeat; height:73px;}
#topNav a.portfolio { background:url(../images/layup/topNavPortfolio.gif) 0px 0px no-repeat; height:80px;}
#topNav a:hover.portfolio { background:url(../images/layup/topNavPortfolio.gif) -27px 0px no-repeat; height:80px;}
#topNav .active a.portfolio { background:url(../images/layup/topNavPortfolio.gif) -27px 0px no-repeat; height:80px;}
#topNav a.contact { background:url(../images/layup/topNavContact.gif) 0px 0px no-repeat; height:67px;}
#topNav a:hover.contact { background:url(../images/layup/topNavContact.gif) -27px 0px no-repeat; height:67px;}
#topNav .active a.contact { background:url(../images/layup/topNavContact.gif) -27px 0px no-repeat; height:67px;}
#topNav a.testimonials { background:url(../images/layup/topNavTestimonials.gif) 0px 0px no-repeat; height:100px;}
#topNav a:hover.testimonials { background:url(../images/layup/topNavTestimonials.gif) -27px 0px no-repeat; height:100px;}
#topNav .active a.testimonials { background:url(../images/layup/topNavTestimonials.gif) -27px 0px no-repeat; height:100px;}

/* ----- TOP NAVIGATION 2 ----- */
#topNav2 {position:absolute; left:777px; top:23px; width:27px;}
#topNav2 ul { margin:0; padding:0; list-style:none;}
#topNav2 li { display:block; width:27px; margin-bottom:3px; float:left;}
#topNav2 a { display:block; width:27px;}
#topNav2 a span { display:none;}
#topNav2 a.openSourceWebDesign { background:url(../images/layup/topNavOpenSourceWebDesign.gif) 0px 0px no-repeat; height:195px;}
#topNav2 a:hover.openSourceWebDesign { background:url(../images/layup/topNavOpenSourceWebDesign.gif) -28px 0px no-repeat; height:195px;}
#topNav2 .active a.openSourceWebDesign { background:url(../images/layup/topNavOpenSourceWebDesign.gif) -28px 0px no-repeat; height:195px;}


/* ----- TABBED NAVIGATION ----- */
#tab-container-1 { padding:10px 0 0 0;}
#tab-container-1 .tab { position:relative; margin:0; padding:10px 15px 10px 10px; border-top:1px solid #727272; clear:both;}
#tab-container-1 .title { color:#008bc0; font-size:120%; font-weight:normal; margin-top:8px;}
#tab-container-1 .right { position:absolute; top:-1px; right:-10px; width:10px; height:144px; background:url(../images/layup/tabBgRight.gif) no-repeat;}
#tab-container-1 .left { position:absolute; top:-1px; left:-9px; width:10px; height:144px; background:url(../images/layup/tabBgLeft.gif) no-repeat;}
#tab-container-1 .testimonial { background:url(../images/layup/quoteLeft.gif) 0px 3px no-repeat; padding-left:17px;}
#tab-container-1-nav { padding:0; margin:0;}
#tab-container-1-nav li {list-style:none; display:block; float:left; padding:0; margin:0;}
#tab-container-1-nav li a {list-style:none; display:block; float:left; padding:5px 6px; margin:0 1px 0 0; background:#9a9999; font-weight:normal; color:#FFFFFF; text-decoration:none; outline:none; font-size:12px;}
#tab-container-1-nav li a:hover { background:#eb914d;}
#tab-container-1-nav li a.active { background:#eb914d;}

/* ----- SITE MAP ----- */
#sitemap { list-style:none; margin:0 0 0 5px; padding:0;}
#sitemap ul { list-style:none;  margin:10px 0 0px 15px; padding:0;}
#sitemap li { background:url(../images/layup/bulletSitemap.gif) 0px 11px no-repeat; padding:6px 0 5px 15px;}

/* ----- GLOBAL ----- */
img { display:block; border:0; }
p { padding:0 0 10px 0; margin:0; line-height:16px !important; }
address { font-style:normal;}

/* ----- LINKS ----- */
a { color:#000000; font-weight:bold; text-decoration:underline; outline:none; }
a:hover { text-decoration:none; }
a:focus, a:hover, a:active { outline:none }

/* ----- FORMS ----- */
form { padding:0; margin:0; }
fieldset { padding:0; margin:0; border:0px none; display:inline; }
legend { padding:0; margin:0; display:none; }
label { display:block; width:175px; float:left; }
input, textarea { width:200px; font-size:11px !important;}
.required { color:#008bc0;}
.checkRadio { width:20px; position:relative; left:-7px;}
#frmContact {}
#frmContact p { padding:7px 0;}
#frmContact select { width:204px;}
#frmContact div { margin-bottom:10px;}
#submit { width:55px; height:18px; border:none;}

/* ----- FORM VALIDATION ----- */
input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; }
input.validation-failed, textarea.validation-failed, select.validation-failed { border: 1px solid #d33636; color : #FF3300; }
input.validation-passed, textarea.validation-passed, select.validation-passed { border: 1px solid #00CC00; color : #000; }
.validation-advice { margin: 5px 0; width:367px; padding: 5px; background-color: #f7964d; color : #FFF; font-weight: bold; }

/* ----- TABLES ----- */
table { border-collapse:collapse; }
table p { padding:0px; }

/* ----- HOMEPAGE CAROUSEL ----- */
ul.revolver a { cursor:default;}
ul.revolver { list-style-type:none;}
.revolver, .revolver ul { width : 520px; height : 125px; position : relative; overflow : hidden; margin:0; padding:0; }
.revolver div, .revolver li { position:absolute; width:140px; height:80px; padding:0px !important; }
.revolver img { width:100%;	height:100%; border:0;}