body {margin: -10px 0 -10px; padding: 0; font: small Helvetica Neue, Helvetica, Arial, sans-serif; text-align: center; line-height: 1.5em; color: #333; background: #e0e0e0 url(../images/body-bg.jpg) repeat top left;}
.clear {clear: both;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* end clearfix */
img {border: 0;}
a {color:#3a65ba; font-weight:bold; text-decoration:none;}
a:hover {text-decoration:underline;}
h1 {font: 140% "Lucinda Grande", Arial, sans-serif;}
h2 {font: bold 120% "Lucinda Grande", Arial, sans-serif;}
h3 {font: 105% "Lucinda Grande", Arial, sans-serif; font-weight: bold;}
.small_text, .small_text a {font-size: 85%; color: #333;}

#wrapper {background-color: #FFFFFF; background-image: url("../images/container-bg.jpg"); border: 0 none; margin: 0 auto; padding: 0 90px; position: relative; text-align: left; width: 960px;}

#wrapper {width: 100%;max-width: 960px;box-shadow: 0 0 30px rgba(0,0,0,0.3);margin: 40px auto;background:#FFF;padding: 0;}

.container {width:960px; margin:0px auto;max-width: 960px;width: 100%;}
#header {vertical-align: bottom; padding:10px 0 0;}
#address {float: right; font-size: 80%; padding: 10px 10px 0 0; text-align: right;}
#logo {float: left; width: 230px; padding: 10px; margin:0 0 10px;}
#logo .logo-old {display:block;}
#logo .logo {width:221px; height:40px; background-image:url(../images/logo-new.jpg); display:block; background-position:top left;}
#logo .logo:hover {background-position:bottom left;}

#nav {background: url("../images/nav-bg.png") repeat-x scroll left top #3366CC; border-top: 1px solid #64A6F3; float: left; height: 32px; list-style: none outside none; margin: 0; padding: 0; width: 100%;}

#nav li {
  float: left;
  margin: 0;
  padding: 0;
  font: 100% "Helvetica Neue", Helvetica, Arial, sans-serif;}
  
#nav li a {
  float: left;
  display: block;
  margin: 0;
  padding: 8px 12px;
  color: #fff;
  text-decoration: none;
  font-weight:normal;}
  
#nav a.currentParent, #nav a.current {
  font-weight: bold;}
  
#nav a:hover {
background-image:url(../images/nav-states.png);
background-position:top left;}

#nav a.currentParent, #nav a.current {
background-image:url(../images/nav-states.png);
background-position:0px -31px;
padding:8px 11px;
border:1px solid #26439f;
border-top:0px;
border-bottom:0px;}

#nav a:active {
background-image:url(../images/nav-states.png);
background-position:bottom left;
padding:8px 11px;
border:1px solid #3054b2;
border-top:0px;
border-bottom:0px;}

/** ----------------- HEADER TITLES ---------------------------**/

#title {
    background: url("../images/title-bg.jpg") repeat scroll 0 0 #333333;
    clear: both;
    padding: 12px;
    color: #F5F5F5;
    font-weight: bold;
}

#title h1 {
    color: #F5F5F5;
    font-weight: bold;
    margin: 0;
    font-size:130%;
    padding: 0;
}

#title h3 {
  color: #E5E5E5;
  font-weight: normal;
}

/**------------------- BODY CONTENT ------------------------**/

#body_wrapper {
  float: left;
  background: url(../images/left-background.gif) repeat-y 0 0;
}

#body_wrapper_inner {
  float: left;
}

#main_body {
  float: left;
  width: 710px;
}
#main_body_fill {
  width: 100%;
}

/**------------------- LEFT SIDEBAR -------------------------**/

#sidebar_left {
  float: left;
  width: 180px;
  margin: 10px 0;
  font-size: 90%;

}
#sidebar_left .sidebar_content {
  padding: 0 5px;
}
#sidebar_left h2 {
  background: #3366CC url(../images/nav-background.jpg) repeat-x top left;
  color: #F5F5F5;
  padding: 2px 2px 2px 4px;
  font-weight: bold;
}
#sidebar_left ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar_left li a {
  text-decoration: none;
  color: #333;
  padding-left: 15px;
}

#sidebar_left .api-tag li a {display:block;line-height:1.2;margin-bottom:8px;}

#sidebar_left a:hover {
  text-decoration: underline;
  background: url(../images/nav-selected2.gif) no-repeat left center;
}

.blog {margin-top:10px;}
.blog .blog-listing h2 {margin:0;}
.blog .meta {margin:5px 0 5px;}
.blog .blog-listing {margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid #DDD;}
.blog .blog-listing.detail {border-bottom:0 none;}
.blog .pagination {margin-bottom:10px;}


/**------------------- CONTENT -------------------------------**/

#content, #content_fill {
  float: right;
  margin: 0;
 /* width: 79%;   */
  width: 505px;

  padding: 10px 10px;
 /* border-right: 1px solid #DDD;
  border-left: 1px solid #DDD; */
}
#content #content2, #content_fill #content2 {
  padding: 0 4px;
}

#content_fill {
  width: 570px;
}


/**-------------------- RIGHT SIDEBAR ------------------------**/

#sidebar_right {
    border-left: 1px solid #CCCCCC;
    float: right;
    margin: 10px 0;
    padding: 0 10px;
    width: 229px;
}
#sidebar_right .sidebar_content {
   padding: 0 5px;
}
#sidebar_right h2 {
  background: #3366CC url(../images/nav-background.jpg) repeat-x top left;
  color: #F5F5F5;
  padding: 2px 2px 2px 4px;
  font-weight: bold;
}

/**------------------ FOOTER NAVIGATION -----------------------**/

#footer {
    background: url("../images/footer-bg.jpg") repeat-x scroll left top #3366CC;
    clear: both;
    color: #F5F5F5;
    font: 90% Helvetica Neue,helvetica,arial,sans-serif;
    padding: 10px 0;
    text-align: center;
}

#footer ul, #footer li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer ul {
  padding: 5px 0;
}
#footer li {
  display: inline;
}
#footer li a{
  padding: 5px 1.3em;
  color: #F5F5F5;
  text-decoration: none;
}
#footer a:hover {
  text-decoration: underline;
}
#footer #copyright {
    clear: both;
    font-weight: bold;
    padding: 40px 0 10px 14px;
}
#footer a {
  color: #F5F5F5;
  text-decoration: none;
}

#footer #footer-links {
    font-size: 10px;
    font-weight: bold;
    margin: 0.5em 0;
}

#footer #footer-links a {
margin:0 5px;
}

/**---------------------- PORTFOLIO PAGE ---------------------**/

.portfolio_client {
  clear: both;
  border-top: 1px solid #eee;
}
.portfolio_client_first {
  clear: both;
}
.portfolio_image {
  clear: both;
  float: right;
  margin: 5px 10px;
  padding: 2px;
  border: 1px solid #ddd;
}

/**---------------------- HOSTING TABLE -----------------------**/
  .hostTable {
    width: 100%;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
  }
  .hostRowShade {
    background-color: #F3F3F3;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .hostHeaderCol-1, .hostHeaderCol-2, .hostHeaderCol-3, .hostHeaderCol-4, .hostHeaderCol-5, .hostHeaderCol-6, .hostHeaderCol-7 {
    text-align: left;
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #000066;
    margin: 0px;
    padding: 4px 2px 4px 3px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .hostCol-1, .hostCol-2, .hostCol-3, .hostCol-4, .hostCol-5, .hostCol-6, .hostCol-7 {
    margin: 0px;
    padding: 4px 2px 4px 3px;
    color: #000066;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  .hostHeaderCol-1, .hostCol-1 {
    width: 22%;
    font: bold 12px Arial, Helvetica, sans-serif;
  }
  .hostHeaderCol-2, .hostCol-2 {
    width: 13%;
  }
  .hostHeaderCol-3, .hostCol-3 {
    width: 13%;
  }
  .hostHeaderCol-4, .hostCol-4 {
    width: 13%;
  }
  .hostHeaderCol-5, .hostCol-5 {
    width: 13%;
  }
  .hostHeaderCol-6, .hostCol-6 {
    width: 13%;
  }
  .hostHeaderCol-7, .hostCol-7 {
    width: 13%;
  }

  /* Employment
  ************************************/
  .ncEmploymentQuestionText {
    font-weight: bold;
    margin: 3px 0 0 0;
  }
  #ncEmploymentHome a {
    font-weight: bold;
    font-size: 110%;
  }





/* New Portfolio */
body#portfolioBody div#body_wrapper {background: none; padding:40px 0 20px;}
#arrow-left{background-image:url(../images/arrow-left.jpg);display:block;height:27px;left:-30px;position:absolute;top:35px;width:14px;z-index:10;}
#arrow-right{background-image:url(../images/arrow-right.jpg);display:block;height:27px;position:absolute;right:-24px;top:35px;width:14px;z-index:10;}
#arrow-right:hover,#arrow-left:hover{background-position:bottom left;}

#portfolio{ position: relative;}
#portfolio-description h3{color:#333;font-size:16px;margin:20px 0 0;padding:0;}
#portfolio-description p{margin:0 0 20px;}
#portfolio-detail-wrapper {width:860px;margin:20px 50px; }
#portfolio-left{float:left;height:275px;width:410px;}

#portfolio-right{float:right;width:410px;}
#portfolio-right h2{font-size:24px;margin:0;padding:0;}
#portfolio-images{position:relative;width:860px;margin:0 50px;}

#portfolio-images-wrapper ul {list-style: none; margin: 0; padding: 0;}
.portfolio-image{background-image:url(../images/gallery-bg-normal.png); background-repeat: no-repeat; float:left;height:114px;left:-4px;margin-right:10px;position:relative;width:156px;padding:3px;}
.portfolio-image a {display: block; height: 114px; background-position: bottom center; background-repeat: no-repeat;}
.portfolio-image.current{background-image:url(../images/gallery-bg-current.png);}
/*.portfolio-image.hover a {background-image: url(../images/pointer-moving.png);} */
ul li.portfolio-image.current a {background-image: url(../images/pointer-current.png);}
.portfolio-image.last{margin-right:0;}

#portfolio-pointer{clear:both;height:10px;position:relative;width:100%;}
#pointer-current,#pointer-moving{margin-left:-21px;position:absolute;top:0;}

#portfolio-detail-image{background-image:url(../images/item-photo-shadow.png);height:254px;left:-4px; position:relative;width:418px;}
#portfolio-detail-image-wrapper img{height:246px;width:410px;}
#portfolio-detail-image-wrapper {position: absolute; top: 4px; left: 4px; width: 410px; height: 246px;}
#portfolio-detail-prev, #portfolio-detail-next {font-size:24px; color:#CCC; text-decoration:none; font-family:arial, sans-serif; font-weight:100; padding:2px 6px 5px;}
#portfolio-detail-prev:hover, #portfolio-detail-next:hover {color:#AAA;}
#portfolio-detail-prev {float:left;}
#portfolio-detail-next {float:right;}
.portfolio-detail-caption {font-size:14px; color:#AAA; text-align:center; display:block; padding:2px; width:342px; margin:0px auto; position: absolute; left: 30px; bottom: -30px;}
#portfolio-loading {position: absolute; left: 50%; top: 150px; margin-left: -16px; display: none; z-index: 2; width: 32px; height: 32px;}
#portfolio-img-loading {position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; width: 32px; height: 32px; z-index: 10; display: none;}
/* .tooltip {background-color:#333; border:1px solid #fff;	padding:10px 15px; display:none; color:#fff; text-align: center; font-size:12px;-moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow: 0 0 10px #000; z-index: 10; min-width: 150px;} */ 
.tooltip {display:none;	background: transparent url(../images/black_arrow_sm.png) no-repeat; font-size:12px; height:60px; width:125px;	padding:15px; color:#fff; z-index: 10;} 
.tooltip.bottom {background-image: url(../images/black_arrow_sm_bottom.png); padding-top: 30px; height: 45px;}
#portfolio-feature {margin: 0; padding: 8px 0; list-style: none;}
#portfolio-feature li {padding: 0; margin: 8px 0;}
#portfolio-feature li a {display: block; text-decoration: none; color: #333;}
#portfolio-feature li a.img {background-image:url(../images/item-bg-home.png); background-repeat: no-repeat; width: 210px; height: 132px; padding: 3px; margin-top: 4px;}

 /** The ID for the form */
  #form {

    
  }
  
  .header {
     font: bold 16px Arial, helvetica,sans-serif;
     color: #000066;
     margin-bottom: 15px;
  }
  
  /** The label tag */
  #form label, #form .title, legend {
    display: inline;
   /* float: left; 
    width: 130px;*/
    font: bold 14px "Lucinda Sans ", Arial, helvetica,sans-serif;
    color: #000066;
  }
  
  #form label.inlineLabel, .separator, .desc {
     float: none;
     display: inline;
     font: normal 12px Arial, helvetica,sans-serif;
  }
    
  fieldset {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
  }
  
  /** Specific label tag */
  #form label.labelcss {
    font-weight: normal;
  }
  
  /** Each form tag wrapper div */
  #form .tagDiv, #form .errorTagDiv {
    /* margin-left: 140px;*/

  }
  
  /** The error text for each form tag */
  #form .error {
    display: block;
    font: normal 12px Arial, helvetica,sans-serif;
    color: red;
  }
  
  /** The submit button */
  input#cSubmit {
    position: relative;
    left: 50px;
  }

  /** The element wrapper div and element error wrapper div. 
      Surrounds the label and form tag */
  .elementDiv, .errorElementDiv {
    margin-bottom: 10px;
  }
  
  /** The element error wrapper div */
  .errorElementDiv {
    background: url(../images/error.gif) no-repeat;
    background-position: 95% 50%;  
    border: 2px solid #FFB2B2;
    background-color: #FFDCDC;
  }
  
  /** The error header div */
  .errorHeader {
    background: url(../images/error.gif) no-repeat;
    background-position: 8px 15px;
    margin: 10px 10px 10px 0;
    padding: 15px 15px 15px 30px;
    font: bold 14px Arial, Helvetica, Sans-Serif;
    border: 2px solid #FFB2B2;
    background-color: #FFDCDC;  
  }
  
  .formButtons {
    display: block;
    text-align: center;
  }
  
/** Page separator **/
.page_separator {
  width: 98%;
  margin: 10px 0;
  padding: 2px;
  background-color: #5a86b3;
  color: #fff;
  font: bold 14px Arial, Helvetica, sans-serif;
}  
.page_separator a {
  color: #FFF;
}






/* RESPONSIVE */

.menu-toggle {display: none;}

#body_wrapper {background: none;}

#sidebar_left {width: 18.75%;}

#sidebar_left .sidebar_content {padding: 0;}

#sidebar_left h2 {padding: 2px 2px 2px 8px;}
#sidebar_left li {margin: 0 5px;}

#sidebar_right {width: 23.85415%;padding: 0 1%;}
#content, #content_fill {padding: 10px 0;}
#content, #content_fill {margin-left: 20px;margin-left: 2.08%;}

#content, #content_fill {width: 52.6041666%}
#content_fill {width: 59.375%;margin-right: 19.2%;}
#body_wrapper, #body_wrapper_inner {width: 100%;}
#main_body {width: 73.958333%;}
#main_body #content {width: 71.126%;}
#main_body #sidebar_left {width: 25.35211%;}

#portfolio-feature li {margin: 0 0 15px;}
#portfolio-feature li a {line-height: 1.1;}
#portfolio-feature li a.img {width: auto;height: auto;background: none;box-shadow: 0 0 3px #CCC;padding: 0;}
#portfolio-feature li a.img img {width: 100%;height: auto;}


#nav {background-repeat: repeat;height: auto;}
#nav li {height: 32px;display: block;}
#title {background-size: auto 100%;}


#portfolio-images {width: 89.58333%;margin: 0 5.208333%;}
#portfolio-detail-wrapper {width: 89.58333%;margin: 0 5.208333%;}
#portfolio-images-wrapper {width: 100%!important;}

#portfolio-left {width: 47.67441%;overflow: hidden;}
#portfolio-right {width: 47.67441%;}


@media only screen and (max-width : 750px) {
#main_body #content {width: auto;float: none;}
#main_body #sidebar_left {width: auto;float: none;clear: both;}


#portfolio-left {display: none;overflow: hidden;}
#portfolio-right {width: auto;float: none;}
ul li.portfolio-image.current a {background: none;}



}



@media only screen and (max-width : 550px) {



	#wrapper {margin: 20px 0 0;}
	#footer {display: block;background-size: auto 100%;}
	#footer #copyright {padding-top: 20px;}
	#footer li {float: none;display: block;}
	#logo {float: none;margin: 0 auto;}
	#address {display: block;text-align: center;float: none;padding: 5px 10px 10px;clear: both;width: auto;}
	
	#sidebar_left, #main_body #sidebar_left {float: none;clear: both;width: auto;margin: 0 10px 20px;}
	
	#content_fill {padding: 20px;width: auto;clear: both;float: none;margin: 0;}

	#main_body #content {width: auto;float: none;margin: 0;padding: 0 20px;}
	#main_body {float: none;width: auto;margin: 0px;}
	
	#sidebar_right {margin: 0 auto;display: block;float: none;border: 0 none;width: auto;}
	
} 

@media only screen and (max-width : 500px) {

#logo {float: left}
.navigation-wrap {background: #264bae;}

.menu-toggle {display: block;float: right;margin-right: 10px;margin-top:15px;}

  .menu-toggle {
    display: block;
  }
  .menu-toggle i {
    display: block;
  }
  .menu-toggle i svg {
    display: block;
    fill: #264bae;
  }
  .menu-toggle.close i.open,
  .menu-toggle i.close {
    display: none;
  }
  .menu-toggle.close i.close {
    display: block;
  }
  
  
#nav {border: 0 none;background: none;float: none;display: none;}
#nav li {display: block;float: none;}
#nav li a {display: block;float: none;}
}