@import url(reset.css);
@import url(960.css);
@import url(text.css);
@import url(browsers.css);

/* 1.1 General Styles & Main Structure */
body {
background:#fff;
font-family:Arial, sans-serif;
color:#5b5b5b;
}
#page {
background:transparent url(../images/bg.png) repeat-x;
}
#page-inner {
background:transparent url(../images/bg_inner.png) 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:#111;
text-decoration:underline;
}
h1 {
font-size:2.5em;
}
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;
}
/*1.2 Navigation and Header
-------------------------------------------------------------------------*/
#search{
	z-index: 2;
	position: absolute;
	right: 10px;
	width: 300px;
	top: 20px;
}
#logo {
margin-top:15px;
}
#logo a {
display:block;
background:transparent url(../images/logo.png);
height:38px;
width:201px;
text-indent:-9999px;
float:left;
}
#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;
}
#breadcrumb, #nav {
/*height:45px;*/
padding-top: 31px;
}
#container1 a {
text-decoration:none;
}
#container1 a:hover {
text-decoration:underline;
}
#breadcrumb p {
color:#a6a6a6;
margin-left:20px;
margin-bottom: 0;
}
#breadcrumb a {
color:#3573b9;
font-weight: bold;
}
ul#nav {
float:left;
font-size:88%;
line-height:normal;
/*margin-left:109px;
margin-top:17px;*/
margin-bottom: 0;
}
#nav li {
float:left;
margin:0px 7px;
padding:0;
border-bottom: 7px solid #FFF;
/*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 15px 8px;
margin-left:-1px;
color:#444444;
text-shadow:1px 0 #fff;
}
#nav li:hover {
float:left;
margin:0px 7px;
padding:0;
border-bottom: 7px solid #3573b9;
/*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 15px 8px;
margin-left:-1px;
color:#111;
text-shadow:1px 0 #fff;
text-decoration: none;
}
#nav #current {
/*background:url(../images/navgr-trans.png) no-repeat right top;*/
border-bottom: 7px solid #d3d3d3;
}
#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 li {
color:#d1d1d1;
text-transform:uppercase;
margin-top:3px;
font-size: 130%;
font-weight: bold;
line-height: 180%;
text-shadow:1px 0 #444444;
}
#banner-left p {
color:#555;
font-size:1.5em;
line-height:29px;
padding-bottom:19px;
width:400px;
}
#bannerwrap{
margin-top: 23px;
background:url(../images/banner-bg.png) repeat-x 0px 0px;
position: relative;
z-index:1;
}
#bannerwrap-inner{
margin-top: 24px;
background:url(../images/banner-bg.png) repeat-x 0px 0px;
position: relative;
height: 121px;
z-index:1;
}
#banner {
height:300px;
position:relative;
zoom:1;
}
#banner-inner {
height:118px;
position:relative;
zoom:1;
}
#banner-inner h1 {
font-size:3.2em;
margin-top:40px;
border-right:1px solid #FFF;
width:200px;
padding-right:20px;
float:left;
text-transform: uppercase;
font-weight: bold;
color: #FFF;
}
#banner-inner p {
float:left;
font-size:1.5em;
height:15px;
margin-top:35px;
padding-left:30px;
text-shadow:none;
padding-top:3px;
color: #FFFFFF;
}
#slider-container {
position:relative;
z-index:50;
height:281px;
zoom:1;
}
#slider-container div.image-slider img {
position:relative;
zoom:1;
}
/*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 ul {
margin-bottom: 0;
}
#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
-------------------------------------------------------------------------*/
#mainContent {
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 h1 {
font-size:2.5em;
line-height:26px;
margin-bottom:10px;
}
#mainContent h2 {
font-size:1.7em;
line-height:26px;
margin-bottom:20px;
color: #005a85;
}

#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;
}
.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;
}

#product-page div.desc {
font-size:1.2em;
margin-top:20px;
border-bottom:1px solid #e6e5e5;
padding:0px 10px;
}
#product-page div ul.tags {
	margin:0;
	padding: 0;
}
#product-page div ul.tags li {
	float:left;
	height:30px;
	margin:0 4px 8px 0;
	width:auto;
}
#product-page div ul.tags li a {
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	background-color:#EFEFEF;
	border:1px solid #CCCCCC;
	color:#15587a;
	float:left;
	font-size:12px;
	height:24px;
	line-height:24px;
	padding:1px 10px 3px;
	text-decoration:none;
	text-shadow:none;
	display: block;
	white-space: nowrap;
}
#product-page div ul.tags li a:hover {
	background-color:#3573b9;
	border:1px solid #00395a;
	color: #FFF;
}
#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 h2 span.small {
	font-size: 12px;
	color: #666;
	margin-left: 10px;
}
#mainContent #product-page h3 {
line-height:26px;
margin-bottom:0;
}
#product-page {
margin-bottom:50px;
}
#product-page div.title {
margin-bottom:20px;
padding-top: 10px;
clear: both;
}
#product-page div.title small {
font-size:.88em;
}
#product-page .title {
margin-left:10px;
}
/*Contact Form*/
#print-work p, #export p, #capetown p, #durban p, #elizabeth p {margin-bottom:5px}
#print-work a, #export a, #capetown a, #durban a, #elizabeth a {text-decoration: underline}
#print-work span, #export span, #capetown span, #durban span, #elizabeth 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;
}
.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;
}
/*********************************************************************************************************
1.4.1 Showcase
**********************************************************************************************************/
#showcase {
position:relative;
zoom:1;
}
.scroll {
overflow:auto;
overflow-x:hidden;
position:relative;
zoom:1;
clear:left;
}
#showcase .scroll div.panel {
height:650px;
}
#showcase .scroll div.panel ul li {
	margin-left: 10px;
}
.img-container {
padding-bottom:17px;
background:url(../images/thumb-container.jpg) no-repeat center bottom;
}
.img-container-small {
padding-bottom:8px;
background:url(../images/thumb-container_small.jpg) no-repeat center bottom;
}
#websites {
margin-top:80px;
}
/*********************************************************************************************************
1.5. Sidebar area
**********************************************************************************************************/
#sidebar {
position:relative;
zoom:1;
padding-left:36px;
background:url(../images/separator.jpg) no-repeat top left;
height:auto!important;
height:599px;
}
#sidebar-inner {
background:url(../images/inner_sep.png) no-repeat top right;
min-height: 590px;
}
#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;
background:url(../images/rss-trans.png) no-repeat center right;
width:265px;
margin-top:10px;
margin-bottom:20px;
border-bottom:1px solid #ccc;
padding-bottom:2px;
}
#sidebar-inner a {
color:#818181;
font-weight:700;
}
#sidebar-inner span.meta {
font-weight:400;
padding-left:10px;
}
#sidebar .sidebar-h2 {
text-transform:none;
background:url(../images/first_tech.png) no-repeat 0px 0px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #ccc;
padding:5px 0 5px 60px;
background-color: #00395a;
font-size: 1em;
color: #fff;
height: 51px;
}
#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;
color: #00395a;
}
#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:#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 .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;
}
/*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 dotted #ccc;
}
.menu li a:hover {
background-color:#f9f9f9;
font-weight: bold;
}

.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;
}
.subhead {
display:block;
font-size:13px;
font-weight: bold;
position:relative;
color:#999999;
}
#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 {
display:block;
padding:10px 3px;
text-decoration:none;
}
#sidebar-inner #inner_menu a.active span,#sidebar-inner .menu a.active span {
	font-weight: bold;
	padding-left: 25px;
	color: #3573b9;
}
#sidebar-inner span.post_name {
font-weight:normal;
background:url(../images/bullet.jpg) no-repeat 0 6px;
padding-left:14px;
color: #818181;
}
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;
}

/*1.5 Twitter (we all know, no many people use twitter but this could be useful for
ads, or another content, I've name it twitter to make it easy for you to recognize it.)
-------------------------------------------------------------------------*/
#twitter {
padding:20px 20px 0;
background:#f9f9f9;
margin:10px auto 20px auto;
border:1px solid #d8d8d8;
-webkit-border-radius:4px;
-moz-border-radius:4px;
width:910px;
font-family:"Helvetica Neue", Arial, Helvetica, sans-serif;
}
#twitter .twitter-bird, .notice {
float:left;
margin-right:15px;
}
.tweet {
color:#707070;
font-size:1.2em;
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, .tweet 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 {
background:url(../images/footer-bg.jpg) repeat-x;
clear:both;
overflow:hidden;
}
#footer h4 {
font-size:1.1em;
margin:16px 0 8px;
padding:0;
text-decoration:underline;
color:#4b4b4b;
}
#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:#5b5b5b;
text-decoration:none;
}
#footer a:hover {
color:#111;
text-decoration:underline;
}
#newsletter {
width:300px;
margin:17px 0 0 17px;
}
#newsletter h3 {
margin:0;
text-transform:uppercase;
font-size:15px;
padding-bottom:3px;
}
#newsletter p {
margin:0;
}
#newsletter input.input {
color:#6d6d6d;
width:100px;
background:url(../images/input-bg.jpg) repeat-x top left;
border:1px solid #cecece;
height:14px;
float:left;
padding:4px 0 6px 7px;
margin:6px 5px 0 0;
}
#newsletter input.button {
background:url(../images/submit.png) no-repeat 0 0;
height:21px;
width:56px;
border:transparent;
font-size:0;
display:block;
line-height:0;
margin-top:7px;
float:left;
text-indent:-9999px;
cursor:pointer;
}
#newsletter input:hover.button {
background:url(../images/submit.png) no-repeat 0 -22px;
}
#log_res{
	height: 20px;
}
.ajax-loading{
	background:url(../images/preload.png) no-repeat 0 0px;
}
#footer .valid {
font-size:1.1em;
font-family:Georgia;
font-style:italic;
color:#767675;
background:#eaeaea;
text-align:center;
border:1px solid #ccc;
width:284px;
}
#footer .valid a {
color:#668b11;
}
#footer-2 {
background:#00395a;
border-top:1px solid #949494;
width:100%;
margin:0;
height:52px;
}
.copyright {
margin:0 auto;
padding:10px 0;
width:960px;
color:#012236;
text-shadow:1px 1px #276d95;
}
/*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 #footerbg {
margin:0;
float:left;
margin-top:0;
}
.ie6 #banner-inner {
height: 118px;
position:relative;
}
.ie6 #banner-inner p {
float:left;
font-size:1.5em;
height:15px;
margin-top:35px;
padding-left:30px;
text-shadow:none;
padding-top:3px;
color: #FFFFFF;
}
.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;
padding-top: 31px;
}
.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;
border:transparent;
font-size:0;
display:block;
line-height:0;
margin-top:7px;
float:left;
text-indent:-9999px;
cursor:pointer;
border:medium none;
}