﻿@import url(reset.css);
@import url(960.css);
@import url(text.css);
@import url(browsers.css);


/************************************************************************
TABLE OF CONTENT

1.- HOMEPAGE 
------------------------------------------------------------------------
1.1.- GENERAL STYLES & MAIN STRUCTURE
1.2.- NAVIGATION AND HEADER
1.3.- BANNER
1.4.- MAIN CONTENT
1.5.- TWITTER
1.6.- FOOTER RELATED
************************************************************************/
/* 1.1 General Styles & Main Structure */
body {
	font-family:Arial, sans-serif;
	color:#CCCCCC;
	background-color: #000000;
}

#page {
	background-color: #000000;
	background-image: url(../images/bg2.jpg);
	background-repeat: no-repeat;
	width: 960px;
	border: medium solid #660000;
	margin-right: auto;
	margin-left: auto;
}

#page-inner {
background:transparent url(../images/bg-inner.jpg) repeat-x;
}

small {
font-size:.9em;
}

.floatright {
float:right;
}

.floatleft {
float:left;
}

a:link {
color:#5b5b5b;
text-decoration:none;
}

a:visited {
color:#5b5b5b;
}

a:hover,a:focus {
color:#999999;
text-decoration:underline;
}

h1 {
font-size:2em;
}

h2 {
font-size:1.8em;
}

h3 {
font-size:1.5em;
}

h4 {
font-size:1em;
}

li {
list-style:none;
}

h1,h2,h3,h4,h5,h6 {
color:#212121;
}
#cu3er-container {
	width:920px;
	margin-left: 9px;
	height: 247px;
	background-color: transparent;
}
/*1.2 Navigation and Header
-------------------------------------------------------------------------*/
#logo {
	margin-top:9px;
}

#logo a {
	display:block;
	height:44px;
	width:920px;
	text-indent:-9999px;
	float:left;
	background-color: transparent;
}

#logo small {
color:#fff;
margin:8px 0 0 3px;
float:left;
}

#buttons {
height:25px;
margin-top:15px;
padding-top:0;
margin-bottom:0;
}

ul#buttons li {
float:right;
margin-right:12px;
margin-left:4px;
}

a.sign-up {
background:url(../images/signup.png) no-repeat;
display:block;
text-indent:-9999px;
width:97px;
height:22px;
}

a.login {
background:url(../images/login.png) no-repeat;
display:block;
text-indent:-9999px;
width:97px;
height:22px;
}

a:hover.login {
background:url(../images/login.png) no-repeat 0 -22px;
}

a:hover.sign-up {
background:url(../images/signup.png) no-repeat 0 -22px;
}

#top-bar {
height:45px;
}

#top-bar a {
text-decoration:none;
}

#top-bar a:hover {
text-decoration:underline;
}

div#breadcrumb {
margin-top:21px;
margin-left:-19px;
}

#breadcrumb p {
color:#fff;
margin-left:21px;
margin-top:-3px;
}

#breadcrumb a {
color:#afafaf;
}

ul#nav {
	float:left;
	font-size:100%;
	line-height:normal;
	margin-left:-300px;
	margin-top:17px;
	width:669px;
	padding-top: 0;
	padding-right: 5px;
	padding-bottom: 0;
	padding-left: 5px;
}

#nav li {
float:left;
margin:2px 7px;
padding:0;
background:url(../images/navbr-trans.png) no-repeat right top;
}

#nav a {
	display:block;
	background:url(../images/navbl-trans.png) no-repeat left top;
	padding:3px 8px;
	margin-left:-1px;
	color:#FFFFFF;
	text-shadow:1px 0 #fff;
}

#nav li:hover {
float:left;
margin:2px 7px;
padding:0;
background:url(../images/navgr-trans.png) no-repeat right top;
}

#nav a:hover {
display:block;
background:url(../images/navgl-trans.png) no-repeat left top;
padding:3px 8px;
margin-left:-1px;

}

#nav #current {
background:url(../images/navgr-trans.png) no-repeat right top;
}

#nav #current a {
background:url(../images/navgl-trans.png) no-repeat left top;
text-shadow:1px 0 #fff;
}

/*1.3 Banner
-------------------------------------------------------------------------*/
#banner-left {
margin-top:19px;
}

#banner-left h1 {
color:#111;
line-height:27pt;
text-transform:uppercase;
font-size:2.1em;
word-spacing:.2em;
margin-bottom:8px;
margin-top:11px;
}

#banner-left p {
color:#555;
font-size:1.5em;
line-height:29px;
padding-bottom:19px;
width:400px;
}

#banner {
	margin-top:-2px;
	padding-top:25px;
	position:relative;
	padding-bottom:21px;
	position:relative;
	zoom:1;
}

#banner-inner {
background:url(../images/lights-inner.png) no-repeat left top;
height:118px;
position:relative;
zoom:1;
margin-top:-2px;
}

#banner-inner h1 {
font-size:2.6em;
margin-top:22px;
border-right:1px solid #a6a6a6;
width:200px;
padding-right:20px;
float:left;
}

#banner-inner p {
border-left:1px solid #fafafa;
float:left;
font-size:1.2em;
height:15px;
margin-top:22px;
padding-left:20px;
text-shadow:none;
width:268px;
padding-top:3px;
}

#slider-container {
position:relative;
z-index:50;
background:url(../images/browser.png) no-repeat bottom center;
height:281px;
margin-top:19px;
zoom:1;
}

#slider-container div.image-slider img {
position:relative;
zoom:1;
top:29px;
left:13px;
}

/*Remove this _width and put it on the ie.css*/
#slider-container div.image-slider h2 {
position:absolute;
top:167px;
left:12px;
width:100%;
}

#slider-container div.image-slider h2 span {
color:#FFF;
font:bold 22px/45px Myriad Pro, Arial Sans-Serif;
letter-spacing:-1px;
background:#000;
/* fallback color */
background:rgba(0, 0, 0, 0.7);
padding:10px;
letter-spacing:1px;
}

#slider-container div.image-slider h2 span.spacer {
padding:0 5px;
}

#banner img#phone {
position:absolute;
z-index:1;
right:352px;
top:100px;
}

#sliderfade li {
margin:0;
}

/*this will fix the extra margin on the slider*/
a.pricing {
display:block;
background:url(../images/pricing-btn.png) no-repeat;
height:53px;
text-indent:-9999px;
width:283px;
}

a:hover.pricing {
display:block;
background:url(../images/pricing-btn.png) no-repeat 0 -53px;
text-indent:-9999px;
}

/*1.4 Main Content
-------------------------------------------------------------------------*/
.push40 {
padding-top:40px;
}

/* just remember this, is needed that negative margin? */
#mainContent #leftContent a {
	text-decoration:underline;
}

#mainContent .thumb-img {
float:left;
margin:0 10px 0 0;
}

#mainContent .cols p {
width:273px;
margin-top:18px;
margin-left:2px;
}

/* No shortcode here */
#mainContent h2 {
	font-size:1.5em;
	line-height:26px;
	text-transform:uppercase;
	margin-bottom:0;
	color: #CCCCCC;
}

#col2 {
margin-left:8px;
margin-right:-25px;
}

.products,.visits {
padding-bottom:20px;
}

#leftContent {
margin-left:-10px;
}

.col3 {
border-left:1px dashed #ccc;
padding-left:24px;
margin-left:22px;
}

.about-text {
margin-right:-10px;
margin-bottom:50px;
}

.about-text h1 {
border-bottom:1px dotted #ccc;
padding-bottom:5px;
text-transform:uppercase;
}

.about-text p.intro {
font-size:1.2em;
margin-top:20px;
}

#mainContent .about-text h2 {
font-size:1.5em;
line-height:26px;
text-transform:uppercase;
margin-bottom:15px;
border-bottom:1px dotted #ccc;
padding-bottom:5px;
}

#mainContent .about-text h3 {
line-height:26px;
margin-bottom:0;
}

#product-page {
margin-right:-10px;
}

#product-page h1 {
border-bottom:1px dotted #ccc;
padding-bottom:5px;
text-transform:uppercase;
}

#product-page p.intro {
font-size:1.2em;
margin-top:20px;
border-top:1px solid #e6e5e5;
border-bottom:1px solid #e6e5e5;
padding:15px 0;
}

#mainContent #product-page h2 {
font-size:1.8em;
line-height:26px;
text-transform:uppercase;
border-bottom:1px solid #ccc;
padding-bottom:5px;
}

#mainContent #product-page h3 {
line-height:26px;
margin-bottom:0;
margin-top:-15px;
}

#product-page {
margin-bottom:50px;
}

#product-page div.title {
width:290px;
margin-bottom:20px;
}

#product-page div.title small {
font-size:.88em;
}

#product-page .title {
margin-left:28px;
}

/*Contact Form*/
#print-work p {margin-bottom:5px}
#print-work a {text-decoration: underline}
#print-work span {font-weight:bold; padding-left:22px}
.details1 {margin-left:30px;}
.address {background:url(../images/address-book.png) no-repeat center left}
.mail {background:url(../images/mail.png) no-repeat center left}
.phone {background:url(../images/mobile-phone.png) no-repeat center left}
.skype {background:url(../images/skype.png) no-repeat center left}
.twitter {background:url(../images/twitter.png) no-repeat center left}
.gwave {background:url(../images/gwave.png) no-repeat center left}
.facebook {background:url(../images/facebook.png) no-repeat center left}
.linkedin {background:url(../images/linkedin.png) no-repeat center left}
label {
display:none;
}

.qform {
background:url(../images/corner-trans.png) no-repeat 0 0;
padding:23px 86px;
}

.qform input,.qform textarea {
background:#FFF none repeat scroll 0 0;
border:1px solid #D2D2D2;
color:#525861;
font-family:Arial,Helvetica,sans-serif;
font-size:13px;
max-width:400px;
padding:7px 5px;
width:383px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.qform textarea:focus,.qform input:focus {
border:1px solid #929292;
}

.qform button,#contactForm button {
	border:medium none;
	cursor:pointer;
	height:37px;
	text-indent:-9999px;
	width:112px;
	margin-left:286px;
	<pre>
font-size:0;
line-height:0;
display:block;
</pre>

}

.qform button#submit1 {
	background:url(../images/button-sprite.jpg) no-repeat scroll 0 0;
	}

.qform button:hover#submit1 {
background:url(../images/button-sprite.jpg) no-repeat scroll 0 -38px;
}

.qform button#submit {
	background-attachment: scroll;
	background-color: #000099;
	background-repeat: no-repeat;
	background-position: 0 0;
	}

.qform button:hover#submit {
background:url(../images/navgr-trans.jpg) no-repeat scroll 0 -38px;
}
/*********************************************************************************************************
1.4.1 Showcase
**********************************************************************************************************/
#showcase {
position:relative;
zoom:1;
}

.scroll {
height:652px;
width:670px;
overflow:auto;
overflow-x:hidden;
position:relative;
zoom:1;
clear:left;
}

#showcase .scrollContainer div.panel {
height:670px;
}

.img-container {
padding-bottom:17px;
background:url(../images/thumb-container.jpg) no-repeat center bottom;
}

#websites {
margin-top:80px;
}

/*********************************************************************************************************
1.5. Sidebar area
**********************************************************************************************************/
#sidebar {
position:relative;
zoom:1;
float:right;
width:270px;
margin-right:10px;
padding-left:36px;
background:url(../images/separator.jpg) no-repeat top left;
height:auto!important;
height:599px;
}

#sidebar-inner {
background:transparent url(../images/sep-sidebar-trans.png) no-repeat scroll right top;
float:left;
margin-right:10px;
min-height:599px;
height:auto!important;
height:599px;
padding-right:10px;
position:relative;
zoom:1;
width:250px;
}

#interview {
width:270px;
padding-top:20px;
}

#interview h3 {
padding:0;
margin:0 0 0 3px;
}

#interview img {
padding:5px;
background-color:#e2e1e1;
border:1px solid #ccc;
}

#sidebar-inner .sidebar-h2 {
	text-transform:none;
	width:265px;
	margin-top:10px;
	margin-bottom:20px;
	border-bottom:1px solid #ccc;
	padding-bottom:2px;
	color: #CCCCCC;
}

#sidebar-inner a {
color:#818181;
font-weight:700;
}

#sidebar-inner span.meta {
font-weight:400;
padding-left:10px;
}

#sidebar .sidebar-h2 {
	text-transform:none;
	width:265px;
	margin-top:10px;
	margin-bottom:20px;
	border-bottom:1px solid #ccc;
	padding-bottom:2px;
	background-repeat: no-repeat;
	background-position: right center;
}

#sidebar .casestudies-h2 {
text-transform:none;
background:url(../images/pencil-ruler-trans.png) no-repeat center right;
width:265px;
margin-top:30px;
margin-bottom:20px;
border-bottom:1px solid #ccc;
padding-bottom:2px;
}

#sidebar a {
color:#818181;
font-weight:700;
}

span.post_name {
font-weight:700;
background:url(../images/bullet.jpg) no-repeat 0 4px;
padding-left:14px;
}

#sidebar span.meta {
font-weight:400;
padding-left:10px;
}

/*News Sidebar Begins*/
.news {
width:286px;
float:left;
clear:both;
padding-bottom:30px;
}

.news ul {
list-style-position:outside;
list-style-type:none;
padding:0;
margin:0;
}

.news li {
border-bottom:1px solid #ccc;
}

.news li a:hover {
	background-color: #333333;
}

.selected {
background:#ececec;
}

.meta_sub {
padding:0 4px;
border-right:1px solid #DDD;
}

.meta {
display:block;
font-size:11px;
line-height:14px;
position:relative;
zoom:1;
top:3px;
}

#top .news a {
padding:6px 3px;
width:286px;
}

#top #latest_news .post_name {
font-size:13px;
display:block;
}

#top #latest_news a,.news a {
display:block;
padding:5px 3px 10px;
text-decoration:none;
}

#sidebar-inner #latest_news a,#sidebar-inner .news a {
display:block;
padding:8px 3px;
text-decoration:none;
}

#sidebar-inner span.post_name {
font-weight:700;
background:url(../images/bullet.jpg) no-repeat 0 6px;
padding-left:14px;
}

ul.latest_news {
left:86px;
margin-right:27px;
margin-left:-28px;
}

/*News Sidebar Ends*/
/*Inner Sidebar Begins*/
.menu {
width:250px;
float:left;
clear:both;
padding-bottom:30px;
}

.menu ul {
list-style-position:outside;
list-style-type:none;
padding:0;
margin:0;
}

.menu li {
border-bottom:1px solid #ccc;
}

.menu li a:hover {
background:#f9f9f9;
}

.selected {
background:#ececec;
}

.meta_sub {
padding:0 4px;
border-right:1px solid #DDD;
}

.meta {
display:block;
font-size:11px;
line-height:14px;
position:relative;
zoom:1;
top:3px;
}

#top .menu a {
padding:6px 3px;
width:286px;
}

#top #inner_menu .post_name {
font-size:13px;
display:block;
}

#top #inner_menu a,.menu a {
display:block;
padding:5px 3px 10px;
text-decoration:none;
}

#sidebar-inner #inner_menu a,#sidebar-inner .menu a {
display:block;
padding:8px 3px;
text-decoration:none;
}

#sidebar-inner span.post_name {
font-weight:700;
background:url(../images/bullet.jpg) no-repeat 0 6px;
padding-left:14px;
}

ul#inner_menu {
left:86px;
margin-right:27px;
margin-left:-28px;
}

/*News Sidebar Ends*/
.box1,.box4,.box3,.box2 {
background:url(../images/corner.png) no-repeat top left;
padding:20px 0 0 20px;
}

#mainContent .box3,#mainContent .box4 {
	margin-top:54px;

}
#twitter {
padding:20px 20px 0;
background:#f9f9f9;
margin:40px auto 65px;
border:1px solid #d8d8d8;
-webkit-border-radius:4px;
-moz-border-radius:4px;
width:877px;
font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
}

#twitter .twitter-bird {
float:left;
margin-right:15px;
}

.tweet {
color:#707070;
font-size:1.5em;
font-family:georgia;
}

.tweet .tweet_list {
list-style-type:none;
margin:0;
padding:0;
}

.tweet .tweet_list li {
overflow:auto;
padding:5px 0 24px;
margin:0 0 0 17px;
}

.tweet .tweet_list li a {
color:#393939;
}

.tweet .tweet_list .tweet_avatar {
float:left;
padding-right:20px;
margin-top:6px;
}

.tweet .tweet_list .tweet_avatar img {
vertical-align:middle;
padding:2px;
background:#ddd;
border:1px solid #aaa;
}

/*1.6 Footer
-------------------------------------------------------------------------*/
#footer {
	margin:0 auto;
	padding:10px;
	width:960px;
}

#footer ul {
margin:0 53px 27px 0;
}

#footerbg {
	clear:both;
	overflow:hidden;
	border: thin solid #660000;
}

#footer h4 {
font-size:1.1em;
margin:16px 0 8px;
padding:0;
text-decoration:underline;
color:#CCCCCC;
}

#footer div.footer-col {
padding-left:0;
}

#footer ul li {
margin:0;
padding:0;
list-style-image:url(../images/bullet.jpg);
list-style-position:inside;
}

#footer a {
color:#CCCCCC;
text-decoration:none;
}

#footer a:hover {
color:#999999;
text-decoration:underline;
}

#newsletter {
	width:300px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 17px;
}

#newsletter h3 {
	margin:0;
	text-transform:uppercase;
	font-size:15px;
	padding-bottom:3px;
	color: #FFFFFF;
}

#newsletter p {
	margin:0;
	color: #CCCCCC;
}

#newsletter input.input {
	color:#6d6d6d;
	width:100px;
	height:14px;
	float:left;
	padding:4px 0 6px 7px;
	margin:6px 5px 0 0;
}

#newsletter input.button {
	height:21px;
	width:56px;
	border:none;
	font-size:0;
	display:block;
	line-height:0;
	margin-top:7px;
	float:left;
	text-indent:-9999px;
	cursor:pointer;
	background-image: url(../images/submit.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-color: #000000;
}

#newsletter input:hover.button {
background:url(../images/submit.png) no-repeat 0 -22px;
}

#footer .valid {
	font-size:1.1em;
	font-family:Georgia;
	font-style:italic;
	color:#767675;
	background:#eaeaea;
	text-align:center;
	width:284px;
}

#footer .valid a {
color:#668b11;
}

#footer-2 {
	width:100%;
	margin:0;
	height:40px;
	background-color: #000000;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #660000;
	border-right-color: #660000;
	border-bottom-color: #660000;
	border-left-color: #660000;
}

.copyright {
	margin:0 auto;
	padding:10px 0;
	width:960px;
	color:#999999;
	
	background-color: #000000;
}

/*Internet Explorer 6*/
.ie6 #banner p {
font-size:1.7em;
}

.ie6 #sidebar {
padding-left:20px;
}

.ie6 #mainContent {
margin-bottom:0;
padding-bottom:0;
}

.ie6 #sidebar {
height:0;
}

.ie6 #mainContent {
margin:0;
}

.ie6 #footerbg {
margin:0;
float:left;
margin-top:0;
}

.ie6 #banner-inner {
background:url(../images/lights-inner.jpg) no-repeat left top;
margin-top:-18px;
}

.ie6 #banner-inner p {
margin:22px 0 0;
padding:10px 0 11px 15px;
line-height:18px;
height:18px;
}

.ie6 .qform button,.ie6 #contactForm button {
font-size:0;
display:block;
line-height:0;
}

.ie6 ul#nav {
float:left;
font-size:88%;
line-height:normal;
margin-left:109px;
margin-top:17px;
padding:0 5px;
width:369px;
}

.ie6 #footer-2 {
margin-top:-16px;
height:10px;
}

.ie6 #footer #newsletter input.button {
	background:url(../images/submit.png) no-repeat 0 0;
	height:21px;
	width:56px;
	font-size:0;
	display:block;
	line-height:0;
	margin-top:7px;
	float:left;
	text-indent:-9999px;
	cursor:pointer;
	border:none;
}
.ie6  #banner {margin-top:-20px;}
.chrome #banner { margin-left:13px; }


#shadow {background: transparent url(../images/shadow.png) no-repeat 0px 150px; height:300px}
