/* CSS Document - SDP Labs - Mar 2010 */

/* reset spacing */
*{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif;}

html,body{min-height:100%;}

body { background:#000; text-align:center; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#B2B0B0; line-height:18px;}


img, a img { border:none;}

.clear { clear:both; line-height:0px; font-size:0;}
*html .clear { zoom:1; height:1%; font-size:0;}
.clearfix { display: inline-block; width: 100%; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clear-20 { clear:both; height:20px;}
.clear-15 { clear:both; height:15px;}
.clear-10 { clear:both; height:10px;}
.clear-5 { clear:both; height:5px;}

:focus, a { -moz-outline:none;}
 a { outline: none;}

a { color:#AF0100; text-decoration:underline;}
a:hover { color:#CD363A; text-decoration:none;}

p { margin:0 0 15px 0;}


h1 { font-size:20px; font-weight:normal; color:#F7F7F7; margin-bottom:20px;}
h4 { font-size:14px; margin:0 0 10px 0;}


/* ------------ Page Styles  ------------ */
.wrap { margin:10px auto; padding:0; text-align:left; width:1000px; overflow:hidden;}

.top { width:1000px; margin:0; padding:0; clear:both; height:130px; border-bottom:1px solid #1F1F1F; background:url(../images/top-bk.gif) repeat-x;}
.logo { width:194px; height:82px; margin:24px 0 0 0; padding:0; float:left;}
.logo h1 a { width:194px; height:82px; display:block; text-indent:-9999px; background:url(../images/logo.png) no-repeat;}
	
.contact-links { width:675px; margin:20px 0 0px 0; float:right; padding:0 8px 0 0; display:inline; }
	
.navigation { width:800px; float:right; margin:30px 0px 0 0; height:34px; float:right; margin-top:30px; padding:0; position:relative;}
.navigation ul{width:800px; height:34px; float:left; padding:0; position:relative; margin:0; list-style-type:none}
.navigation li{width:800px; height:34px; float:left; padding:0; position:relative; margin:0; list-style-type:none}
.navigation li a span{display:none}
.navigation li a { cursor:pointer; display:block; overflow:hidden; height:34px;}
.navigation li.services{ width:154px; height:34px; float:left; margin:0 0 0 5px; background:url(../images/nav.gif) no-repeat 0 0; display:block; cursor:pointer;}
.navigation li.services:hover { background-position:0 -34px;}
.navigation li.solutions { width:156px; height:34px; float:left; margin:0 0 0 13px;  background:url(../images/nav.gif) no-repeat -170px 0; display:block; cursor:pointer;}
.navigation li.solutions:hover { background-position:-170px -34px;}
.navigation li.products { width:118px; height:34px; float:left; margin:0 0 0 13px; display:block; background:url(../images/nav.gif) no-repeat -339px 0; display:block; cursor:pointer;}
.navigation li.products:hover { background-position:-339px -34px;}
.navigation li.work { width:114px; height:34px; float:left; margin:0 0 0 13px;  background:url(../images/nav.gif) no-repeat -469px 0; display:block; cursor:pointer;}
.navigation li.work:hover { background-position:-469px -34px;}
.navigation li.about { width:90px; height:34px; float:left; margin:0 0 0 13px; background:url(../images/nav.gif) no-repeat -596px 0; display:block; cursor:pointer;}
.navigation li.about:hover { background-position:-596px -34px;}
.navigation li.contact {width:90px; height:34px; float:left; margin:0 0 0 13px; background:url(../images/nav.gif) no-repeat -700px 0; display:block; cursor:pointer;}
.navigation li.contact:hover { background-position:-700px -34px;}


.navigation-new { width:800px; float:right; margin:30px 0px 0 0; height:34px; float:right; margin-top:30px; padding:0; position:relative;}
.navigation-new ul { width: auto; float:right; padding:0 10px 0 0; position:relative; margin:0; list-style-type:none;}
.navigation-new li { padding:0; position:relative; margin:0; list-style-type:none; display: inline-block; text-align: right; font-size: 13px; font-weight: bold; background:
url(../images/nav-sep.gif) no-repeat right 3px; padding:0 10px 0 7px; text-transform: uppercase; float: left; font-family: Arial, Helvetica, sans-serif;}
.navigation-new li a span {font-size:16px; display: block; color:#AEAEAE;}
.navigation-new li a { cursor:pointer; display:block; overflow:hidden; color:#fff; text-decoration: none; text-shadow:0px 1px 0px #000;}
.navigation-new li a span { color:#ACACAC; text-decoration:none;}
.navigation-new li a:hover, .navigation-new li a:hover span { color:#fff; text-decoration:none; text-shadow:0px 1px 0px #000;}

.navigation-new li.last { background-image: none; padding-right:0; }

	
	
.content { margin:0; padding:0; clear:both; width:1000px; overflow:hidden;}	
.header { width:1000px; height:330px; margin:0; padding:0; float:left; background:#000; z-index:100; background:url(../images/midbg.jpg) center center;}
.slideshow { width:1000px; height: 330px;}

.subject { margin:0px auto; padding:30px; background:#090909; clear:both; overflow:hidden; width: 940px;}

.content-row { border-top:1px solid #1F1F1F; margin:0; padding:20px 0 20px 0; clear:both; overflow:hidden; width:100%;}	

.left-col-small { width:110px; margin:0 15px 0 0; float:left;}
.subject-right { width:875px; margin:0; padding:0; float:left;}

.featured-work { width:200px; margin:0 10px 0 7px; float:left; display:inline;}
.f-w-pic { margin-bottom:15px; overflow:hidden; width:200px; float:left;}
.f-w-text { margin:0; padding:0; float:left; overflow:hidden; width:200px;}
.f-w-text p { margin:0 0 10px 0;}

a.arrow-link { color:#666666; padding-left:10px; background:url(../images/bullet-1.gif) no-repeat 0 8px; display:inline-block; font-size:11px; }

.column260 { margin:0 30px 0 0; padding:0; float:left; width:260px; display:inline;}
.column260 p { margin:7px 0 15px 0;}
.column260 h4 { margin:8px 0 0px 0; color:#FFFFFF;}
img.lp-img  { margin:30px 0 15px 0; padding:0;}
img.push-r { margin:0 8px 0 0;}
.column260 h4 a { color:#fff; text-decoration:none;}
.column260 h4 a:hover { color:#B2B0B0; text-decoration:none;}

ul.services-list { list-style:none; margin:0; padding:0;}
ul.services-list li { color:#f1f1f1; text-transform:uppercase; line-height:24px; font-size:14px; margin-bottom:4px; }
ul.services-list li img { vertical-align:middle;}
ul.services-list li a { color:#f1f1f1; text-decoration:none; font-weight:bold;}
ul.services-list li a:hover { color:#AF0100; text-decoration:none;}

.news h4{text-transform:uppercase;}	

.footer { border-top:1px solid #1F1F1F; margin:0; padding:20px 0 10px 10px; clear:both; overflow:hidden; width:990px; background:url(../images/footer-bk-top.gif) repeat-x 0 0;}
.ft-address { width:540px; float:left; margin:0; padding:0;}
.ft-address-row { width:440px; margin:0 0 15px 0; overflow:hidden; float:left; display:inline; font-size:12px; }
.footer h4 { margin:0 0 10px 0; text-transform:uppercase; font-size:13px;}
.ft-address h4 { color:#fff;}
.ft-address-column { margin:0; width: 158px; padding:0 20px 0 0; float:left;}
.ft-address-row a { color:#fff; text-decoration:underline;}
.ft-address-row a:hover { color:#999999; text-decoration:underline;}
.ft-telephone-column { width:270px; margin:0; padding:0; float:left;}
.column230 { width:230px; margin:0; padding:0; float:left;padding-left:30px;}

.ft-nav { width:140px; float:left; margin:0 20px; padding:0; font-size:17px; line-height:24px; display:inline; font-family:"Myriad Pro",Myriad,Arial,Helvetica,"Trebuchet MS",sans-serif; font-weight:600;}
.ft-nav a { color:#fff; text-decoration:none; display:block; font-family:"Myriad Pro",Myriad,Arial,Helvetica,"Trebuchet MS",sans-serif;}
.ft-nav a:hover { color:#999; text-decoration:none;}

.ft-nav-new { width:680px; float:left; margin:0; padding:0; font-size:16px; line-height:24px; display:inline; font-weight:500;}
.ft-nav-new a { color:#fff; text-decoration:none; padding:0 7px;}
.ft-nav-new a:hover { color:#999; text-decoration:none;}

.footer .newsletterwrap { width:230px; margin:0 0 20px 0; padding:0; float:left;}

.newsletterwrap input{ border: 0; height: 22px; width:200px; margin-right: 0; padding:4px 0 0 4px; background: url(../images/input-nl.gif) no-repeat left 0px; float: left;}

input.newsletterSubmit { background:url(../images/input-nl.gif) no-repeat right 0; width: 26px; height:26px; float: right; cursor: pointer;}

.newsletterwrap input.newsletterSubmit:hover { background-position: right -26px;}

.newsletterwrap input.newsletterSubmit:active { background-position: right -26px;}

.social-links { margin:0; padding:0; width:230px; float:left;}
a.facebook { background:url(../images/facebook.png) no-repeat 0 0; width:32px; height:32px; margin:0 8px 0 0; float:left; display:block; text-indent:-9999px;}
a.twitter { background:url(../images/twitter.png) no-repeat 0 0; width:32px; height:32px; margin:0 8px 0 0; float:left; display:block; text-indent:-9999px;}
a.linkedin { background:url(../images/linkedin.png) no-repeat 0 0; width:32px; height:32px; margin:0 8px 0 0; float:left; display:block; text-indent:-9999px;}
a.flickr { background:url(../images/flickr.png) no-repeat 0 0; width:32px; height:32px; margin:0 8px 0 0; float:left; display:block; text-indent:-9999px;}

.copyright { margin:25px 0 0px 0; width:1000px; float:left; font-size:10px;}

.copyright-new { margin:0; width:280px; float:right; font-size:10px; padding:5px 10px; text-align:right;}

/* -------- Links -------- */
a.whitelink { color:#fff; text-decoration:none;}
a.whitelink:hover { color:#CD363A; text-decoration:none;}

/* bredcrumb */
.bredcrumb { padding: 0; margin:0px 0 20px 0;}
.bredcrumb h1 {	font: normal 24px "Segoe UI",Calibri,"Myriad Pro",Myriad,Helvetica,Arial,"Trebuchet MS",sans-serif; position: relative; margin: 0; color: #fff;}

.bredcrumb span { background: url(../images/gradient-dark.png) repeat-x; position: absolute; bottom: -0.1em; display: block; width: 690px; height: 26px;}
.bredcrumb h1 a { font-weight:bold; text-decoration:none; color:#fff;}

img.rightpush { margin-right:15px; margin-bottom:15px;}
hr.hr-subject { background:url(../images/hr.gif) repeat-x 0 0; height:2px; font-weight:0; overflow:hidden; margin:15px auto; clear:both; border:0; line-height:1px; font-size:0; outline:none;}

.subject ul { margin:10px 0 15px 0; padding:0 0 0 15px; display: block;}

.left-column { width: 655px; margin:0; padding:0 30px 0 0; float:left; }
.left-column-full { width: 879px; margin:0; padding:0 15px 0 0; float:left; }
.right-column { width: 224px; margin:0; padding:5px 15px 15px 15px; float:right; background: #121212;}

.red-heading { margin:10px 0 0 0; display: block; width: 100%; padding:0; clear: both;}
.red-heading span.red  { background:#AF0100; line-height: 30px; font-family:Helvetica-Normal, Helvetica, Arial, sans-serif; padding:3px 5px; *padding:3px 10px 0 10px; width: auto;font-size:18px; color:#fff; text-shadow:0 -1px 0 #510100; text-transform: uppercase;}
.rightinner { padding:10px 0;}
.rightinner p { margin-bottom:10px;}
.right-column h4 { color: #fff;}
.right-column blockquote { margin:0; padding:5px 0 0 0px; background:url(../images/left-quote.gif) no-repeat 0 0; color:#5C5C5C; text-indent: 25px; _position:relative; }
.right-column blockquote span { color:#fff; display: block; margin-top:10px; text-indent: 0px;}
ul.redplus-list { color:#B2B0B0; margin:10px 0 15px 0; padding:0; overflow: hidden; }
ul.redplus-list li { margin:0; padding:5px 5px 7px 18px; background: url(../images/redplus.gif) no-repeat 0 11px; list-style: none; border-bottom: 1px solid #1B1B1A;}
ul.redplus-list li a { color:#fff; text-decoration: none; font-weight: bold;}
ul.redplus-list li a:hover { color:#fff; text-decoration: none;}

ul.wp-sample-work { margin:10px auto; padding:0; list-style:none; clear:both;}
ul.wp-sample-work li { margin:0 10px; padding:0; list-style:none; text-align:center; display:inline; width:200px; float:left;}
ul.wp-sample-work li.first { margin-left:0; padding:0;}
ul.wp-sample-work li.last { margin-right:0; padding:0;}


/* ----------- Featured Work Thumbs Style ----------- */

div#client-banner {width:870px; overflow:hidden; margin:0; float: left; clear: both;}
#banners {clear: both; float: left; width:870px;}
#banners .offscreen {position: absolute; left: -9999em; overflow: hidden;}

#banners .project {
	float: left;
	margin: 0 20px 10px 0;
	position: relative;
	height: 206px; width: 200px;
	overflow: hidden;
}
#banners .project img {position: relative; z-index: 1;}
#banners li .hover {
	height: 150px; width: 100%;
	z-index: 3;
	position: absolute;
	top: 0; left: 0;
}
#banners li .hover.offscreen {position: absolute; left: -9999em; overflow: hidden;}
#banners li .hover .hover-bg {
	background: #B90100;
	height: 150px; width: 100%;
	position: absolute; top: 0; left: 0;
}
#banners li .hover.offscreen .hover-bg {
	background: none;
}
#banners li .hover .hover-content {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
	height: 120px; width: 170px;
	padding: 15px;
}
#banners li .hover a {
	float: left;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.1em;
	cursor: pointer;
	text-decoration: none;
	text-shadow:0 1px 0 #4C0101;
}
#banners li .hover a:hover {text-decoration: underline;}
#banners li .hover .hover-content ul {
	position: absolute;
	bottom: 15px; left: 0;
}
#banners li .hover .hover-content ul li {
	float: left; clear: both; 
	width: 80px;
	cursor: pointer;
}
#banners li .hover .hover-content ul li {width: auto;}
#banners li .hover .hover-content ul li a {
	font-size: 12px;
	padding-left: 17px;
	cursor: pointer;
}
#banners li .hover .hover-content ul li a:hover {text-decoration: underline;}
#banners li .hover .hover-content a { text-transform: capitalize;}
#banners li .hover .hover-content a:hover {display: block; text-decoration: none;}
#banners .project.last {margin-right: 0;}
#banners .project img {
	float: left;
	position: relative;
	z-index: 0;
}
#banners .project span {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	line-height: 1em;
	margin: 0;
	float: right;
	cursor: pointer;
}
#banners .project span em {
	font-size: 11px;
	color: #b2b2b2;
	font-weight: 400;
	text-align: right;
	font-style: normal;
}
#banners .project .project-info {clear: both; float: left; background-color: #272623; height: 40px; width: 180px; padding: 16px 10px 0;}
#banners .project .project-info a {float: left; width: 100%; color: #fff; text-decoration: none;}
#banners .project .project-info a:hover {float: left; width: 100%; color: #999; text-decoration: none;}
#banners .project .project-info img {float: left; top: -5px; border: none;}
div.module { width:480px; float:left; margin: 16px 20px 0 0; min-height:210px; height:auto!important; height:210px; overflow: hidden;}
div.module .rokkanites{float:left; position:relative; right:-35px;}
div.module.wide {width: 980px; min-height: 1px; margin-top:48px;}
div.last {margin-right:0}
div.module.wide h6 {font-size: 2.4em; margin: 16px 0 0; font-weight:normal}


.alignleft {float:left; margin:5px 15px 10px 0;}
.alignright {float:right; margin:5px 0 7px 15px;}
.aligncenter, div.aligncenter {margin:10px auto; text-align:center; display:block;}

img.alignleft {float:left; margin:5px 15px 5px 0;}
img.alignright {float:right; margin:5px 0 5px 15px;}
img.aligncenter {margin:10px auto; text-align:center; display:block;}

.clear-border { clear: both; height:1px; margin:10px 0; border-bottom:1px solid #252525;}

.left-column h2 { color:#fff; width:auto; clear:right; line-height:24px; font-size:18px; font-weight: normal; padding:0px; margin-bottom:10px;}  /*text-decoration:underline; background:#C90101; display: inline-table;*/

h1.big { font-size:36px; font-weight: bold; line-height:40px;}

.client-logo { float:left; margin:10px 15px 20px 0;}
.portfolio-thumbs {  padding:10px 0; margin:10px 0; width:204px;} /*border:1px solid #1F1F1F; background:#151515;*/
.pp-thumb { border:1px solid #1F1F1F; background:#121212; padding:3px; width: auto; margin:5px 5px 0 0; display: inline-block; *float: left;}
.pp-thumb img { *margin-bottom:-3px;}
.buttonrow { margin:5px 0 0 0; clear: both; width:100%; overflow: hidden;}
.nextprevlink { padding:0 2px 2px 2px; margin:0 20px 0 0; color:#fff; text-decoration: none; line-height:12px;}
.nextprevlink:hover { background:#272727; color:#fff; text-decoration: none;}
.nextprevlink.left { float: left;}
.nextprevlink.right { float: right;}

.scrollTo { color:#fff; text-decoration: none; padding:0 5px; background:#0A0A0A; line-height:24px;}
.scrollTo:hover { color:#C90101; text-decoration: none; }


#global-hat {
	background:none repeat scroll 0 0 #FFFFFF;
	height:30px;
	width:100%;
}
#global-hat .global-hat-content {
	margin:0 auto;
	width:1000px;
}
#global-hat .social-networks {
	float:right;
}
#global-hat ul {
	list-style-type:none;
}
#global-hat ul, #global-hat ol {
	margin:0;
}
#global-hat .global-hat-nav li {
	float:left;
	height:30px;
	padding:0 5px 0 0;
}
#global-hat ul li, #global-hat ul li a {
	color:#656565;
	float:left;
	font-size:11px;
}
#global-hat .global-hat-nav li.current a {
	background:none repeat scroll 0 0 #000;
	color:#FFFFFF;
	padding:0 10px;
	font-weight:bold;
}
#global-hat .global-hat-nav li a {
	font-size:1.2em;
	line-height:2.3em;
}

#global-hat .sdp-mini{
	padding:4px 0;
}

#global-hat .social-networks li.title {
color:#B2B2B2;
font-size:11px;
font-weight:700;
margin-right:15px;
}

#global-hat .social-networks li {
float:left;
line-height:2.7em;
margin-right:5px;
}

#global-hat ul li, #global-hat ul li a {
color:#656565;
float:left;
font-size:11px;
text-decoration:none;
}

/* -------- Product Page -------- */
.full-column { width: 100%; float:left; margin:0; padding:0; text-align: left; position: relative;}
.full-column h1.big { font-size:33px; font-weight: bold; line-height:40px; margin:0; padding:0; text-shadow:1px 1px 3px #000; width:600px;}
.full-column h1.big img { vertical-align: middle;}
.clear-border4px { clear: both; height:4px; background:#2c2c2c; border:none; margin:2px 0 10px 0;}

.full-column .left-column { width: 520px; padding:15px 60px 0 0; float:left;}
.full-column .right-column { width: 360px; margin:0; padding:10px 0 0 0; float:right;}

.feature-points-top { width: 100%; float:left; margin:0 0 15px 0; padding:0;}
.feature-points-top h3 { color:#fff; font-size:15px; font-weight: bold; margin:0 0 10px 0;}
.feature-points-top p { margin:0 0 5px 0;}
.fp-icon { width: 70px; margin:0; padding:0 0 0 5px; float:left;}
.fp-text { width: 440px; float:left; margin:0; padding:0;}

.getbtn { width: 165px; margin:0; padding:0; height:24px; position:absolute; top:20px; right:0px; background:url(../images/getnow-btn.gif) no-repeat 0 0; display: block;}
.getbtn span { display: none;}
.getbtn:hover { background-position:0 -24px;}

::selection { background: #BE0100; color:#fff;} /* Safari */
::-moz-selection { background: #BE0100; color:#fff; }/* Firefox */

/* ------------ Contact Us ----------- */
.form-area { width: 382px; margin:0; padding:0; float:left;}
.address-area { width: 250px; float:right; margin:0; padding:0;}
.address-area .left { width:100px; float:left;}
.address-area .right { width:150px; float:left;}
.address-area .clear-border { padding:8px 0; clear: both; }


form input, form textarea, form select,form input[type=file] { padding: 6px; font-size: 13px; background: #1B1B1B url(../images/input-shadow.gif) top left repeat-x; border: 1px solid #272727; color: #fff; }


label { font-weight: bold; color:#fff; display: block; margin-bottom: 5px;}
label span { color:#B2B0B0; font-weight: normal;}

div.formField { padding:5px 0 10px 0; }
div.formField input, div.formField textarea { display:block; min-width:356px; _width:356px; vertical-align:top; margin-top:4px; zoom:1; *display:inline;}

div.TwoColField { padding:5px 0; width:49%; display:inline-block; zoom:1; *display:inline;}
div.TwoColField input, div.TwoColField textarea { display:block; min-width:270px; _width:270px; vertical-align:top; margin-top:4px; zoom:1; *display:inline;}


select.Select { min-width:368px; *width: 368px;}
textarea.TextArea { width:356px; outline: none;}

div.TwoColField select.Select { min-width:270px; _width: 270px;}
div.TwoColField textarea.TextArea { width:270px; outline: none;}

input.sendbtn { border:none; background-image: none; width:auto;}

.contactmsg.success{font-weight:bold; color:#AF0100;}
.contactmsg.error{font-weight:bold; color:#AF0100;}

div.SingleColField { padding:5px 0; width:98%; display:inline-block; zoom:1; *display:inline;}
div.SingleColField input, div.SingleColField textarea { display:block; min-width:593px; _width:593px; vertical-align:top; margin-top:4px; zoom:1; *display:inline;}

div.SingleColField select.Select { min-width:593px; _width: 593px;}
div.SingleColField textarea.TextArea { width:593px; outline: none;}