@font-face {
	font-family: 'AvenirRoman05173';
	src: local('Avenir Roman 05173'), local('Avenir-Roman'), url('../Avenir-Roman.otf') format('opentype');
}

@font-face {
	font-family: 'AvenirRegular';
	src: local('Avenir Regular'), local('Avenir-Book'), url('../Avenir-Book.otf') format('opentype');
}

@font-face {
	font-family: 'AvenirMedium06173';
	src: local('Avenir Medium 06173'), local('Avenir-Medium'), url('../Avenir-Medium.otf') format('opentype');
}

@font-face {
	font-family: 'AvenirLTStd55Roman';
	src: local('Avenir LT Std 55 Roman'), local('AvenirLTStd-Roman'), url('../AvenirLTStd-Roman.otf') format('opentype');
}
a {font-size: 12px; color: #ccc; font-weight: normal;}
a:visited {color: #fff;}
a:hover {color: #fff;}
a.disabled {color: #74B7CE;}

body {
  background-color: #333;
  font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ccc;
}
h1 {color: #888; font-family: 'AvenirRoman05173', Trebuchet, Helvetica, Arial, sans-serif; font-size: 74px; margin: -10px 0px 0px 0px;}
h2 {color: #fff; font-family: 'AvenirRegular', Trebuchet, Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal;}
h3 {color: #a15a06; font-family: 'AvenirRegular', Trebuchet, Helvetica, Arial, sans-serif; font-size: 20px; letter-spacing:5.5pt; margin: 2px 0px 0px 5px;}
h4 {
	color: #ccc;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	font-size: 9px;
	font-style: italic;
}

.resume {padding-left: 11px;}
.resume b {color: #fff; font-weight: bold;}

.leftnav {font-family: "AvenirRoman05173", Helvetica, Trebuchet, Arial, sans-serif; font-size: 12px; color: #868686; text-align: right;}

.mainnav, .mainnav a {
  color: #5b595a;
  cursor: pointer;
  font-family: "AvenirMedium06173", Helvetica, Trebuchet, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.2em;
  margin-bottom: 15px;
  text-align: right;
  text-decoration: none;
}
.bg_section_one {background: url(../images/INTERACTIVE_background.gif) 0 0 no-repeat #333;}
.bg_section_two {background: url(../images/IDENTITY_background.png) 0 0 no-repeat #333;}
.bg_section_three {background: url(../images/MOBILE_background.gif) 0 0 no-repeat #333;}
.bg_section_four {background: url(../images/RESUME_background.gif) 0 0 no-repeat #333;}
.bg_section_five {background: url(../images/ABOUT_background.gif) 0 0 no-repeat #333;}

.header {padding: 0px 0px 12px 11px;}
.subnav a {color: #5a5a5a !important; font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none;}
.active a {color: #fff !important;}
.gridcell {background-color: #222; text-align: center; color: #555;}

#slidecounter {text-align: right; margin-bottom: 10px;}
.slide_1_of_4 {background: url(../images/bg_count_1.gif) 0 0 no-repeat;}
.slide_2_of_4 {background: url(../images/bg_count_2.gif) 0 0 no-repeat;}
.slide_3_of_4 {background: url(../images/bg_count_3.gif) 0 0 no-repeat;}
.slide_4_of_4 {background: url(../images/bg_count_4.gif) 0 0 no-repeat;}

.slide_1_of_6 {background: url(../images/bg_count_15.gif) 0 0 no-repeat;}
.slide_2_of_6 {background: url(../images/bg_count_25.gif) 0 0 no-repeat;}
.slide_3_of_6 {background: url(../images/bg_count_35.gif) 0 0 no-repeat;}
.slide_4_of_6 {background: url(../images/bg_count_45.gif) 0 0 no-repeat;}
.slide_5_of_6 {background: url(../images/bg_count_55.gif) 0 0 no-repeat;}
.slide_6_of_6 {background: url(../images/bg_count_56.gif) 0 0 no-repeat;}

.hidden {display: none;}
.show_hide {color: #74B7CE; margin-top: -14px !important; cursor: pointer;}

.vnav_arrow {margin: 8px 0px 8px 0px; cursor: pointer;}

.nav_arrow_up {background: url(../images/up_active_7x7.gif) 100% 100% no-repeat transparent; cursor: pointer;}
.nav_arrow_down {background: url(../images/down_active_7x7.gif) 100% 0 no-repeat transparent; cursor: pointer;}
.nav_arrow_up.disabled {background: url(../images/up_disabled_7x7.gif) 100% 100% no-repeat transparent; cursor: auto;}
.nav_arrow_down.disabled {background: url(../images/down_disabled_7x7.gif) 100% 0 no-repeat transparent; cursor: auto;}
.nav_arrow_left {background: url(../images/new_left_arrow_active.png) 100% 100% no-repeat transparent; cursor: pointer; margin-right: 8px;}
.nav_arrow_right {background: url(../images/new_right_arrow_active.png) 100% 0 no-repeat transparent; cursor: pointer; margin-left: 8px;}
.nav_arrow_left.disabled {background: url(../images/new_left_arrow_disabled.png) 100% 100% no-repeat transparent; cursor: auto;}
.nav_arrow_right.disabled {background: url(../images/new_right_arrow_disabled.png) 100% 0 no-repeat transparent; cursor: auto;}

.profile_pic {padding: 0px 0px 0px 11px;}
.profile_pic_caption {text-align: right;}
.profile_pic_caption a {font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 9px; color: #74B7CE; padding-right: 11px;}

.project_desc {font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 11px; color: #fff; margin-left: -18px;}
.project_desc a {color: #74B7CE;}
.project_nav {font-family: "AvenirMedium06173", Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 14px; color: #fff; padding-bottom: 20px;}
.project_name {font-family: "AvenirRegular", Trebuchet MS, Arial, Helvetica, sans-serif font-size: 33px; color: #fff;}

#smalltalk_trigger {cursor: pointer;}
#smalltalk_quote {height: 130px; position: absolute; top: 160px; left: 456px; color: #252525; font-family: Verdana; font-size: 17px; font-weight: bold; width: 170px; text-align: center;}

.social_media_link {margin-bottom: 20px;}

.container {margin-top: 36px;}

/* root element for the hscrollable. when scrolling occurs this element stays still. */
.hscrollable {
  position:relative;
  overflow:hidden;
  height: 900px;
  width: 740px;
} 
 
  /* root element for hscrollable items. Must be absolutely positioned  and it should have a extremely large width to accomodate hscrollable items. it's enough that you set width and height for the root element and not for this element. */
  .hitems {
    /* this cannot be too large */ 
    width:20000em;
    position:absolute;
  } 
 
  /* a single item. must be floated in horizontal scrolling. typically, this element is the one that *you* will style the most. */ 
  .hitems div {
    float:left;
    height: 500px;
    padding: 0px 0px 0px 11px;
  }
 
  .hitems .active {}


/* root element for scrollable */ 
.vscrollable {
  position:relative;
  overflow:hidden;
  height: 900px;
  /*width: 500px;*/
} 
  /* root element for scrollable items */ 
  .vitems {
    position:absolute;
    height:20000em;
  }

  .project_container {}
 
  .project_left_right_controls {
    display: inline;
    float: right;
  }
  .project_left_right_controls a {margin-left: 8px;}

#section_one {display: none;}
#section_two {display: none;}
#section_three {display: none;}
#section_four {display: none;}
#section_five {display: none;}

#nav_for_section_one {display: none;}
#nav_for_section_two {display: none;}
#nav_for_section_three {display: none;}
#nav_for_section_four {display: none;}
#nav_for_section_five {display: none;}