/* for mobile browsers/small windows */
@media(max-width:767px)
{
  .header_text_name
  {
    font-family: 'Leckerli One',cursive;
    font-size:20px;
  }
  
  .header_text_title
  {
    font-size: 12px;
  }
  
  .navcontainer
   {
    padding-top: 16px;
  }
  
  .topnav_links
   {
    font-size: 10px;
  }
  
  .topnav_seperator
   {
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #000000;
    top: 4px;
    height: 12px;
    padding-right: 0px;
    margin-right: 1px;
  }
  
  .nav
  {
    position: relative;
    left: -20px;
    top: 16px;
  }
  
  .nav > li > a
   {
    padding: 1px 1px;
  }
}


/* windows screens/laptops*/
@media(min-width:768px)
{
  .header_text_name
  {
    font-family: 'Leckerli One',cursive;
    font-size:24px;
  }
  
  .header_text_title
  {
    font-size: 14px;
  }
  
  .navcontainer
  {
    padding-top: 12px;
  }
  
  .topnav_links
  {
    font-size: 11px;
  }
 
  .topnav_seperator
  {
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #000000;
    top: 4px;
    height: 14px;
    padding-right: 3px;
    margin-right: 5px;
  }
  
  .nav
  {
    position: relative;
    left: -20px;
    top: 12px;
  }
  
  .nav > li > a
  {
    padding: 5px 6px;
  }
}


/* for full screens/windows */
@media(min-width:992px)
{
  .header_text_name
  {
    font-family: 'Leckerli One',cursive;
    font-size:30px;   
  }
  
  .header_text_title
  {
    font-size: 16px;
  }
  
  .navcontainer
  {
    padding-top: 9px;
  }
  
  .topnav_links
  {
    font-size: 13px;
  }
  
  .topnav_seperator
  {
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #000000;
    top: 4px;
    height: 19px;
    padding-right: 7px;
    margin-right: 9px;
  }
  
  .nav
  {
    position: relative;
    left: -20px;
    top: 9px;
  }
  
  .nav > li > a
  {
    padding: 6px 8px;
  }
}

/* for wide-screen monitors */
@media(min-width:1200px)
{
  .header_text_name
  {
    font-family: 'Leckerli One',cursive;
    font-size: 34px;
  }
  
  .header_text_title
  {
    font-size: 16px;
  }
  
  .topnav_links
  {
    font-size: 13px;
  }
  
  .topnav_seperator
  {
    border-style: solid;
    border-width: 0px 1px 0px 0px;
    border-color: #000000;
    top: 4px;
    height: 19px;
    padding-right: 7px;
    margin-right: 9px;
  }
  
  .nav
  {
    position: relative;
    left: -20px;
    top: 9px;
  }
  
  .nav > li > a
  {
    padding: 6px 10px;
  }
}


/*universal styles*/
body
{
  background-color: #f3f3f3;
  background-image: url('/images/page_background.png');
}


/* header styles */
.navbar_shell
{
  z-index: 1;
  position: absolute;
  top: 150px;
  left: 0px;
  width: 200px;
}

.navbar_shell > .left_graphic
{
  position: absolute;
  top: 0px;
  left: 0px;
}

.navbar_shell > .right_graphic
{
  position: absolute;
  top: 0px;
  right: 0px;
}

.navbar_container
{
  position: absolute;
  top: 0px;
  left: 74px;
  right: 73px;
  height: 54px;
  background-image: url("/images/ribbon_background_center.png");
}

#content_container
{
  margin: 20px;
  padding: 0px;
  border-style: solid;
  border-width: 1px;
  border-radius: 10px;
  border-color: #bbbbbb;
  background-color: #eaeaea;
  background-image: url("/images/topnav_background2.gif");
  background-repeat: no-repeat;
}


/*header styles*/
.header_shell
{
  height: 150px;
  position: relative;
}

.header_bg_graphic
{
  background-color: #ffffff;
  background-image: url('/images/topnav_background2.gif');
  background-position: left top;
  background-repeat: no-repeat;
}

.header_logo
{
  position: absolute;
  top: 15px;
  left: 20px;
  width: 70px;
  height: 70px;
  background-image: url("/images/header_logo_background.png");
}

.header_logo_text
{
  position: absolute;
  top: 25px;
  left: 14px;
  color: #ffffff;
  font-weight: bold;
  font-size: 25px;
}

.header_text
{
  position: absolute;
  top: 20px;
  left: 100px;
}

.print_shell
{
  position: absolute;
  top: 0px;
  right: 20px;
  width: 150px;
  height: 37px;
  background-color: #eeeeee;
  border-radius: 0px 0px 10px 10px;
  padding-top: 8px;
  padding-left: 8px;
}

.print_icon
{
  font-size: 21px;
  padding-left: 8px;
}

.print_text
{
  position: absolute;
  top: 12px;
  left: 46px;
  font-size: 11px;
}

.header_spacer
{
  background-color: #fafafa;
  height: 40px;
}


/*About Me Page Styles*/
.basics_row
{
  margin: 0px;
  padding-top: 3px;
  padding-bottom: 30px;
  background-color: #f0f0f0;
  border-style: dashed;
  border-width: 1px 0px 1px 0px;
  border-color: #cccccc;
}

.basics_heading
{
  margin-top: 5px;
  margin-left: 10px;
  color: #222222;
  font-family: 'PT Sans Narrow',cursive;
  font-size: 18px;
  font-weight: bold;
}

.basics_heading >.icon
{
  font-size: 13px;
}

.basics_heading > .description
{
  margin-left: 8px;
  position: relative;
  top: 2px;
}

.basics_text
{
  margin-left: 10px;
  margin-bottom: 6px;
  padding-left: 24px;
  padding-bottom: 8px;
  border-style: dotted;
  border-width: 0px 0px 1px 0px;
  border-color: #aaaaaa;
  color: #666666;
  font-family: 'PT Sans Narrow',cursive;
  font-size: 18px;
}

.basics_image
{
  float: left;
  margin: 10px;
  padding: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
  border-radius: 5px;
}

.basics_aboutme_top
{
  line-height: 115%;
  color: #222222;
  font-size: 16px;
  font-family: 'Lato', cursive;
  font-weight: bold;
  font-style: italic;
  padding-top: 5px;
}

.basics_aboutme
{
  /*nothing to see here*/
}

.experience_row
{
  margin: 0px;
  padding-bottom: 15px;
  background-color: #ffffff;
}

.experience_heading
{
  margin-left: 10px;
  margin-top: 25px;
  color: #FABD03;
  font-weight: bold;
  font-size: 28px;
  border-style: double;
  border-width: 0px 0px 4px 0px;
  border-color: #cccccc;
}

.skills_content
{
  margin-left: 15px;
  margin-top: 7px;
  line-height: 240%;
}

.skills_section_description
{
  line-height: 240%;
  margin-top: 15px;
}

.tablink
{
  font-weight: bold;
  font-size: 18px;
  
}

.starred
{
  color: #FABD03; font-size: 13px;
}

.unstarred
{
  color: #dddddd; font-size: 13px;
}

.skill_box
{
  margin-bottom: 20px;
  display: block;
  line-height: 110%;
}

.skill_heading
{
  font-size: 14px;
  font-weight: bold;
  display: inline;
}

.skill_info
{
  color: #333333;
  display: inline;
  font-size: 12px;
  font-style: italic;
  line-height: '100%';
}


.employment
{
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 14px;
}

.employment > .employer
{
  float: left;
  width: 190px;
  color: #222222;
  font-family: 'PT Sans Narrow',cursive;
  font-size: 20px;
  font-weight: bold;
}

.employment > .date
{
  float: right;
  text-align: right; 
  width: 250px;
  color: #222222;
  font-family: 'PT Sans Narrow',cursive;
  font-size: 14px;
  font-weight: bold;
}

.employment > p > .title
{
  text-decoration: underline;
}

.extras_row
{
  margin: 0px;
  margin-bottom: 10px;
  padding-top: 5px;
  padding-bottom: 30px;
  background-color: #eaeaea;
  border-style: dashed;
  border-width: 1px 0px 0px 0px;
  border-color: #cccccc;
}

.extra
{
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}


/*Reference Page Styles*/
.reference
{
  margin: 15px;
}

.reference > .heading
{
  font-weight: bold;
  font-size: 16px;
}

.reference > .subheading
{
  font-weight: bold;
  color: #000000;
  font-size: 12px;
}

.unblock_references
{
  margin: 20px auto 20px auto;
  width: 70%;
}

.unblock_references > .email
{
  font-weight: bold;
  color: #555555;
}


/*Overruled styles from bootstrap*/
.nav-tabs > li > a {
  color: #222222;
}

.nav-pills > li + li
{
  margin-left: 2px;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus
{
  font-weight: bold;
  font-family: 'Lato',Arial,Helvetica,sans-serif;
  color: #ffffff;
  background-color: #000000;
}

.nav-pills > li > a
{
  border-radius: 3px;
  font-weight: bold;
  font-family: 'Lato',Arial,Helvetica,sans-serif;
  color: #000000;
  background-color: #FABD03;
}

.nav-pills > li > a:hover,
.nav-pills > li > a:focus
{
  color: #ffffff;
  background-color: #000000;
}