/* Header Global */
#header_container {
  position:fixed;
  z-index:2002;
  top:10px;
  left:10px;
  width:800px;
  font-family: 'Open Sans', sans-serif;
}
#header_container a {
  font-family: 'Open Sans', sans-serif;
}
/* Header Logo */
#header_logo {
  width:212px;
  height: 77px;
  background: #333333;
  background: rgba(0,0,0,0.8);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
#header_logo a {
  position:relative;
  z-index:2;
  text-decoration:none;
  display:block;
  padding:5px 6px 4px 10px;
  width:196px;
}
#header_logo:hover {
  background:#000000;
}
#header_logo_border {
  position:absolute;
  z-index:1;
  top:0px;
  left:0px;
  border:1px solid transparent;
  width:200px;
  height:65px;
  margin:5px 5px;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
#header_browse, .header_browse_bar {
  display:none;
}
#header_logo:hover #header_logo_border {
  border:1px solid #cccccc;
}
/* Header Menu */
#header_menu {
  margin-left: 212px;
  position: absolute;
  top: 0px;
  left: 0px;
}
#header_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li.header_menu_item {
  display:block;
  float:left;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 1px;
  padding-bottom: 1px;
}
li.header_menu_item a {
  display:block;
  background: #333333;
  background: rgba(0,0,0,0.8);
  text-decoration:none;
  color:#eeeeee;
  font-size:14px;
  line-height:16px;
  text-transform:uppercase;
  padding:11px 15px;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
li.header_menu_item a:hover {
  background:#000000;
}
#header_container li.active a {
  background: #d33b2f;
}
li.header_menu_img_item {
  text-transform: uppercase;
  padding: 0px 0px 0px 0px;
  display: block;
  float: left;
  padding-left: 1px;
  padding-bottom: 1px;
  font-size: 12px;
  margin: 0;
}
li.header_menu_img_item a {
  display: block;
  padding: 0;
  width: 34px;
  height: 34px;
  padding:2px;
  overflow: hidden;
  background: #333333;
  background: rgba(0,0,0,0.8);
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
#header_container #more, #header_container #share {
  cursor:pointer;
  position:initial;
}
li.facebook a:hover {
  background: #2c4d8e;
}
li.twitter a:hover {
  background: #1fa6d7;
}
li.tumblr a:hover {
  background: #2d4965;
}
/* Header More */
#header_menu_more_projects {
  position:absolute;
  display:none;
  width: 693px;
  background: #eeeeee;
  margin-top: 5px;
  top:0px;
  padding:5px;
  color:#222222;
}
.header_more_projects_box {
  font-size:14px;
  width: 200px;
  float: left;
  padding: 15px;
  position:relative;
  z-index:2;
}
.header_more_projects_title {
  font-weight: 600;
  display: inline-block;
  padding: 0 0 3px 0;
  margin: 0 0 9px 0;
  border-bottom: 2px solid #d33b2f;
}
.header_more_projects_spacer {
  height:9px;
}
.header_more_projects_box ul {
  margin:0;
  padding:0;
}
.header_more_projects_box li {
  margin:0;
  padding:0;
  list-style:none;
}
.header_more_projects_box li a {
  text-decoration:none;
  color:#333333;
  line-height: 22px;
}
.header_more_projects_box li a:hover {
  text-decoration:none;
  color:#d33b2f;
}
li a.header_see_all {
  margin-top:9px;
  font-size: 14px;
  color: #222222;
  display: inline-block;
  font-weight:bold;
}
li a.header_see_all:hover {
  color: #d33b2f;
}
#header_more_projects_arrow {
  position: absolute;
  top: -4px;
  left: 0px;
  width: 100%;
}
#header_more_projects_arrow img {
  margin-left:238px;
  display:block;
}
#header_more_projects_border {
  width: 100%;
  border: 1px solid #999999;
  height: 100%;
  position: absolute;
}
#header_more_projects_border_cont {
  margin: 0px;
  position: absolute;
  width: 691px;
  height: 202px;
  z-index:1;
}
/* Header Share */
#header_menu_share_box {
  position:absolute;
  display:none;
  width: 390px;
  height: 40px;
  left: 215px;
  top:0px;
  background: #eeeeee;
  margin-top: 5px;
  padding:5px;
}
#header_share_box_arrow {
  position: absolute;
  top: -4px;
  left: 0px;
  width: 100%;
}
#header_share_box_arrow img {
  margin-left:190px;
  display:block;
}
#header_share_box_border {
  width: 100%;
  border: 1px solid #999999;
  height: 100%;
  position: absolute;
}
#header_share_box_border_cont {
  margin: 0px;
  position: absolute;
  width: 388px;
  height: 38px;
  z-index:1;
}
#header_menu_share_box ul {
  position:relative;
  z-index:2;
  padding:10px;
  margin:0;
}
#header_menu_share_box li {
  display: inline;
  vertical-align: top;
  float: left;
  margin: 0;
}
/* Scrollbar */
/** initial setup **/
.nano {
  position : initial;
  width    : 100%;
  height   : 100%;
  overflow : hidden;
}
.nano > .nano-content {
  position      : absolute;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano > .nano-content:focus {
  outline: thin dotted;
}
.nano > .nano-content::-webkit-scrollbar {
  display: none;
}
.has-scrollbar > .nano-content::-webkit-scrollbar {
  display: block;
}
.nano > .nano-pane {
  visibility: hidden;
}
.nano > .nano-pane > .nano-slider {
  visibility: hidden;
}
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}
/* Smaller Screens */
@media (max-width: 800px) {

#header_container {
  width:212px;
  height: 77px;
  top:5px;
  left:5px;
}
#header_logo {
  width: 52px;
  height: 52px;
  overflow: hidden;
}
#header_logo a {
  padding:3px 4px 2px 8px;
}
img#logo {
  width: 130px;
}
#header_logo_border {
  width: 44px;
  height:44px;
  margin: 3px 3px;
}
#header_browse {
  position: absolute;
  top: 0px;
  left: 53px;
  background: #333333;
  background: rgba(0,0,0,0.8);
  color: #eeeeee;
  text-transform: uppercase;
  width:52px;
  height:32px;
  padding:11px 0 9px 0;
  line-height: 20px;
  font-size: 14px;
  display:block;
}
#header_browse:hover {
  background: #d33b2f;
  cursor:pointer;
}
#header_browse.active {
  background: #d33b2f;
}
.header_browse_bar {
  width: 26px;
  height: 2px;
  background: #fefefe;
  margin-top: 6px;
  margin-left: 13px;
  display: block;
}
#header_menu {
  position:relative;
  margin-left: 0px;
  height:300px;
  width:212px;
  background: none;
}
#header_menu ul {
  text-align: center;
}
li.header_menu_item {
  float:none;
}
li.header_menu_item a {
  background: none;
}
li.header_menu_img_item a {
  background: none;
}
li.header_menu_img_item.facebook {
  margin-left: 46px;
}
#header_menu_more_projects {
  width: 202px;
}
#header_more_projects_border_cont, #header_share_box_border_cont {
  margin: 0px;
  position: absolute;
  width: 200px;
  height: 202px;
  z-index:1;
}
#header_more_projects_arrow img, #header_share_box_arrow img {
  margin-left: 96px;
}
#header_menu_share_box {
  width: 202px;
  left: 0px;
  height: 95px;
}
#header_menu_share_box ul {
  text-align: center;
}
#header_menu_share_box li {
  display: block;
  float: none;
  margin-bottom: 5px;
}
.nano {
  display:none;
  position: relative;
  width: 212px;
  height: 300px;
  overflow: hidden;
  margin-top: 1px;
}
.nano-content {
  background: #333333;
  background: rgba(10,10,10,0.85);
}
.nano > .nano-content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.nano > .nano-pane > .nano-slider {
  background: #444;
  background: rgba(192,192,192,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
  visibility: visible;
}
.nano > .nano-pane {
  background : rgba(0,0,0,.25);
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
  visibility: visible;
}

}