/* general */ 


html {
	background-color: #30373A;
}
body {
	background: #30373A url(images/top_bg.png) top center repeat-x;
	color: #8C8E8F;
	position: relative;
}

a { color: #d0d0d0; }



strong { font-weight: bold; }



h3 {
	font-size: 110%;
	color:#bbbbbb;
	background-image: url("images/stripe.png");
	padding: 0.5em;
	margin:10px 0 15px 0;
}


.indent {
padding-left: 2.1em;
}


#top_wrapper  .bodytext .highlight {
color:#688E30;
}

#top_wrapper  .bodytext .bold {
color:#7E7979;
font-weight:bold;
}

h3.clearfix span {
	float: left;
}

h3.clearfix a {
	color: #d0d0d0;
	font-size: 77%;
	float: right;
}



h4 {
font-size:130%;
color:#688E30;
}

.job-details h5 {
font-size:110%;
color:#7E7979;
margin:16px 0 0 0;
}

.customertitle {
font-size:100%;
color:#7E7979;
margin:10px 0 2px 0;
}

p { line-height: 1.2em;}


.clearfix:after
{
	clear: both;
	content: '.';
	display: block;
	height: 0;
	visibility: hidden;
}
.clearfix
{
	display: inline-block;
}
* html .clearfix
{
	height: 1%;
}
.clearfix
{
	display: block;
}

#bottom_bg{
background-image: url(images/home_bar_bottom_bg.png);
height:14px;
margin:0;
padding:0;
font-size:0;
line-height:0;
}

html > body #bottom_bg {
	height: auto;
	display:block;
	min-height: 14px;
}


.pagetitles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 320%;
	font-weight: bold;
	text-align: left;
	color: #688E30;
	text-align: left;
	line-height: 120%;
	margin-top:20px;
	margin-bottom:24px;
}
.smallerPagetitles {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 200%;
	font-weight: bold;
	text-align: left;
	color: #688E30;
	text-align: left;
	line-height: 120%;
	margin-top:34px;
	margin-bottom:24px;
}


#top_wrapper .back {
border-top:1px dotted #8C8E8F;
padding-top:20px;
}


#top_wrapper .bodytext p.intro {
color: #8C8E8F;
font-family: Arial, Helvetica, sans-serif;
font-size:120%;
line-height:160%;
margin-bottom:18px;
}
#top_wrapper .bodytext p.intro2 {
color: #8C8E8F;
font-family: Arial, Helvetica, sans-serif;
font-size:100%;
line-height:120%;
margin-bottom:18px;
}

#top_wrapper .bodytext p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: left;
	color: #8C8E8F;
	text-align: left;
	line-height: 160%;
	margin:0 0 20px 0;
}

#top_wrapper .bodytext p.last{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: left;
	color: #8C8E8F;
	text-align: left;
	line-height: 160%;
	margin:10px 0 30px 0;
}

#top_wrapper .bodytext p.listintro{
	margin:10px 0 10px 0;
}

#top_wrapper .bodytext ul {
	margin-top:10px;
	margin-bottom:20px;
}

#top_wrapper .bodytext ul li{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height:140%;
	text-align: left;
	padding-left:2px;
	color: #8C8E8F;
	text-align: left;
	margin-left:40px;
	margin-bottom:10px;
	list-style:square;
}

.panel_right ul {
margin-left: 2.2em;
margin-top:16px;
font-size: 95%;
line-height: 1.45em;
}

#top_wrapper .panel_right p {
margin:18px 1.2em 0 2.1em;
font-size: 95%;
line-height: 1.45em;
}


.panel_right h3 {
	font-size: 98%;
	background-image: url("images/stripe_right.png");
	padding: 0.5em 0 0.5em 0.5em;;
	margin-top:32px;
	color:#FFF;
}

blockquote {
font-style:italic;
font-weight:normal;
margin:1.5em 2.1em 1em 2em;
line-height:1.35em;
quotes: "\201C" "\201D";
}

blockquote:before { content: open-quote; font-weight: bold; }
blockquote:after { content: close-quote; font-weight: bold; }

#top_wrapper .panel_right .origin {
margin-left: 1.8em;
font-size:110%;
padding-bottom:0;
margin-bottom:0;
color:#7E7979;
}

#top_wrapper .panel_right .source {
margin-left: 2.1em;
padding-top:0;
line-height:1.6em;
margin-top:0.4em;
}

.box {
border-bottom: 1px dotted #8C8E8F;
padding-bottom:24px;
}
.boxlast {
border:none;
}

.box ul, .boxlast ul {
margin-left: 1.8em;
font-size:110%;
color:#7E7979;
margin-top:1.3em;
}

.box ul li, .boxlast ul li {
color:#8C8E8F;
font-size:85%;
line-height:145%;
}

/*green arrow check list */
#top_wrapper .bodytext ul.checklistGreen li {
background:transparent url(images/arrow-right-green.gif) no-repeat scroll 0 2px;
padding-left:24px;
line-height:160%;
margin:0 0 10px 12px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}


#top_wrapper .bodytext ul.checklistGreen ul li {
background:transparent url(images/arrow-right-green-reverse.gif) no-repeat scroll 0 2px;
padding-left:24px !important;
margin:0 0 6px 0 !important;
}





#top_wrapper .bodytext ul.checklistGreen{
margin-right:1.2em;
}

.panel_right ul.checklistGreen li {
background:transparent url(images/arrow-right-green.gif) no-repeat scroll 0 1px;
padding:0 0 10px 24px;
line-height:1.45em;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}

.panel_right ul.checklistGreen{
margin-top:18px;
}

.job-details ul.checklistGreen{
margin-top:10px !important;
}


/*containers, panels and wrappers */

#top_wrapper a {
	color: #688E30;
	text-decoration: none;
	border-bottom: 1px dotted #688E30;
}

#top_wrapper a:hover {
	color: #688E30;
	text-decoration: none;
	border-bottom: 1px dashed #688E30;
}


#top_wrapper .full_panel {
	margin-top: 10px;
}



#top_wrapper {
	margin-top: -21px;
	position: relative;
}


.container .grid_1
{
	width: 288px;
}

.container .grid_2
{
	width: 912px;
}

#top_wrapper h3.clearfix {
	padding-left: 2em;
}



#top_wrapper {
	background-color:#131618;
}


.container {
	margin-left: auto;
	margin-right: auto;
	width: 936px;
}


.grid_1,
.grid_2
{
	display: inline;
	float: left;
	margin-left: 12px;
	margin-right: 12px;
}





#top_wrapper .panel_left {
	margin-top: 10px;
	margin-bottom: 16px;
}


#top_wrapper .panel_right {
	margin-top: 10px;
	
}



.panel_left{
	display: inline;
	float: left;
	margin-left: 12px;
	margin-right: 24px;
	width: 637px;
}

.contact_panel_left{
	display: inline;
	float: left;
	margin-left: 12px;
	margin-right: 24px;
	width: 637px;
}

#top_wrapper .contact_panel_left {
	margin-top: 10px;
	margin-bottom: 16px;
}

.panel_right{
	display: inline;
	float: left;	
	width: 250px;	
	margin-bottom:40px;
}

.full_panel
{
	display: inline;
	float: left;
	margin-left: 12px;
	margin-right: 12px;
	margin-bottom:16px;
	width: 912px;
}

.newsstory {
margin-bottom:30px;
}


/* bottom panel */
#bottom_panel {
	margin-left: 0px;
	margin-top: 20px;
	display: inline;
	float: left;
	margin-bottom: 0;
	background-color: #262B2E;
	width: 912px;
	padding-top: 0px;
	padding-bottom: 12px;
	height: 61px;
	-moz-border-radius: 1em;
    border-radius: 1em;
	}

html > body #bottom_panel {
	height: auto;
	min-height: 62px;
}
.bottom_text {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	text-align: left;
	color: #8C8E8F;
	padding-bottom: 2px;
	padding-top: 1px;
	margin-left: 13px;
	margin-top: 15px;
	display: inline;
	float: left;
	margin-bottom: 0;
	width: 875px;
}
#bottom_panel p {
line-height: 160%;
}

#top_wrapper p {
	font-size: 96%;
	margin-bottom: 24px;
}

.bottom_text  a{
	background-color: #688E30;
	color:#131618;
	padding: 0 5px;
	text-decoration:none;
	}
	
.bottom_text  a:hover{
	color:#688E30;
	text-decoration:underline;
	background-color: #262B2E;
	}


/* header */ 



#header {
	height: 160px;
}
#header h1  {
	display: block;
	text-indent: -9000em;
	width: 195px;
	height: 99px;
	background-image: url(images/OTT_logo.png);
	margin-top: 18px;
}


#top_bg{
background-image: url(images/home_bar_bg.png);
height:14px;
margin:0;
padding:0;
font-size:0;
line-height:0;
}

html > body #top_bg {
	height: auto;
	min-height: 14px;
}


/* nav */

.menu {
display:inline;
width:600px;
float:left;
margin-left:12px;
margin-right:12px;
}


#nav {
	float: right;
}

#nav li {
	float: left;
}

#nav a {
	color: #8C8E8F;
	text-decoration: none;
	display: block;
	position: relative;
	outline: none;
	padding-right: 15px;
	padding-bottom: 13px;
	padding-top: 13px;
	margin-top: 43px;
	border-bottom: 1px dotted #8C8E8F;
}

#nav a:after { content: '.'; }

#home #homeNav,
#whatwedo #whatwedoNav,
#customers #customersNav,
#jobs #jobsNav,
#news #newsNav,
#contact #contactNav,
#nav a:hover {
	color: #688E30;
	margin-top: 48px;
	border-bottom: 5px solid #688E30;
	padding-bottom: 8px;
}




/* footer */ 

#footer {
	color: #7E7979;
	text-align: center;
	background-color: #30373A;
	margin-top: 30px;
	overflow: hidden;
	width: 100%;
}


#footer .contact {
	color: #c7d92c;
}

#footer p {
	font-size: 85%;
	line-height: 3.0em;
}

#footer a{
	background-color: #688E30;
	color:#131618;
	padding: 0 5px;
	text-decoration:none;
	}
	
#footer a:hover{
	color:#688E30;
	text-decoration:underline;
	background-color: #30373A;
	}


/* homepage */




.jargon {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 325%;
	font-weight: bold;
	text-align: left;
	color: #30373A;
	line-height: 120%;
	display: inline;
	float: left;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 924px;
}

.jargon h2{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	line-height: 120%;
}

/* customers */

.customerHolder {
	position: relative;
	float: left;
	display: inline;
	width: 100%;
	padding: 20px 0 20px 0;
	margin: 0;
	
	text-align: center;

}

.customerArea {
	margin: 0 auto;
	text-align: left;
}


.customerProject {
	position: relative;
	float: left;
	display: inline;
	width: 199px;
	margin: 0 20px 0 0;
}

.customerProject img {
	margin: 0 0 10px 0;
	border: 0;
}

.customerProject p {
	font-size: 11px;
	line-height: 1.5em;
	margin: -5px 5px 0 5px;
}

.customerProjectEnd {
	position: relative;
	float: left;
	display: inline;
	width: 199px;
	margin: 0;
}

.customerProjectEnd img {
	margin: 0 0 10px 0;
	border: 0;
}


.customerProjectEnd p {
	font-size: 11px;
	line-height: 1.5em;
	margin: -5px 5px 0 5px;
}

.customerProject p, .customerProject h4, .customerProjectEnd p, .customerProjectEnd h4{
margin-left:5px !important;
}


/* jobs */

.job-footer {
margin-bottom:30px;
}


/* gallery */

#gallery {
	margin: 1.9em 0 0 1.95em;
	border: 0;
}


/* icons */


#top_wrapper .sn_icon {
margin-top:4px;
height:32px;
width:32px;
margin-left:0;
}

#top_wrapper .noborder a{
border-bottom:none;
}

/* button styles */

#top_wrapper input.submit{
	display:inline;
	float:left;
	width:8em;
	margin-top: 0;
	padding: 0.25em 0.5em;
	background-color: #688E30;
	color: #FFFFFF;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	outline: 0;
	-moz-border-radius: 0.3em;
    border-radius: 0.3em;
	border: 1px solid #7E7979;
	margin-bottom:10px;
	cursor: hand;
	cursor: pointer;
}

#top_wrapper input.submit:focus{
	outline: 0;
	-moz-border-radius: 0.25em;
    border-radius: 0.25em;
	background-color: #58792A;
	border: 1px solid #FFF;
}

#top_wrapper input.submit:hover{
	outline: 0;
	-moz-border-radius: 0.25em;
    border-radius: 0.25em;
	background-color: #58792A;
	border: 1px solid #FFF;
}




/* contact form */

#contact_form fieldset
{
	display: block;
	margin: 0 0 1em 0;
	border:none;
	padding: 0 1em 1em 1em;
}

 
#contact_form input
{
	position: relative;
	top: -1.65em;
	padding: 5px;
	left: 12em;
	width:390px;
	display: block;
	border: 1px solid #30373A;
	border-bottom-color: #30373A;
	background-color: #30373A;
	color:#8C8E8F;
}




#contact_form input.submit
{
	clear: both;
	top: 0;
}

#contact_form label
{
	clear: both;
	float: left;
	padding: 5px;
	display: block;
	width: 12em;
	margin-top: -1em;
	font-weight: bold;
}

#contact_form label.first
{
	margin-top: 1em;
}

#contact_form select
{
	position: relative;
	top: -1.4em;
	left: 12em;
	display: block;
}


#contact_form textarea { 
	position: relative;
	width: 390px;
	top: -1.55em;
	padding: 5px;
	left: 12em;
	display: block;
	height: 100px;
	border: 1px solid #30373A;
	border-bottom-color: #30373A;
	background-color: #30373A;
	color:#8C8E8F;
}

#contact_form label strong {
	color: #f00;
	font-weight: normal;
}



#contact_form input.submit{
	display:inline;
	float:left;
	left: 13.4em;
	width:8em;
	margin-top: -32px;
	padding: 0.25em 0.5em;
	background-color: #688E30;
	color: #FFFFFF;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	outline: 0;
	-moz-border-radius: 0.3em;
    border-radius: 0.3em;
	border: 1px solid #7E7979;
	margin-bottom:10px;
	cursor: hand;
	cursor: pointer;
}

#contact_form input.submit:focus{
	outline: 0;
	-moz-border-radius: 0.25em;
    border-radius: 0.25em;
	background-color: #58792A;
	border: 1px solid #FFF;
}


#contact_form input.submit:hover{
	outline: 0;
	-moz-border-radius: 0.25em;
    border-radius: 0.25em;
	background-color: #58792A;
	border: 1px solid #FFF;
}

#contact_form input:focus, #contact_form textarea:focus {
	background-color: #30373A;
	border: 1px solid #7E7979; 
}


.notification_error{
color: #f00; 
}

.notification_ok{

}

#top_wrapper .panel_right h4.help{
font-weight:bold;
margin:15px 0 6px 1.7em;
font-size:110%;
}

#top_wrapper .panel_right .helpPanel p{
margin:0 0 2em 2em;
}
/* datatables */


table {
width:100%;
  border-collapse: collapse;
  border: none;
  font: normal 11px helvetica, verdana, arial, sans-serif;
  background: #131618;

border-spacing: 1px;
  }
caption {
  text-align: left;
  font: normal 11px helvetica, verdana, arial,  sans-serif;
  background: transparent;
  }
td, th {
  border: none;
  padding: .8em;
  color: #6E6E6E;
  }
thead th, tfoot th {
  font: bold 10px helvetica, verdana, arial, sans-serif;
  border: none;
  text-align: left;
  background: #131618;
  color: #688E30;
  padding-top:4px;
  }
tbody td a {
  background: transparent;
  text-decoration: none;
  color: #9F9F9F;
  }
tbody td a:hover {
  background: transparent;
  color: #688E30;
  }
tbody th a {
  font: bold 11px helvetica, verdana, arial, sans-serif;
  background: transparent;
  text-decoration: none;
  font-weight:normal;
  color: #9F9F9F;
  }
  
  
tbody .download, .download {
    padding-right: 18px;
    background: url(images/arrow_small_down.png) transparent no-repeat center right;
    }
	
tbody .download, .download:hover {
    padding-right: 18px;
    background: url(images/arrow_small_down.png) transparent no-repeat center right;
    }

tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }

.odd {
  background: #24292C;
  }
tbody tr:hover {
  background: #0E0E0E;
  }
tbody tr:hover th,
tbody tr.odd:hover th {
  background: #0E0E0E;
  }
#top_wrapper .bodytext #table_wrap ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0;
margin:0;
margin-bottom:10px;
margin-top:0;
}

#table_wrap table.display thead th {
	cursor: pointer;
	* cursor: hand;
}


.tableHolder {
margin-bottom:50px;
}