/* @override http://trafficdigital.localhost/css/layout.css */

/* @override 
	http://www.trafficdigital.com/css/layout.css
	http://www.trafficdigital.com/css/layout.css
	http://trafficdigital.localhost/css/layout.css
	http://staging.trafficdigital.com/css/layout.css
*/

* {
outline: none;
}

body {

behavior:url('../js/mootools/csshover.htc'); 
background: #000;
padding: 0px 0 0 30px;
color: #6e6e6e;
font-family: arial, sans-serif;
font-size: 62.5%;
line-height: 2.2;
}

/* @group Typography */

a:link { text-decoration: underline; color: #fff; }
h3 a, ul#nav a { text-decoration:none !important;}
a:visited { text-decoration: underline; color: #fff; }
a:hover { text-decoration: none; color: #fff; }
a:active, .content a:focus { text-decoration: none; color: #fff; }

p {
font-size: 1.2em;
}

/* @end */

/* @group Layout */

div#wrapper {
width: 926px;
margin: 0 auto;
position:relative;
}

#logo {
	width:304px;
	float:left;
}

h1#title {
display: block;
width: 305px;
height: 138px;
background: url(../images/title.png) no-repeat left 41px;
text-indent: -999em;
float: left;
margin:0px;
padding-bottom: 0;
margin: 0px 0 2
0px 0px;
}
li.break {
clear: left;
}

div#left-col {
clear: both;
width: 302px;
float: left;
list-style-type: none;
padding: 0;
margin: 0 10px 30px 0;
}

div#right-col {
width: 604px;
float: right;

margin-right: 10px;
_margin-right: 5px !important;

}

div#right-col-inner-upper{
	width: 604px;
	overflow: hidden;
}

div.footer {
width: 603px;
border-top:1px solid #414141;
height: 27px;
padding: 0px 0 0px 0;
margin: 50px 10px 0 0;
_margin-right:0px;
text-align:right;
}

div.footer p {
margin-top: 10px !important;
font-size:1.1em;
color:#FFF !important;
}

div.showreel {
	backgrou qnd-image: url(/images/Image1.jpg);
}

/* @end */

/* @group Flir Span Tags */

/*
li.slash {
padding-right: 20px;
background: url(../images/nav-slash.png) no-repeat right 0;
} */

.spa1 {
color:gray !important;
}

.spa2 {
color:#FFFFFF !important;
display:none !important;
}

/* @end */

/* @group Navigation */

ul.open {
	list-style-type: none;
	padding: 0 0 0 15px;
	margin:0;
	width: 590px !important;
}

ul.open li {
	float: left;
	width: 191px;
}

ul.open li a.edit {
	
}


ul#nav li a {
display: block;
font-size:16px;
height: 24px;

float: left;
}

ul#nav {
list-style: none;
float: right;
margin: 0;
padding: 90px 0 0 0;
display: block;
}

.blog ul#nav {
list-style: none;
float: right;
margin: 0;
padding: 85px 0 0 0;
display: block;
}

.post {
	clear:both;
	padding-bottom:20px;
}

.alignleft {
	float:left;
}


ul#nav li {
display: inline;
float: left;
margin: 5px 10px 0px 0;
}

ul#nav li a .spa2  {
display: none;
}

ul#nav li a:hover .spa2, ul#nav li a.active .spa2   {
display: block !important;
}
ul#nav li a:hover .spa1, ul#nav li a.active .spa1  {
display: none !important;
}

ul#nav:hover {
background:#000 !important;
}

h3 a:hover .spa1, .toggle_open .spa1  {
display:none;
} 

h3 a:hover span.spa2, .toggle_open .spa2  {
display:block !important;
}

h3.active a span.spa2, h3.active a:hover span.spa2  {
	display:block !important;
}

h3.active a span.spa1, h3.active a:hover span.spa1 {
	display:none !important;
}


h3:hover {
background:#000;
}

/* Added for new image nav */

a#home.nav {
	text-indent: -999em;
	width: 60px;
	background: url(../images/nav-bar.png) -56px -122px;
}

a#home.nav:hover {
	background: url(../images/nav-bar.png) -56px -17px;

} a#home.nav.active  {
	background: url(../images/nav-bar.png) -56px -17px;
}

a#clients.nav {
	text-indent: -999em;
	width: 85px;
	background: url(../images/nav-bar.png) -141px -122px;
}

a#clients.nav:hover {
	background: url(../images/nav-bar.png) -141px -17px;
} a#clients.nav.active {
	background: url(../images/nav-bar.png) -141px -17px;
}

a#blog.nav {
	text-indent: -999em;
	width: 48px;
	background: url(../images/nav-bar.png) -249px -122px;	
}

a#blog.nav:hover {
	background: url(../images/nav-bar.png) -249px -17px;
} a#blog.nav.active {
	background: url(../images/nav-bar.png) -249px -17px;
}

a#about.nav {
	text-indent: -999em;
	width: 60px;
	background: url(../images/nav-bar.png) -316px -122px;		
}

a#about.nav:hover {
	background: url(../images/nav-bar.png) -316px -17px;
}
a#about.nav.active  {
	background: url(../images/nav-bar.png) -316px -17px;

}

a#jobs-nav.nav {
	text-indent: -999em;
	width: 40px;
	background: url(../images/nav-bar.png) -418px -122px;	
}

a#jobs-nav.nav:hover {
	background: url(../images/nav-bar.png) -418px -17px;
} a#jobs-nav.nav.active {
	background: url(../images/nav-bar.png) -418px -17px;
}

a#contact.nav {
	text-indent: -999em;
	width: 74px;
	background: url(../images/nav-bar.png) -491px -122px;	
}

a#contact.nav:hover {
	background: url(../images/nav-bar.png) -491px -17px;
} 

a#contact.nav.active {
	background: url(../images/nav-bar.png) -491px -17px;
}

a.nav.slash {
	text-indent: -999em;
	width: 10px;
	background: url(../images/nav-bar.png) -587px -122px;	
}

a.nav.end {
		text-indent: -999em;
	width: 0px;
	line-height: 1em;
	background: none;
}



/* @group Our Work Drop Down */

#our-work-closed {
	z-index:999;
}


#our-work-closed 
{
height:10px;
width:10px;
float:left;
margin-right:0px !important;
top:0px;
right: 0;
padding: 0 0 3px 0;
.padding: 0 0 0px 0;
margin-left:574px;

background: #EE2F2C;
color: #000;
text-align: center;

.cursor:hand;
.margin:0px;

_margin:0px;

line-height:1em;
position: absolute;


/*margin-left:60px;*/
}

a#close-click {
	text-decoration: none;
}

div#client-list-open {
height: 0px;
overflow: hidden;
 width: 604px;
/*margin-right:10px !important;
_margin-right:5px !important;*/
/*background: url(../images/background-menu-test.png) no-repeat #000000 -515px 0px;*/
/*position:absolute;*/
background: #0d0d0d;
z-index:4;
clear: both;
padding: 0;
position: relative;

}

#client_wrapper {

display: inline-block;
padding-top:10px;

}

#client_wrapper ul li a {
font-size:1.1em;
color: #6e6e6e;
text-decoration:none;

}

#client_wrapper div a.edit {
	float: right !important;
	margin-right: 10px;
}

#client_wrapper div a:hover {
color:#FFFFFF;
}

.no-right-margin {
	margin-right:0 !important;
	}

.no-right-margin {
margin-right:0 !important;
}
.open a {
	clear:left;
}



/* @end */

/* @end */

/* @group Column Styles */

.top {
	border-top: 1px solid #ee2f2c !important;
}

/* @group Right Col */

div.showreel{
	background: url(/images/Image1.jpg) no-repeat;
}

body.blog div.showreel{
	background:none;
}

div#showreel-nav {
height: 50px !important;
border-top: 1px solid #ee2f2c;

}

#right-col p {


line-height:2;
}

a.showreel-clients-nav {	
display: block;
float:left;
margin: 18px 0px 0px 0px;
height: 16px;
width:8px;
line-height:1em;
font-size: 1.2em;
padding-right:10px;
color:#FFF;	
}

a.image-nav {
width: 50px;
padding: 0;
height: 0;
position: relative;
z-index: 2;
display:none;
}
a.image-nav-next {
background: #373737 url(../images/nav-showreel-next.png) no-repeat center center;
float:right;
margin:0 0 0 -50px;
opacity: .4;
filter:alpha(opacity=40);
}
a.image-nav-prev {
background: #373737 url(../images/nav-showreel-prev.gif) no-repeat center center;
float: left;
margin:0 -50px 0 0;
opacity: .4;
filter:alpha(opacity=40);
}

div#no-flash {
	width: 603px;
	height: 364px;
	background-image: url(../flash/images/Image1.jpg);
	display:none;
}

/* @group Showreel Navigation */

#showreel-nav 

.clients div.main-container:hover a, .projects div.main-container:hover a, .projects div.sfhover a {
display:block !important;

}

{
_margin-left:-10px;
}

#showreel-nav a {
text-indent:-999em !important;
display:block;
height:20px;
width:10px;
margin-top:18px;
margin-left:10px;
float:left;

}

a.showreel-clients-nav-0 {
background: url(../images/clients-nav-numbers.gif) no-repeat left top;
text-indent:-999em;
} 

a.showreel-clients-nav-1 {
background: url(../images/clients-nav-numbers.gif) no-repeat -20px top;
text-indent:-999em;
}			
a.showreel-clients-nav-2 {
background: url(../images/clients-nav-numbers.gif) no-repeat -40px top;
text-indent:-999em;
}
a.showreel-clients-nav-3 {
background: url(../images/clients-nav-numbers.gif) no-repeat -60px top;
text-indent:-999em;
}
a.showreel-clients-nav-4 {
background: url(../images/clients-nav-numbers.gif) no-repeat -80px top;
text-indent:-999em;
}
a.showreel-clients-nav-5 {
background: url(../images/clients-nav-numbers.gif) no-repeat -100px top;
text-indent:-999em;
}
a.showreel-clients-nav-6 {
background: url(../images/clients-nav-numbers.gif) no-repeat -120px top;
text-indent:-999em;
}
a.showreel-clients-nav-7 {
background: url(../images/clients-nav-numbers.gif) no-repeat -140px top;
text-indent:-999em;
}
a.showreel-clients-nav-8 {
background: url(../images/clients-nav-numbers.gif) no-repeat -160px top;
text-indent:-999em;
}
a.showreel-clients-nav-9 {
background: url(../images/clients-nav-numbers.gif) no-repeat -180px top;
text-indent:-999em;
}
a.showreel-clients-nav-0:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat left -22px;
text-indent:-999em;
}
a.showreel-clients-nav-1:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -20px -22px;
text-indent:-999em;
}			
a.showreel-clients-nav-2:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -40px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-3:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -60px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-4:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -80px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-5:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -100px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-6:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -120px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-7:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -140px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-8:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -160px -22px;
text-indent:-999em;
}
a.showreel-clients-nav-9:hover {
background: url(../images/clients-nav-numbers.gif) no-repeat -180px -22px;
text-indent:-999em;
}

/* @end */



/* @end */

/* @group Left Col */

div#left-col p {
padding:5px 0 15px 0 !important;
}

.not-home div#left-col h3 
{
height:50px;
border-bottom:1px solid #414141;
}

.contact div#left-col h3 {
border-bottom:none!important;
}

.contact div#left-col h3.no-top-border {
margin-top:10px !important;
}

div#left-col h3 a {
display: block;
border-top:1px solid #373737;
padding: 0;
margin: 0 !important;
height: 20px;
font-size:15px;	
line-height:35px;
padding: 15px 0 12px 0; 
color: #FFFFFF;
}

div#left-col p 
{
padding-bottom: 15px !important;
/*border-bottom: 1px solid #414141;*/
}

div#left-col div.element.recent p {
	padding: 0 !important;
}

div#padding-bottom {
	height: 15px;
}

/* @end */

/* @group Jobs Page */

.jobs .top {border:none !important;}
	.jobs .top a {
		border-top: 1px solid #FFB416 !important;
	}
	.jobs div#showreel-nav 
	{border-top: 1px solid #FFB416 !important;}

div#jobs p {
margin:0 30px 0 0;
padding-right:20px;
}

#jobs ul {
	font-size:1.2em;
}

/* @end */

/* @group About page */

.middle {
	padding: 0 0 5px 0;
	.padding: 0 0 0px 0;
}

.about .top {border:none !important;}
	.about .top a {
		border-top: 1px solid #37E9EB !important;
	}
	.about div#showreel-nav 
	{border-top: 1px solid #37E9EB !important;}

/* @end */

/* @group Projects Page */

.projects #showreel-nav {
		border-top: 1px solid #373737 !important;	
	}


/* @end */

/* @group Contact Page */

input.top {
		border-top:#373737 1px solid!important;
	}

#map {
background: url(../images/contact-map-traffic.png) no-repeat 0px 0px;
height:498px;
}

input#contact-submit {
margin-top:10px;
background-color:#000;
border: 1px solid #333;
height:20x;
padding:4px;
color: #d2d2d2;
}

/*.contact p,*/ .contact p form {
/*border-bottom:none !important;*/
.margin: 10px 0 0 0 !important;
.padding: 0 0 5px 0 !important;
}

input.form {
background-color: #000;
border: 1px solid #373737;
font-size: 1.1em;
height: 18px;
margin-bottom: 15px;
width: 190px;
color: #d2d2d2;
font-family: verdana, sans-serif;
padding:4px 0 0 4px;
}

textarea.form {
background-color: #000;
border: 1px solid #373737;
font-size: 1.1em;
width: 201px;
height: 143px;
color: #d2d2d2;
font-family: verdana, sans-serif;
padding: 4px 4px 4px 4px;
}



/* @end */

/* @end */

/* @group Misc */

/* -misc */

hr, .none {
display: none;
}
.left {
float: left;
}	
.right {
float: right;
}
img {
border: 0;
}
.deleted {
color: #FF0000 !important;
}
#success {
color: #44D568;
padding-right:20px;
}
#error {
color: #C50000;
padding-right:20px;
}
p {
margin: 0 !important;
}
h3 {
margin: 0 !important;
}
#debugger {
display:none;
}
.no-top-border 
{
border-top: none!important;
}

.paragraph {
margin:10px 0 0 0 !important;
}

div#left-col p.no-bottom {
padding-bottom:10px !important;
}

.bottom {
border-bottom:1px solid #373737;
}

/* If selected client */

.selected {
color:#EE2F2C !important;	
}

/* @end */

/* @group Blog */

.blog li {
	font-size: 1.2em;
}

body.blog .top {
	border: 1px solid #000 !important;
}

body.blog .top.page-title {
	border-top: 1px solid #fcff20 !important;
	padding-top: 20px;
}

body.blog div#showreel-nav {
height: 50px !important;
border-top: 1px solid #fcff20;

}

div.storycontent {
	padding-right: 170px;
}

div.storycontent p {
	margin-top: 8px !important;
	
}

div.storycontent img {
	margin-top: 8px !important;
	
}

div#left-col div ul li a {
	font-size: 1.2em;
}



/* @end */

/* @group Sitemap */


ul.newsitemap {
	padding:0 0 0 15px;
	margin: 0;
}

ul.newssitemap li {
	padding: 0;
	margin: 0;

}

ul.newsitemap a {
	font-size: 12px;
	text-transform: capitalize;
}

/* @end */