@charset "utf-8";
/* CSS Document */
html, body {
	margin: 0;
	text-align: center;
	background: #002941 url(../images/bg.jpg) top center no-repeat;
	font: 12px Arial, Helvetica, sans-serif;
	color: #333333;
}

/*//////////////////////////////////*/
/*///        Misc Styling        ///*/
/*//////////////////////////////////*/

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; text-align: left; }
h1 { font-size: 20px; text-transform: uppercase; font-weight: normal; }
h1 a { color: #333333; text-decoration: none; } h1 a:hover { color: #ff5400; text-decoration: none; }
p { margin: 0; padding: 0; text-align: left; line-height:17px; }
a {	color: #00a7e5; text-decoration: underline; }
a:hover { color: #000000; text-decoration: none; }
a:focus { outline: none; }
img { border: 0; }
acronym { cursor: help; }

.tech { float: left; margin-bottom: 10px; }
.git_title{ font-size:13px; }
/*//////////////////////////////////*/
/*///          Dividers          ///*/
/*//////////////////////////////////*/

.line_on_light { width: 100%; height: 1px; border-bottom: 1px solid #fafafa; line-height:1px; font-size:1px; background: #dcdcdc; margin: 10px 0; }
.line_on_dark { width: 100%; height: 1px; border-bottom: 1px solid #e1e1e1; line-height:1px; font-size:1px; background: #aeaeae; margin: 10px 0; }

/*//////////////////////////////////*/
/*///         Container          ///*/
/*//////////////////////////////////*/

#container {
	width: 950px;
	height: auto;
	margin: 0 auto;
}

/*//////////////////////////////////*/
/*///           Header           ///*/
/*//////////////////////////////////*/

#header {
	width: 100%;
	height: 110px;
}

/*//////////////////////////////////*/
/*///        Description         ///*/
/*//////////////////////////////////*/

#description {
	width: 890px; /* Actual width is 950px, but the padding pushes it out 20px on both sides, hence 910px */
	height: 38px; /* Actual height is 60px, but the padding pushes it down 22px, hence 38px */
	padding:  22px 20px 0 40px;
	color: #aaaaaa;
	text-transform: uppercase;
	text-align: left;
	font-family:Helvetica, Arial, sans-serif;
	font-size:12px;
	letter-spacing:-0.3px;
}

#description a:hover {
	color: #FFFFFF;
	text-decoration: none;
}

#description span{
 display:none;
}
.tag_home{
 background-image:url(/images/tag_home.jpg);
 background-repeat:no-repeat;
}
.tag_about{
 background-image:url(/images/tag_about.jpg);
 background-repeat:no-repeat;
}
.tag_blog{
 background-image:url(/images/tag_blog.jpg);
 background-repeat:no-repeat;
}
.tag_thework{
 background-image:url(/images/tag_thework.jpg);
 background-repeat:no-repeat;
}
.tag_services{
 background-image:url(/images/tag_services.jpg);
 background-repeat:no-repeat;
}
.tag_contact3G{
 background-image:url(/images/tag_contact3G.jpg);
 background-repeat:no-repeat;
}

/*//////////////////////////////////*/
/*///           Content          ///*/
/*//////////////////////////////////*/

.content, .content2 {
	width: 870px;
	height: auto;
	padding: 25px 40px 40px 40px;
	margin-bottom: 20px;
	background: url(../images/content_bg.gif) repeat-x bottom #FFFFFF;
	text-align: left;
}
.content a, .content2 a{ color:#ff5400; }

.content2{
	background: url(../images/bg_content2.jpg) repeat-y #FFFFFF;
}
.content_left {
	width: 380px;
	height: auto;
	float: left;
}
.padtop15{
 padding-top:10px;
}
.content_right {
	width: 450px;
	height: auto;
	float: right;
}

.content_right_portfolio {
	width: 380px;
	height: auto;
	float: right;
}

.content_right_blog {
	width: 580px;
	height: auto;
	float: right;
}
.left_services{
 width: 287px;
 height:auto;
 float:left;
}
.right_services{
 width: 540px;
 height:auto;
 float:right;
 background:#FFFFFF;
}

/*//////////////////////////////////*/
/*///      Box with Shadow       ///*/
/*//////////////////////////////////*/

.shadow_box {
	width: 340px;
	height: auto;
	padding: 20px;
	background: #FFFFFF;
}
.portfolio{
 background:#FFFFFF;
}
/*//////////////////////////////////*/
/*///            Logo            ///*/
/*//////////////////////////////////*/
#logo{
 float:left;
 width:359px;
 height:110px;
}
.tripleG {
 margin:0; padding:0;
}
.tripleG a {
 display:block;
 width: 359px;
 height: 110px;
 margin:0; padding:0;
 background: url(../images/logo_tripleginteractive.png) no-repeat top;
 text-decoration: none;
 outline:none;
}
.tripleG a span { display:none; }

/*//////////////////////////////////*/
/*///           Navbar           ///*/
/*//////////////////////////////////*/
#navbar { /*div*/
 width: 500px;
 height: 32px;
 text-align: left;
 float: right;
 margin: 40px 0 0 0;
}
.navul { /*ul*/
 position: relative;
 height: 52px;
 width: 500px;
 overflow: hidden;
 list-style-type: none;
 margin: 0;
 padding: 0;
 text-transform: uppercase;
 font-size: 13px;
 color: #969696;
 cursor:pointer;
}
.navul li {
	float: left;
	list-style: none;
	margin-top:6px;
	text-align:left;
}
.navul li.last{ margin-right:0px; }
.navul li.back {
 background:url(../images/bg_nav.jpg) repeat-x top left;
 width: 3px;
 height: 32px;
 z-index: 8;
 position: absolute;
}
.navul li.back .left{
 background:url(../images/bg_nav.jpg) repeat-x top left;
 margin-right: 3px;
 height: 32px;
}

.navul li a {
 color: #969696;
 border:none;
 text-decoration: none;;
 outline: none;
 text-align: center;
 top: 7px;
 text-transform: uppercase;
 z-index: 10;
 display: block;
 float: left;
 height: 32px;
 position: relative;
 overflow: hidden;
 margin: auto 12px;
}   
.navul li a:visited{
 color:#969696;
}
.navul li a:hover, .navul li a:active, .navul li.current a {
 color: #00a7e5;
 border: none;
}               


/*#navbar li a{
	color: #969696;
	padding-bottom: 7px;
	border-bottom: 0;
	text-decoration: none;
}

#navbar li a:hover{
	color: #00a7e5;
	border-bottom: 1px solid #00a7e5;
	text-decoration: none;
}
#navbar li.on a{
}
*/


/*//////////////////////////////////*/
/*///           Footer           ///*/
/*//////////////////////////////////*/

#footer {
  width: 948px;
  height: auto;
  background:#001928;
  border-left:1px solid #003b58;
  border-top:1px solid #003b58;
  border-right:1px solid #003b58;
  color: #ffffff;
  float:left;
}

#footer a:hover {
	color: #fafafa;
	text-decoration: none;
}

.footer_box{
	float:left;
	display:inline;
	width: 276px;
	height: auto;
	padding: 20px;
}
.footer_box h2 { font-size: 20px; text-transform: uppercase; font-weight: normal; color:#00a7e5; }

.footer_bottom{
 float:left;
 display:inline;
 height:35px;
 background:url(../images/bg_footer.jpg) no-repeat;
 width:948px;
 line-height:34px;
}

a.footer_logo {color:#ffffff; text-decoration:none;} /* unvisited link */

a.footer_nav:link {color:#ffffff; text-decoration:none; padding:0 7px;} /* unvisited link */
a.footer_nav:visited {color:#ffffff; text-decoration:none; padding:0 7px;} /* visited link */
a.footer_nav:hover {color:#f5f5f5; text-decoration:underline; padding:0 7px;} /* mouse over link */
a.footer_nav:active {color:#f5f5f5; text-decoration:underline; padding:0 7px;} /* selected link */

a.bloglinks:link {color:#ffffff; text-decoration:none; padding:0 0 8px 0;} /* unvisited link */
a.bloglinks:visited {color:#ffffff; text-decoration:none; padding:0 0 8px 0;} /* visited link */
a.bloglinks:hover {color:#f5f5f5; text-decoration:underline; padding:0 0 8px 0;} /* mouse over link */
a.bloglinks:active {color:#f5f5f5; text-decoration:underline; padding:0 0 8px 0;} /* selected link */

/*//////////////////////////////////*/
/*///          Alignment         ///*/
/*//////////////////////////////////*/

.right {
	float: right;
}

.right_shadow{
	float: right;
}

.fade {
  position: relative;
}

.fade div {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  height: 369px;
  width: 467px;
}

.left_shadow {
	float: left;
}

/*//////////////////////////////////*/
/*///          Buttons           ///*/
/*//////////////////////////////////*/

/*-- // orange_button // --*/
.orange_button {
    width: auto;
    height: 22px;
    font: 11px arial;
	font-weight: 200;
    text-align: left;
	text-transform: uppercase;
    padding: 7px 0 0 10px;
    background: url(../images/orange_button.png) no-repeat top left;
    color: #7c7c7c;
}

.orange_buttonend {
    width: auto;
    height: 29px;
    padding: 0 10px 0 0;
    background: url(../images/orange_buttonend.png) no-repeat top right;
    float: left;
    margin: 0 0 8px 0;
	width:370px;
}

.orange_button a{
	color: #FFFFFF;
	text-decoration: none;
}

.orange_button a:hover{
	color: #FFFFFF;
	text-decoration: underline;
}

/*-- // white_button // --*/
.white_button {
    width: auto;
    height: 22px;
    font: 11px arial;
	font-weight: 200;
    text-align: left;
	text-transform: uppercase;
    padding: 7px 0 0 10px;
    background: url(../images/white_button.png) no-repeat top left;
    color: #7c7c7c;
}

.white_buttonend {
    width: auto;
    height: 29px;
    padding: 0 10px 0 0;
    background: url(../images/white_buttonend.png) no-repeat top right;
    float: left;
    margin: 0 0 8px 0;
	width:370px;
}

.white_button a{
	color: #333333;
	text-decoration: none;
}

.white_button a:hover{
	color: #333333;
	text-decoration: underline;
}

/*-- // blue_button // --*/
.blue_button {
    width: auto;
    height: 22px;
    font: 11px arial;
	font-weight: 200;
    text-align: left;
	text-transform: uppercase;
    padding: 7px 0 0 10px;
    background: url(../images/blue_button.png) no-repeat top left;
    color: #7c7c7c;
}

.blue_buttonend {
    width: auto;
    height: 29px;
    padding: 0 10px 0 0;
    background: url(../images/blue_buttonend.png) no-repeat top right;
    float: left;
    margin: 0 0 8px 0;
	width:370px;
}

.blue_button a{
	color: #FFFFFF;
	text-decoration: none;
}

.blue_button a:hover{
	color: #FFFFFF;
	text-decoration: underline;
}

/*-- // black_button // --*/
.black_button {
    width: auto;
    height: 22px;
    font: 11px arial;
	font-weight: 200;
    text-align: left;
	text-transform: uppercase;
    padding: 7px 0 0 10px;
    background: url(../images/black_button.png) no-repeat top left;
    color: #7c7c7c;
}

.black_buttonend {
    width: auto;
    height: 29px;
    padding: 0 10px 0 0;
    background: url(../images/black_buttonend.png) no-repeat top right;
    float: left;
    margin: 0 0 8px 0;
	width:370px;
}

.black_button a{
	color: #FFFFFF;
	text-decoration: none;
}

.black_button a:hover{
	color: #FFFFFF;
	text-decoration: underline;
}


/*//////////////////////////////////*/
/*///         forms	             ///*/
/*//////////////////////////////////*/
.newsletterForm{
 display:inline;
 height:30px;
} 
.newsletterForm label{ float:left; width:45px; line-height:29px; }
input {
background:url(/images/bg_input.jpg) #FFFFFF bottom left repeat-x;
color: #003b58;
font: 18px lighter Arial, Helvetica, sans-serif;
line-height:26px;
border:1px solid #bdbcbd;
}
.emailaddy{ width:203px; float:left; margin-right:8px; height:27px; }

.submitbtn{ background:url(/images/btn_subscribed.jpg) no-repeat; width:79px; height:30px; float:left; cursor:pointer; }
#submitinput{ background:url(/images/btn_subscribe.jpg) no-repeat; width:79px; height:30px; border:none; cursor:pointer; }

.btn_subscribe{
 padding-top:0px;
 margin:0; padding:0;
}
.success {
	width: 318px;
	padding: 10px;
	margin: 5px 0px;
	background: #e6e6e6;
	border: 1px solid #939393;
	color: #1a394b;
	font-weight:bold;
}
.error {
	width: 318px;
	padding: 10px;
	margin: 5px 0px;
	background: #ff5500;
	color: #ffffff;
	border: 1px solid #f55100;
	font-weight:bold;
}

/*//////////////////////////////////*/
/*///         titles             ///*/
/*//////////////////////////////////*/
#title_stayintouch{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_stayintouch.gif);
 background-repeat:no-repeat;
} 
#title_happyclients{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_happy_clients.gif);
 background-repeat:no-repeat;
} 
#title_wearesimple{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_wearesimple.gif);
 background-repeat:no-repeat;
} 
#title_prettyintuitive{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_pretty_intuitive.gif);
 background-repeat:no-repeat;
} 
#title_smartcoding{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_smartcoding.gif);
 background-repeat:no-repeat;
} 
#title_about{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_about.gif);
 background-repeat:no-repeat;
} 
#title_devdes{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_desdev.gif);
 background-repeat:no-repeat;
} 
#title_hosting{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_webhosting_white.gif);
 background-repeat:no-repeat;
} 
#title_organicseo{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_organicseo.gif);
 background-repeat:no-repeat;
} 
#title_givingback{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_givingback.gif);
 background-repeat:no-repeat;
}
#title_employment{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_employment.gif);
 background-repeat:no-repeat;
}
#title_webdesign{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_webdesign.gif);
 background-repeat:no-repeat;
}
#title_webdev{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_webdev.gif);
 background-repeat:no-repeat;
}
#title_webhosting{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_webhosting.gif);
 background-repeat:no-repeat;
}
#title_ecommerce{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_ecommerce.gif);
 background-repeat:no-repeat;
}
#title_emailmarketing{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_emailmarketing.gif);
 background-repeat:no-repeat;
}
#title_sef{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_sef.gif);
 background-repeat:no-repeat;
}
#title_contact3G{
 overflow: hidden;
 height:17px;
 background-image:url(../images/title_contact3G.gif);
 background-repeat:no-repeat;
}
.title_h1{
 padding-top:17px;
}

/*//////////////////////////////////*/
/*///         slideshow          ///*/
/*//////////////////////////////////*/

#slideshow { width: 450px; height: 340px; /*background: green;*/ float: left; }

#nav {
	width: 340px;
	height: auto;
	padding-left: 110px;
	margin-top: 15px;
	float: left;
}

#nav li { width: 60px; float: left; margin: 8px; list-style: none }

#nav a { width: 50px; padding: 3px; display: block; }

#nav a.activeSlide { background: #ff5400; }

#nav a:focus { outline: none; }

#nav img { border: none; display: block }

/*//////////////////////////////////*/
/*///          Contact           ///*/
/*//////////////////////////////////*/

.contactform {
	margin:0px;
	font-size:11px;
	width:380px;
	text-align: left;
}

.contactform input {
	padding:6px;
	border:1px solid #999999;
	width:212px; height:14px;
	font-size:11px;
	background: url(../images/contact_bg.gif) repeat-x top #FFF;
}

.contactform input.verifyinput {
	padding:6px;
	border:1px solid #999999;
	width:157px; height:14px;
	font-size:11px;
	background: url(../images/contact_bg.gif) repeat-x top #FFF;
}

.contactform textarea {
	padding:5px;
	border:1px solid #999999;
	width:214px;
	height:100px;
	font-size:11px;
	background: url(../images/contact_bg.gif) repeat-x top #FFF;
	font-family: Arial, Helvetica, sans-serif;
}

.error {
	border:1px solid #990000; background-color:#D70000; color:#FFFFFF; padding:5px;width:383px;
}
.error_contact {
	border:1px solid #990000; background-color:#D70000; color:#FFFFFF; padding:5px; margin-bottom:5px; width:367px;
}
.success_contact {
	border:1px solid #0080af; background-color:#00a7e5; color:#FFFFFF; padding:5px; margin-bottom:5px; width:367px;	font-weight:bold;
}

.orange{ color:#ff5400; }
.verify {
	border: 1px solid #999999;
	padding-bottom: 1px;
	background: #FFF;
}

.contactform label {
	min-width: 150px;
	float: left;
	padding:4px;
	padding-left: 0;
	font-weight: bold;
}

input.sendbutton {
	margin-top:10px;
	margin-left: 154px;
	display:block;
	border:0;
	cursor: pointer;
	outline:none;
    width: 108px;
    height: 29px;
    font: 11px arial;
	font-weight: 200;
    text-align: left;
	text-transform: uppercase;
    padding: 0px 0 0 10px;
    background: url(../images/orange_button.png) no-repeat top left;
    color: #ffffff;
}


/*////////////////////////////////////*/
/*///          Services           ///*/
/*//////////////////////////////////*/
#services_nav {
  list-style: none;
  padding-left:0px;
  margin:0px;
  height:372px;
}
#services_nav ul{
 list-style:none;
}
#services_nav li {
  list-style:none;
  margin-bottom:0;
}
#services_nav a {display:block; width:287px; height:0; padding-top:62px; color:#000; overflow:hidden;}
/* hack for older versions of IE with incorrect box model */
* html #services_nav a:link, * html #services_nav a:visited {height:62px; he\ight:0;}

#services_nav li.servdesign {background:transparent url(../images/services/servdesign.gif) no-repeat;}
#services_nav li.servdev {background:transparent url(../images/services/servdev.gif) no-repeat;}
#services_nav li.servhosting {background:transparent url(../images/services/servhosting.gif) no-repeat;}
#services_nav li.servecommerce {background:transparent url(../images/services/servecommerce.gif) no-repeat;}
#services_nav li.servmarketing {background:transparent url(../images/services/servmarketing.gif) no-repeat;}
#services_nav li.servsef {background:transparent url(../images/services/servsef.gif) no-repeat;}

/*////////////////////////////////////////*/
		/*HAPPY CLIENTS AREA*/
/*///////////////////////////////////////*/
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 340px; /*Width of Carousel Viewer itself*/
height: 300px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 340px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
.stepcarousel .panel p{
 padding:10px;
 font-size:10px;
}


.column1{
 width:260px;
 margin-right:15px;
 float:left;
 background-color:#FFFFFF;
 padding:10px;
}
.column3{
 width:260px;
 float:left;
 background-color:#FFFFFF;
 padding:10px;
}


/* Easy Slider */

	#slider{
		margin:0;
		padding:0;
		position: relative;
		left: 0px;
	}	
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{ 
		width:450px;
		height:307px;

		}	
	
	
	#prevBtn, #nextBtn{ 
		display:block;
		width:37px;
		height:45px;
		position:relative;
		left:360px;
		top:-12px;	
		float: left;
		margin-top: -37px;
		z-index:9000;

	}	
	#nextBtn{ 
		left:363px;
		}														
	#prevBtn a, #nextBtn a{  
		display:block;
		width:37px;
		height:40px;
		background:url(../images/arrow_left.png) no-repeat 0 0;	
	}	
	#prevBtn a:hover, #nextBtn a:hover {
		background-position: left -40px;
	}
	#nextBtn a{ 
		background:url(../images/arrow_right.png) no-repeat 0 0;	
	}												

/* // Easy Slider */