/* Main Styles for 5A Studios website */

/* START: generic styles */
html, body {
	height: 100%;
}
body {
	padding: 0;
	margin: 0;
	font-size: 62%;
	background: url(/css/f/backg_outer2.gif) 0 0 repeat;
}
body * {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-smooth: always;
}
strong, strong * {
	font-weight: bold;
}
em {
	padding-right: 2px;
}

body,
input,
textarea {
	font-family: Tahoma, Verdana, Arial, Helvetica;
}
form {
	margin: 0;
}
img {
	display: block;
	border: 0;
}
a {
	text-decoration: underline;
	cursor: pointer;
}
ul.nostyle {
	list-style: none;
	margin: 0;
	padding: 0;
}

a.more {
	float: left;
	font-weight: bold;
}

#preload {
	position: absolute;
	left: -8000px;
}

#disclaimer {
	float: left;
	background: #fff;
	color: #6B6B6B;
	font-size: 0.9em;
	padding: 0 15px;
}
#disclaimer p {
	border-top: 1px solid #bbbbbb;
	padding: 6px 0 10px 0;
}

/* END: generic styles */

/* START: main site area */
#main {
	margin: 0 auto;
	width: 960px;
	height: 100%;
}
#main-inner {
	position: relative;
	width: 930px;
	min-height: 100%;
	padding-bottom: 1px; /* add 1px padding to force scrollbar on short pages */
	float: left;
	border: solid #c5deca;
	border-width: 0 15px;
	background: url(/css/f/backg_inner2.gif) 0 0 #3c6143 repeat-y;
}
#main-inner2 {
	padding: 20px 18px;
	width: 894px;
	float: left;
}
/* END: main site area */

/* START: banner */
#banner {
	min-height: 100px;
	background: url(/css/f/logo_sm.gif) 35px 0 no-repeat;
	color: #9beb29;
}
#banner .text {
	text-shadow: 0px 0px 4px #113311;
	margin-left: 179px;
	padding: 5px 0 1.5em 0;
	width: 730px !important;
}
#banner .text strong {
	font-weight: normal;
	color: #c7ff78;
}

#main-heading {
	padding: 2px 0 0.5em 0;
	font-size: 2.25em;
	line-height: 1.2;
}
#banner h1 {
	position: absolute;
	left: -5000px;
}
#banner .text p {
	color: #e5ffc2;
	font-size: 1.5em;
	line-height: 1.22;
}
/* END: banner */

/* START: main columns */
div#columns {
	width: 894px;
	float: left;
}
.col2 div#columns {
	background: url(/css/f/2col_bg.gif) 162px 0 repeat-y; /* image needs to be modified and moved back to 160px */
}

#column-left {
	float: left;
	width: 150px;
	padding-top: 35px;
}
#column-middle {
	float: left;
	width: 732px;
	margin: 0 0 0 12px;
}
.col2 #column-middle {
	margin: 0 12px;
	width: 540px;
}

#column-right {
	float: left;
	width: 180px;
}
/* END: main columns */

/* START: footer container */
#footer-container {
	clear: left;
	width: 732px;
	margin-left: 162px;
	margin-bottom: 5em;
	background: url(/css/f/footer_bg.gif) repeat-y;
}
body#home #footer-container {
	background: none;
	width: 510px;
	margin-left: 0;
}
/* END: footer container */

/* START: Company info */
#company-info {
	position: absolute;
	bottom: 0;
	left: 0px;
	float: left;
	width: 910px;
	background: #28422d;
	color: #aebab1;
	text-align: center;
	padding: 3px 10px 4px;
	font-size: 1.05em;
	clear: both;
	border: solid #142117;
	border-width: 1px 0 0 0;
}
/* END: Company info */

/* START: navigation */
#nav {
	margin: 0 0 20px 0;
	list-style: none;
	font-size: 1.6em;
}
#nav li {
	margin-bottom: 1px;
}
#nav li a {
	padding: 6px 5px 8px 9px;
	display: block;
	background: #252525;
	color: #ffffff;
	text-decoration: none;
}
#nav li.on a {
	background: #9beb29;
	color: #252525;
}
#nav li a:hover {
	background: #ffffff;
	color: #252525;
}
/* END: navigation */

/* START: text content */
.text {
	clear: left;
	padding: 15px;
}

.text h2 {
	margin: 4px 0 13px 0;
	font-size: 1.6em;
}
.text p {
	margin: 0 0 13px 0;
	font-size: 1.4em;
}
.text ul li {
	font-size: 1.4em;
	margin-bottom: 0.1em;
}

/*END: text content */

/* START: promos */
.promo {
	margin-bottom: 10px;
	float: left;
}
.promo a.more {
	padding-left: 12px;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: 0 1px;
	font-size: 1.1em;
}
.promo.strong {
	background: #ffffff;
	color: #252525;
}
.promo.strong a.more {
	color: #252525;
	background-image: url(/css/f/link_arrow_strong.gif);
}

.promo.light {
	background: #757868;
	color: #ffffff;
}
.promo.light a.more {
	color: #ffffff;
	background-image: url(/css/f/link_arrow_light.gif);
}

.promo.small {
	padding: 10px;

}
.promo.small h3 {
	font-size: 1.1em;
	font-weight: bold;
}
.promo.small p {
	margin-top: 8px;
	font-size: 1.1em;
}
.promo.small a.more {
	margin-top: 8px;
}

.promo.large.strong {
	padding: 1px 1px 16px 1px;
}
.promo.large.strong img{
	margin-bottom: 13px;
}
.promo.large.strong h3 {
	margin: 9px 9px 0 10px;
	font-size: 1.6em;
	font-weight: normal;
}
.promo.large.strong p {
	margin: 8px 9px 0 9px;
	font-size: 1.2em;
}
.promo.large.strong a.more {
	margin: 11px 9px 0 9px;
}

.promo.large.light {
	padding: 10px 10px 16px 10px;
}
.promo.large.light img{
	border: 1px solid #ffffff;
	margin-bottom: 9px;
}
.promo.large.light h3 {
	margin: 0 0 0 1px;
	font-size: 1.4em;
	font-weight: normal;
}
.promo.large.light p {
	margin: 7px 0 0 0;
	font-size: 1.1em;
}
.promo.large.light a.more {
	margin: 11px 0 0 0;
}
/* END: promos */

/* START: panels */
ul#panel-nav {
	list-style: none;
	float: left;
}
ul#panel-nav li {
	float: left;
}
ul#panel-nav li a {
	float: left;
	background: #959d73;
	color: #ffffff;
	padding: 5px 20px 3px;
	margin-right: 2px;
	font-size: 1.8em;
	min-height: 27px;
	text-decoration: none;
}
ul#panel-nav li a:hover {
	background: #252525;
	color: #ffffff;
}
ul#panel-nav li.on a {
	background: #ffffff;
	color: #252525;
	cursor: default;
}

#panels {
	clear: left;
}

.js #panels .panel {
	display: none;
}
.js #panels .panel.on {
	display: block;
}

.panel {
	background: #ffffff;
	color: #6b6b6b;
	float: left;
}
.panel .text a {
	/*color: #1b6b3b;*/
	color: #3BAB3B;
	text-decoration: none;
	font-weight: bold;
}
.panel .text a:hover {
	text-decoration: underline;
}
.mediapanel {
	float: left;
	margin: 10px 10px 0 10px;
	border: 3px solid #ffffff;
	width: 514px;
	height: 288px;
	position: relative;
}
.mediapanel .infopanel,
.mediapanel .info {
	position: absolute;
	color: #fff;
	bottom: 0;
	left: 0;
	width: 514px;
	height: 74px;
}
.mediapanel .infopanel {
	background: #000;
	opacity: 0.6;
	filter: alpha(opacity = 60); /* for IE */
}

.mediapanel p {
	font-size: 1.3em;
	padding: 3px 10px 0 10px;
}
.mediapanel .title {
	font-size: 1.6em;
	font-weight: bold;
	color: #dec;
	padding: 8px 10px 0 10px;
}
.mediapanel .description {
	padding-top: 2px;
}
.mediapanel .services {
	padding-top: 1px;
	color: #dec;
}
.mediapanel.video a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 514px;
	height: 288px;
	cursor: pointer;
	background: url(/css/f/play_button.png) 203px 90px no-repeat transparent;
}



.panel img.large {
	border: 3px solid #ffffff;
}

.panel .text {
	float: left;
}
.panel .text img {
	display: block;
	margin: 2px 0 10px 0;
}
.panel .text img.left {
	float: left;
	margin-right: 10px;
}
.panel .text img.right {
	float: right;
	margin-left: 10px;
}
/* END: panels */

/* START: footer */
#footer {
	width: 700px;
	background: #252525;
	color: #9beb29;
	font-size: 1.6em;
	padding: 3px 15px 4px 15px;
	/* disabled for now -webkit-text-size-adjust: none;*/
}
.col2 #footer {
	width: 510px;
}
#footer a {
	color: #9beb29;
}
/* END: footer */


/* START: content pages */
#column-middle h1 {
	background: #9beb29;
	padding: 6px 16px 3px 16px;
	font-size: 1.8em;
	min-height: 26px;
}
#content {
	background: #757868;
	color: #ffffff;
	float: left;
}

#column-right {
	border-top: 35px solid #9beb29;
}
#column-right .text {
	color: #ffffff;
	padding: 7px 10px 10px 10px;
}
#column-right .text h2 {
	margin-top: 0;
}

ul.promo-list {
	padding: 0px 0px 10px 0px;
	color: #ffffff;
	float: left;
}
ul.promo-list li {
	padding: 15px 7px 15px 10px;
	margin-bottom: 10px;
	background: #959888;
	float: left;
	width: 163px;
}
ul.promo-list img {
	border: 1px solid #ffffff;
}
ul.promo-list a {
	display: block;
	width: 158px;
}

ul.promo-list a.more,
ul.promo-list a.back {
	margin: 6px 0 2px 1px;
	color: #ffffff;
	font-size: 1.6em;
	font-weight: normal;
	background: url(/css/f/link_arrow_large.gif) 0 center no-repeat;
	padding-left: 13px;
}
ul.promo-list a.back {
	margin-top: 0;
}
ul.promo-list p {
	clear: left;
	font-size: 1.4em;
	margin: 0 0 0 1px;
}


/* START: recommendations */
.recommendations {
	background: transparent !important;
}

.recommendations .item {
	background: #fff;
}
.recommendations .item .info strong {
	display: block;
	font-size: 105%;
}

.recommendations a.next {
	float: right;
	background-position: right 1px;
	padding: 0 12px 0 0;
}
/* END: recommendations */

/* START: carousel */
.carousel {
	float: left;
	height: 96px;
}
.carousel .scrollable {
	position:relative;
	overflow: hidden;
	float: left;
	width: 446px;
	height: 96px;
	background: #515348;
}
.carousel ul.items {
	width: 20000em;
	position: absolute;
	list-style: none;
	margin-left: -127px;
}
.carousel ul.items li {
	float: left;
	width: 141px;
	height: 96px;
	cursor: pointer;
}
.carousel ul.items li img {
	margin: 10px 3px 3px 3px;
}
.carousel ul.items li p {
	color: #c8c8c8;
	font-size: 1.2em;
	padding: 2px 2px 0 4px;
}

.carousel ul.items li.active {
	background: url(/css/f/carousel_active_bg.gif) 0 0 no-repeat #ffffff;
}
.carousel ul.items li.active p {
	color: #252525;
}

.carousel a.arrow {
	width: 47px;
	height: 100%;
	float: left;
	cursor: pointer;
}
.carousel a.arrow.prev {
	background-image: url(/css/f/carousel_arrow_left.gif);
	background-position: 15px 16px;
	background-repeat: no-repeat;
}
.carousel a.arrow.prev:hover{
	background-image: url(/css/f/carousel_arrow_left_on.gif);
}
.carousel a.arrow.next {
	background-position: 9px 16px;
	background-repeat: no-repeat;
	background-image: url(/css/f/carousel_arrow_right.gif);
}
.carousel a.arrow.next:hover{
	background-image: url(/css/f/carousel_arrow_right_on.gif);
}
/* END: carousel */

/* START: slides */
.js .slides {
	width: 534px;
	height: 339px;
	position: relative;
}
.slides {
	border: 3px solid #ffffff;
}
.slides img {
	display: inline;
}
.slides .nav {
	display: none;
}
.js .slides .nav {
	position: absolute;
	width: 48px;
	height: 55px;
	top: 142px;
	cursor: pointer;
	z-index: 1000;
}
.js .slides .nav.prev {
	left: 0;
	background: url(/css/f/slides_arrow_left.png) 0 0 no-repeat transparent;
}
.js .slides .nav.next {
	right: 0;
	background: url(/css/f/slides_arrow_right.png) 0 0 no-repeat transparent;
}
/* END: slides */

/* START: overlays */
.apple-overlay {
	color: #6b6b6b;
	float: left;
	border-top: 1px solid #cccccc;
}
.js .apple-overlay {
	display: none;
	border: none;
	color: #ded;
	background-image: url(/css/f/overlay_bg_black.png);
	width: 560px;
	padding: 35px 40px 35px 35px;
	-webkit-text-size-adjust: none;
}

.apple-overlay h2 {
	margin: 0 0 2px 0;
	font-size: 1.7em;
}
.apple-overlay p.subtitle {
	margin-bottom: 15px;
}

.apple-overlay img {
	float: right;
	margin: 5px 0 10px 10px; 
	border: 1px solid #ded;
}

.apple-overlay div.close {
	background-image: url(/css/f/btn_overlay_close.png);
	position: absolute;
	right: 5px;
	top: 5px;
	cursor: pointer;
	height: 35px;
	width: 35px;
}
/* END: overlays */


/* END: content pages */


/* --- Page specific styles --- */

/* START: Home page */
body#home #columns {
	background: none;
}

body#home .panel {
	min-height: 600px;
}
body#home #column-right {
	border: none;
	padding-top: 35px;
}
body#home .panel .mediapanel {
	margin: 13px 13px 1px 13px;
	border: none;
}
/* END: Home page */

/* START: Our work */
body#ourwork #contentpanels {
	clear: left;
}
.js body#ourwork #blocks {
	display: none;
}
body#ourwork .block {
	margin-bottom: 10px;
	clear: left;
	float: left;
}
body#ourwork .panel {
	margin: 0 10px;
}
.js body#ourwork .panel {
	min-height: 280px;
}
body#ourwork #disclaimer {
	margin: 0 10px;
}
/* END: Our work */


/* START: About us */
body#about #preload #img1 {
	background-image: url(/css/f/btn_overlay_close.png);
}
body#about #preload #img2 {
	background-image: url(/css/f/overlay_bg_green_grad.png);
}

body#about ul.promo-list a.more {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
}
/* END: About us */


/* START: Get in touch */
body#getintouch #column-right {
	border: none;
	padding-top: 0;
}
body#getintouch #column-right h2 {
	background: #9beb29;
	padding: 8px 16px 3px 16px;
	font-size: 1.6em;
	min-height: 24px;
}
body#getintouch #column-right ul.promo-list a.more {
	margin-bottom: 0;
	padding: 0 0 0 1px;
	background: transparent;
}

body#getintouch #contactForm {
	border-top: 1px solid #cccccc;
	padding-top: 20px;
	margin: 30px 0;
}
body#getintouch #contactForm li {
	clear: left;
	margin-bottom: 12px;
}
body#getintouch #contactForm li label {
	text-align: right;
	float: left;
	width: 180px;
	margin-right: 15px;
	margin-top: 2px;
}
body#getintouch #contactForm li.required label span,
body#getintouch .key-required {
	background: url(/css/f/required.gif) no-repeat 0 2px;
	padding-left: 14px;
}

body#getintouch #contactForm li input,
body#getintouch #contactForm li textarea {
	font-size: 1em;
	background: #f6fff9;
	border: 1px solid #959D73;
}
body#getintouch #contactForm li input {
	padding: 2px 2px 0 3px;
	height: 1.5em;
	width: 270px;
}
body#getintouch #contactForm li textarea {
	height: 11em;
	padding: 0 0 0 3px;
	width: 272px;
}
body#getintouch #contactForm div.submit {
	clear: left;
	text-align: right;
	padding-right: 40px;
}

body#getintouch .key-required {
	font-size: 1.2em;
}

body#getintouch .box {
	background: #f1fff5;
	border: 1px solid #959D73;
	padding: 10px;
}
body#getintouch .box.error {
	color: #cc0000;
}

body#getintouch .address {
	float: left;
	width: 190px;
	margin-top: 2px;
}
body#getintouch .address p.title {
	margin-bottom: 4px;
}

body#getintouch dl {
	font-size: 1.2em;
	float: right;
	width: 300px;
	border: 1px solid #ccc;
	background: #f9f9f9;
	margin: 0 0 15px 0;
	padding: 2px 5px;
}
body#getintouch dt {
	clear: left;
	float: left;
	font-weight: bold;
	margin-right: 8px;
	color: #252525;
}
body#getintouch dd {
	margin-bottom: 5px;
}

body#getintouch dt.underground {
	float: none;
	margin-bottom: 5px;
}
body#getintouch dd.underground {
	margin-bottom: 8px;
}
body#getintouch dd.underground .tube {
	float: left;
	clear: left;
	min-width: 78px;
	padding: 1px 5px 1px 5px;
	margin-right: 5px;
	font-size: 94%;
	color: #fff;
	font-weight: bold;
}
body#getintouch dd.underground .tube.hammersmith {
	background: #E899A8;
	color: #113B92;
}
body#getintouch dd.underground .tube.circle {
	background: #F8D42D;
	color: #113B92;
}
body#getintouch dd.underground .tube.northern {
	background: #000;
}
body#getintouch dd.underground .tube.overground {
	background: #f86c00;
}
body#getintouch dd.underground .tube-info {
	margin-bottom: 6px;
	padding-top: 1px;
}
body#getintouch #map {
	clear: both;
	width: 510px;
	height: 380px;
}
body#getintouch #belowMap {
	margin: 2px 0 20px 0;
	font-size: 1.1em;
	width: 510px;
}
body#getintouch #column-right ul {
	padding-top: 0;
}
/* END: Get in touch */

/* START: error pages */
#error #content .panel {
	min-height: 400px;
}
/* END: error pages */