/*
 *
 * MadeByShape - www.madebyshape.co.uk
 * Copyright (C) 2010 Shape.
 * Author: Jason Mayo (jason@madebyshape.co.uk)
 *
 * 1. Reset Styles
 * 2. Global Styles
 * 3. Link Styles
 * 4. Typography
 * 5. Layout Styles
 * 6. Navigation Styles
 * 7. Content Styles
 * 8. UI Elements
*/

/* *************************************** */
/* 1. Reset Styles */
/* *************************************** */

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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
th{vertical-align:top;text-align:left;font-weight:400;}
input,select,button,textarea{margin:0;}

/* *************************************** */
/* 2. Global Styles */
/* *************************************** */

body {
	background: #FFF url(../images/bg-page.jpg) repeat-y;
	font:12px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	color: #808285;
}

.left { float:left !important; }
.right { float:right !important; }
.last { margin:0 !important; }

.relative {position:relative;}
.absolute {position:absolute; top:0;}

.clear-left {clear:left; float:left;}
.clear-right {clear:right; float:right;}

ol { list-style: decimal; }
ul { list-style-type: disc; margin: 0 0 0 20px; }

/* *************************************** */
/* 3. Link Styles */
/* *************************************** */

a { color: #000; text-decoration: underline; }
a:hover { color: #0845ed; outline: none; }
a:active { outline: none; }

/* *************************************** */
/* 4. Typography */
/* *************************************** */

h1,h2,h3,h4,h5,h6{font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;font-size:24px;font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;line-height:1.3em;}

h1 { color: #FFF; line-height: 1.1em; font-weight: 600; }

h2 {font-size: 20px; color: #58595b; /* border-bottom: 1px solid #c5c5c5; */ float: left; }
h2 a { text-decoration: none; color: #58595b; }

h3 { font-size: 16px; color: #373737; margin-bottom: 10px; font-weight: 400; }
#box-information h3 { margin: 0px; }

h4 { font-size: 14px; color: #343434; border-bottom: 1px solid #c5c5c5; margin-bottom: 5px; padding-bottom: 5px;}
h4 a { text-decoration: none; }

h5 { font-size: 11px; border-top: 1px solid #c5c5c5; float: left; margin-top: 10px; padding-top: 6px; width: 145px; color: #808285; }
h5 a { color: #808285; }

h6 { }

p { margin:0 0 8px 0; }
strong, b { font-weight: bold; }

/* *************************************** */
/* 5. Layout Styles */
/* *************************************** */

#wrapper {
	width: 100%;
	background: url(../images/nav-bg.jpg) no-repeat;
	background-position: 210px 0;
}

#container {
	margin-left: 50px;
	width: 975px;
}

#header, #header-alt, #header-work { position: relative; width: 975px; height: 440px; /* 440 */ margin-bottom: 30px; }
#body-home #header { height: 481px; }
#header-alt { height: 140px; }
#header-work { height: 510px; }
#main, #main-noheader { position: relative; }
#footer { border-top: 1px solid #cacaca; float: left; padding: 8px 0 0 180px; height: 70px; margin-top: 50px; width: 795px; }
#footer p { float: right; width: 251px; font-size: 11px; line-height: 1.3em; }
#logo { position: absolute; width: 975px; z-index: 20; top: 50px; font-size: 11px; }
#logo-line { width: 975px; float:left; font-size: 37px; font-weight: 800; color: #000!important; }
#logo a { text-decoration: none; color: #808285; }  
#logo a:hover { color: #414141; }

/* *************************************** */
/* 6. Navigation Styles */
/* *************************************** */

ul#nav-main { position: absolute; top: 0; left: 160px; list-style: none; margin: 0; z-index: 20; width: 815px; }
ul#nav-main li { float: left; height: 33px; }
ul#nav-main li a { float: left; color: #FFF; padding: 7px 13px; text-decoration: none; background: #232323; }
ul#nav-main li a:hover, ul#nav-main li a.selected,  ul#nav-main li.selected a { background: #414141; border-bottom: 6px solid #de6263; }
ul#nav-main li a:active, ul#nav-main li a:active.nav-end { background: #555555; }
ul#nav-main li a.nav-end { background: none; color: #ababab; }
ul#nav-main li.btn-bold { float:right !important; }
ul#nav-main li.btn-bold a { float:left; background: #de6263; color: #FFF; border-bottom: 6px solid #dd4445; }
ul#nav-main li.btn-bold a:hover { background: #dd4445; border-color:#c12123; }

ul#nav-sub { float:left; list-style: none; margin: 0; font-size: 14px; font-weight: 500; }
ul#nav-sub.absolute { position: absolute; top: 60px; width: 145px;  }
ul#nav-sub.absolute.noheader { top: 530px !important; }
ul#nav-sub li { margin: 0; width: 145px; float: left; margin: 0 0 3px; }
ul#nav-sub li a { border-bottom: 1px solid #cacaca; text-decoration: none; width: 145px; float: left; color: #818181; padding: 0 0 3px;}
ul#nav-sub li a:hover, ul#nav-sub li a.selected, ul#nav-sub li.selected a { color: #0845ed; border-bottom-color: #0845ed; }
ul#nav-sub li a span { float: right; margin-top: 3px; }
ul#nav-sub li a:active { }

ul.nav-onecol { float: left; list-style: none; margin: 0; font-size: 14px; font-weight: 500; }
ul.nav-onecol li { width: 183px; margin: 0 0 3px; float: left; }
ul.nav-onecol li a { border-bottom: 1px solid #cacaca; text-decoration: none; float: left; width: 183px; color: #898989; padding: 0 0 3px;}
ul.nav-onecol li a:hover { color: #676767; }

.title-case { text-transform: capitalize; }

/* *************************************** */
/* 7. Content Styles */
/* *************************************** */

/* Forms */

input, textarea, select {
	font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: 12px;
	border: 1px solid #d6d7de;
	border-top: 1px solid #acadb2;
	padding: 4px;
	color: #545454;
}

input.button { 
color: #4e4e4e !important; text-align: left; width: auto !important; padding: 4px 35px 5px 4px !important; background: #FFF url(../images/ui-button-bg.jpg) repeat-x !important; border: 1px solid #c5c5c5 !important; margin-right: 10px; cursor: pointer;
}

input:hover.button { background: url(../images/ui-button-bg-hover.jpg) !important; }


.form-two { list-style-type: none; margin: 0; padding: 0; }
.form-two li { width: 183px; margin-bottom: 5px; border-bottom: 1px solid #F2F2F2; float:left; padding-bottom: 10px; margin-right: 20px; }
.form-two li.form-two-large { width: 386px; }
.form-two li label { float:left; width: 386px; font-weight: 600; margin-bottom: 5px; }
.form-two li input { width: 175px; }
.form-two li select { width: 180px; }
.form-two li.form-two-large textarea { width: 376px; height: 145px; }

/* Columns */

.column { 
	float: left !important;
	width: 183px;
	margin:0 20px 0 0;
}

.column-wrapper { overflow: hidden; width: 975px; border-top: 1px solid #cacaca; margin: 10px 0 30px 0; padding: 10px 0 0 0;}
.column-left { width: 145px; padding-right: 15px; margin: 0; float: left; }
.column-right { width: 795px; padding-left: 20px; margin: 0; float: left; }

#two { width: 386px; }
#four { width: 795px; }

/* Boxes */

.boxes { overflow: hidden; width: 795px; list-style-type: none; margin: 0; }
.boxes li { float: left; width: 251px; height: 215px; margin: 0 20px 20px 0; padding-bottom: 5px; border-bottom: 1px solid #cacaca; position: relative; }
.boxes li img { margin-bottom: 7px; float: left;  }
.boxes li p { margin: 0; float: left; }

.box-hover {
width: 251px; 
height: 140px;
position: absolute;
top: 29px;
left: 0;
display: none;
background: url(../images/bg-trans-black-50.png);
}

.boxes-oneline, .boxes-onelinemarg { height: 197px !important; margin-bottom: 0px !important; }
.boxes-onelinemarg { margin-bottom: 20px !important; }
.box-noline { border-bottom: 0px !important; height: 165px !important; }

/* Slideshow */


#slideshow { height: 370px; position: absolute; z-index: 10; width: 815px; top: 33px; left: 160px; }

#slideshow-work { height: 470px; position: absolute; z-index: 10; width: 815px; top: 33px; left: 160px; }

#slideshow-blog { position: relative; width: 386px; height: 270px; }

#controls { z-index: 1000; position: absolute; bottom: 20px; right: 20px; display: none; }
#slides-title { z-index: 1000; position: absolute; bottom: 20px; left: 20px; background: url(../images/bg-84-grey.png); height: 22px; width: auto !important; padding: 6px 10px; color: #FFF; display: none; }


/* Box Info */

#box-information { position: absolute; bottom: 0; left: 180px; width: 356px; height: 120px; z-index: 20; background: url(../images/bg-red.png) transparent; padding: 15px; }
#box-information h3 { color: #FFF; position: absolute; bottom: 9px; }

/* Social Media */

ul#social-media { float: left; margin: 0; list-style: none; }
ul#social-media li { float: left; margin: 0 5px 0 0; }

/* Srollable Content */

#scrollable {
position: relative;
left: 160px;
top: 32px;
padding: 0;
background: #000 url(../images/method.jpg) no-repeat;
width: 815px;
height: 3788px;
text-align: center;
}

#scrollable-content { position: relative; width: 815px; height: 3788px; }

.scrollable-box { width: 380px; text-align: left; padding-top: 45px; }
.scrollable-box h2 { border: none; color: #FFF; width: 380px; margin-bottom: 5px; }
.scrollable-box h2 span { float: left; margin-right: 20px;}

#method-research { position: absolute; top: 75px; left: 237px; z-index: 25; }
#method-concepts { position: absolute; top: 905px; left: 237px; z-index: 27; }
#method-development { position: absolute; top: 1905px; left: 237px; z-index: 29; }
#method-delivery { position: absolute; bottom: 630px; left: 237px; z-index: 31;}

/* Pagination */

#pagination { border-top: 1px solid #cacaca; float:left; width: 795px; margin-top: 30px; text-align: right; padding: 10px 0; }
#pagination p { float:right; width: auto !important; margin: 0; }
#pagination strong { width: 24px; height: 22px; background: #000; float:left; text-align: center; color: #FFF; padding-top: 3px; }
#pagination a { width: 24px; height: 22px; background: #555555; float:left; text-align: center; color: #FFF; text-decoration: none; padding-top: 3px; }
#pagination a:hover { background: #000; }
#pagination a:active { background: #696969; }

.pagination-blog { margin-left: 180px; }

/* Backstage */

#backstage { width: 795px; float: left; }
#backstage { list-style: none; margin: 0; padding: 0; float: left; }
#backstage li { position: relative; float:left; width: 149px; height: 139px; margin: 0 10px 20px 0; border-bottom: 1px solid #F2F2F2; background: url(../images/calendar-blank.jpg) no-repeat; }

#backstage li .calendar-hover { position: absolute; width: 149px; height: 112px; background: url(../images/bg-70-grey.png) transparent; z-index: 100; }
#backstage li .calendar-hover a { float:left; margin: 42px 0 0 25px; }

#backstage li img { position: absolute; z-index: 50; }

#backstage li span { position: absolute; bottom: 5px; left: 0; text-align: right; width: 142px; padding-right: 7px; }

#backstage li.calendar-today { border-bottom-color: #000; }
#backstage li.calendar-startend {  background: #F2F2F2; padding: 10px; color: #FFF; width: 129px; height: 119px; }
#backstage li.calendar-other { display: none !important; }

#backstage li.calendar-startend h3, #backstage li.calendar-startend h2 { float:left; width: 129px; margin: 0; }

/* Google Maps */

#google-map-container { position: relative; left: 160px; top: 33px; }
#google-map { width: 815px; height: 1500px; }

/* Team */

#team { height: 275px; position: absolute; z-index: 10; width: 800px; top: 165px; left: 175px;}
.team h2, .team h5 { width: 183px !important; float:left !important; }
.team h5 { margin-bottom: 10px; }

/* Notification */

#notification {
	background: #232323;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: none;
		z-index: 100;
}

	#notification-content {
		color: #FFF;
			margin: 0 auto;
			width: 960px;
			padding: 15px;
			font-size: 16px;
			font-weight: bold;
	}	

/* Video */

.slide-video {
	height: 458px !important;
}


/* *************************************** */
/* 8. UI Elements */
/* *************************************** */

a.ui-button-next, a.ui-button-prev, a.ui-button-top { background: #999; background-repeat:  no-repeat; color: #FFF; width: 20px; height: 20px; float: left; margin-top: 3px; }

a.ui-button-next { background-image: url(../images/ui-button-next.jpg); }
a.ui-button-prev { background-image: url(../images/ui-button-prev.jpg); margin-right: 2px; }
a.ui-button-top { background-image: url(../images/ui-button-top.jpg); }

a.ui-button-large-next, a.ui-button-large-prev { width: 34px; height: 34px; float: left; }

a.ui-button-large-next { background: url(../images/ui-button-large-next.png) no-repeat; }
a.ui-button-large-prev { background: url(../images/ui-button-large-prev.png) no-repeat; margin-right: 2px; }

a:hover.ui-button-large-next { background: url(../images/ui-button-large-next-hover.png) no-repeat; }
a:hover.ui-button-large-prev { background: url(../images/ui-button-large-prev-hover.png) no-repeat; margin-right: 2px; }