body { margin:0; padding:0; font-size: 62.5%; text-align:center; font-family: helvetica, arial, sans-serif; color:#000; background: url(images/background.jpg) repeat-x top;}

/* =TEXT & HEADINGS
orange: #E66E08 red: #DD1346 turquoise: #1b999c purple: #521891 blue: #193c8c green: #306928
darker colours
orange: #944a0c red: #971f3d turquoise: #055456 purple: #2e0956 blue: #021d5b green: #0c3f05
---------------------------------------------------*/
p { margin: 0; padding: 0;  font-size: 14px; line-height: 19px; color:#666;}
p strong{color:#000;}
a { margin: 0; padding: 0; text-decoration:none; color: #000;}
a:hover{ text-decoration:underline; }
h2 {color:#1b999c; font-size:26px; font-weight:normal; margin:0; padding:4px 0 4px 0;}
h2 a{color:#1b999c;}
body#home #rightColumn h2.projects{margin:0 0 0 20px;}
body#about h2 {color:#193c8c;}
body#about h2 a{color:#193c8c;}
body#services h2 {color:#326b29;padding:0 0 0 30px;}
body#services h2.spade {background:url(images/green-spade.gif) 0px 0px no-repeat;}
body#services h2.club {background:url(images/green-club.gif) 0px 0px no-repeat;}
body#services h2.heart {background:url(images/green-heart.gif) 0px 0px no-repeat;}
body#services h2.diamond {background:url(images/green-diamond.gif) 0px 0px no-repeat;}
body#services h2 a {color:#326b29;}
h3 {color:#999; font-size:18px; font-weight:normal; margin:0; padding:2px 0 0 30px; line-height:20px; background:url(images/grey-dash.gif) 8px 9px no-repeat}
h3 a {color:#999;}
img {border-style:none;}
img a {border-style:none;}
.url{color:#1b999c;}
a.underline{text-decoration:underline;}


/* CONTAINERS  ---------------------------------------------------*/
#content { position: relative; width:768px; margin:0 auto; padding:7px 0 0 0; text-align:left; }
	
/* TOP CONTAINERS---------------------------------------------------*/
#header.home { width:768px; height:166px;background:url(images/abstract-turquoise.jpg) no-repeat top #055456;}
#header.about { width:768px; height:166px;background: url(images/abstract-blue.jpg) no-repeat top #021d5b; }
#header.services { width:768px; height:166px; background: url(images/abstract-green.jpg) no-repeat top #0c3f05; }	
#header.portfolio { width:768px; height:166px;background: url(images/abstract-red.jpg) no-repeat top #971f3d; }		
#header.showreel { width:768px; height:166px;background: url(images/abstract-purple.jpg) no-repeat top #2e0956; }	
#header.contact { width:768px; height:166px;background: url(images/abstract-orange.jpg) no-repeat top #944a0c; }
	
.logo {float:left; margin: 0; padding: 10px 0 0 40px; width:355px; height: 60px;}
	
#heading {float:left; width:728px; padding:20px 0 0 40px; margin:0;}
h1 {padding:3px 0 0 0; margin:0; color:#FFF; font-weight: normal;}
#heading h1.mainheading  {font-size: 32px;line-height:24px;}
#heading h1.mainheading .sub  {font-size: 16px; line-height:40px;}
h1 a{text-decoration:underline; color:#FFF;}
	
/* MID CONTENT---------------------------------------------------*/
#midtop {float:left; width:768px; height:19px; padding:0; margin:0; background: url(images/background_top.gif) no-repeat; }
#mid {float:left; width:768px; height:auto; padding:0; margin:0; background: url(images/content_background.gif) repeat-y; }
#midPortfolio{float:left; width:768px; padding:0; margin:0; background: url(images/content_background.gif) repeat-y; }
#midPortfolio a {color:#DD1346;}
#portfolioNav {padding:5px 0 40px 35px;}
.portfolio {float:left; padding:0;}
#portfolioIntro {padding:10px 0 10px 38px; width:500px;}
#portfolioIntro p{font-size: 1.3em;line-height: 18px;}
	
#showreelHolder{padding:20px 0 20px 0;text-align:center;}
	
#mid p {padding:5px 0 5px 0;}
#midPortfolio p {padding:5px 0 5px 0;}
#midPortfolio h2 {padding:13px 0 5px 40px; color:#DD1346;}
#leftColumn {position: relative; float:left; width:330px; height:510px; padding:10px 10px 0 40px;}
	
#mid ul {padding:0; margin:3px 0 0 10px; font-size:14px; line-height:18px}
body#services #mid ul {margin:6px 0 2px 10px;}
body#services #mid li { list-style:none; padding:0 0 0 20px; margin:3px 0 0 0;color:#666;background:url(images/grey-dash.gif) 0px 5px no-repeat;}
#rightColumn {position: relative; float:left; width:350px; height:510px; padding:10px 0 0 20px;}
body#home #rightColumn{padding:10px 0 0 0;}
	
#contactUs h2{color:#E66E08;}
/*#contactUs #mid a{color: #E66E08;}*/
#about #rightColumn {background: url(images/blue-background.jpg) no-repeat top;}
	
/* BUTTON---------------------------------------------------*/
.projectRow {float:left; width:694px; margin:5px 0 15px 36px;border-bottom:1px solid #FFF;}

.projectRow p strong{padding-left:18px; margin:0 0 5px 0; background:url('images/up-arrow.gif') left 4px no-repeat;}
.projectRow a {font-weight: bold; color:#bb0d0e; url(images/portfolio/bullet.gif) no-repeat;}

/* BUTTON---------------------------------------------------*/
div.button {position: absolute; left:30px 0px; bottom:12px; width:330px; height:30px;}
body#home #rightColumn div.button {margin-left:20px;}
.button a { font-size: 14px; color:#FFF; padding:0 0 0 30px; display:block; width:300px; height:20px; background: url(images/turquoise-button.gif) no-repeat;}
.button p {line-height:18px;padding:1px 0 0 0;}
.aboutButton a { background: url(images/blue-button.gif) no-repeat;}
.servicesButton a { background: url(images/green-button.gif) no-repeat;}
.contactButton a { background: url(images/orange-button.gif) no-repeat;}
	
/* FOOTER---------------------------------------------------*/
#footer {float:left; width:768px; height:66px; padding:0; margin:0 0 10px 0; background: url(images/footer_background.gif) no-repeat; }

#footer ul {margin:0 0 0 18px; padding:12px 0 0 0; list-style:none; font-size:14px; font-weight: bold;line-height:15px;}
#footer ul li { display:block;height: auto;float:left;padding:3px 0 2px 22px}
#footer ul li.twitter { }
#footer ul li.twitter a{display:block; width:145px; padding-left:22px; background: url(images/twitter.gif) no-repeat 0 1px;}

#footer a {color:#000;}
#copyright {clear:both;}
#copyright p {padding: 3px 0 0 39px; font-size: 11px; font-weight: normal; color:#999;line-height: 13px;margin:0;}
#copyright a {color:#999;}
.divider {color:#CCC;}
	
/* NAVIGATION---------------------------------------------------*/
.nav { float:left; margin: 0; padding: 22px 0 0 0;  width:360px; height: auto;}
.nav  ul { margin:0; padding:0; list-style:none; font-size:14px; float:left;}
.nav ul li a { display:block; padding: 0 0 0 28px; color:#FFF; width: 70px; height: 20px;}
.nav ul li#n1 a { background: url(images/nav_highlight.gif) no-repeat left 0;}
	
/* =CONTACT ---------------------------------------------------*/

#contactUs #rightColumn {background: url(images/orange-background.jpg) no-repeat bottom;} 
#contactUs #form {width:100%; height:auto; margin:0;}
#contactUs #form p{margin:0;padding:0;}
#contactUs label {float:left; font-size:14px;display:block; font-weight:bold; width:100%; margin:13px 0 1px 0; padding:0;}
#contactUs input {font-family: helvetica, arial, sans-serif; color:#000;padding:0 0 0 5px;border:solid 1px #666;width:323px;margin:0; height:20px;font-size: 14px;}
#contactUs textarea {font-family: helvetica, arial, sans-serif; color:#000;height:140px; float:left;padding:0 0 0 5px; border:solid 1px #666;width:321px;margin:0 0 12px 0; font-size: 14px;}
#contactUs #submit {font-size: 14px; width:326px; height:18px; color:#FFF; border: 0px; padding:0; margin:0; background: url(images/submit-button.gif) center center no-repeat #CCC;}
#contactUs #submit:hover { cursor: pointer; }
.green {background:#306928; clear:both; margin:2px 0 2px 0; padding:0; width:100%;}
.green p {color:#FFF; margin:0; padding:0; font-weight:bold; text-align:center;}
.red {background:#C00; clear:both; margin:1px 0 1px 0; padding:0; width:100%;}
.red p {color:#fff; margin:0; padding:0; font-weight:bold; text-align:center;}

/* Slideshow style rules. --------------------------*/
#slideshow { width:366px; height:420px; position:relative; text-align:left;}
#slideshow #slidesContainer { margin:0 auto; width:326px; height:420px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:366px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:420px;
}
/*Slideshow controls style rules. ----------------*/
.control {display:block;width:20px;height:420px;text-indent:-10000px; position:absolute;cursor: pointer;}
#leftControl {top:0;left:0;background:url(images/left-arrow.gif) no-repeat 2px 80px;}
#leftControl:hover {top:0;left:0;background:url(images/left-arrow-over.gif) no-repeat 2px 80px;}
#rightControl {top:0;right:0;background:url(images/right-arrow.gif) no-repeat 2px 80px;}
#rightControl:hover {top:0;right:0;background:url(images/right-arrow-over.gif) no-repeat 2px 80px;}
.slide h2 {font-size: 14px;font-weight:bold;padding:0; margin:15px 0 0 0;color:#000;}
.slide p {margin:0;padding:0;text-align:left;color:#666; width:326px;clear:both;}
.slide a {font-weight:bold;}
a.portfolio { padding:0 0 0 20px; background:url(images/grey-dash.gif) 0px 7px no-repeat;}
.slide a.url {color:#1b999c;} 
.slide img {margin:5px 0; }