/* force DIV to fill at least to the bottom of page.  Use height instead of min-height to fill exactly to the bottom of page, no more. http://stackoverflow.com/a/579123 */
html,body { 
  min-height:100%;
  }
/* NOTE: width: 100%; will force it to at least the width of the DIV
** design decision: horizontal scrolling on large screens? do width 100%
** else, the layout will fluidly resize

/* NOTE: borders are on the exterior of the box model, so will expand beyond that 100%. do not use */

html, body, div, nav, p {
  margin: 0;
  border: 0;
  padding: 0;
  
}

/* p, h1, h2, h3, h4, h5, h6 { */
/*   margin: 0, 2px, 0, 2px; */
/* } */

ul, li {
  padding-bottom: 0;
  margin-bottom: 0;
}

html {
  position: relative;
}

/* if you intend to have a footer */
/* give the body a margine as high as the footer */
/* body { */
/*   margin: 0 0 100px;  */
/* } */

html, body {
  width: 100%;
/*   padding: 3px; */
  padding: 0;
  margin: 0;
  /* prevent iPhone auto font scaling */
  -webkit-text-size-adjust: none;
}


/* NOTE:
** position: fixed which is problematic in older mobile browsers, but
** position:absolute move with the scrolling of the page
*/


body, div, p, h1, h2, h3, h4, h5, h6, ul, li, form, input, textarea, select, table, tr, td, .quote, .smallinput, .smallprint, .news, .errmsg {
  font-family: 'Roboto Condensed', sans-serif;
  text-decoration: none;
  color: #141C26;
}

body { 
  font-size: 16pt;
  background-color: #DDDDDD;
}

h1, h2, h3, h4, h5, h6 {
  color: #D9A25F;
}

h1 { 
  font-size: 21pt;
}

h2 { 
  font-size: 19pt;
}

h3 { 
  font-size: 18pt;
  font-weight: bold;
}

h4 { 
  font-size: 18pt;
}

h5 { 
  font-size: 16pt;
  font-weight: bold;
}

h6 { 
  font-size: 16pt;
}

body, p, ol, ul, li, table, tr,td {
  color: #141C26;
}

p, ol, ul, li, table, tr,td {
  font-size: 16pt;
}

a {
  color: #0000FF;
}

input, textarea, select {
  color: #141C26;
  font-size: 16pt;
}

.quote {
  font-family: "Times New Roman", Times, serif; 
  font-size: 14pt; 
  font-style: italic; 
  font-weight: bold; 
  color: #666666
}

.smallinput {
  font-size: 7pt;
  background-color: #F2F2F2
}

.smallprint { 
  font-size: 7pt; 
  color: #141C26; 
  background-color: #F2F2F2
}

.news { 
  font-size: 10pt;
  font-style: normal; 
  font-weight: bold; 
  color: #FF0000; 
  background-color: #FFFF99
}

.errmsg { 
  color: #FF0000
}

/*****
LAYOUT
*****/

#yl_exterior {
  width: 960px;
  background: #F2F2F2;
  border: 0;
  padding: 0;
  /* center horizontally on html page */
  margin: 0px auto;
/*   height: 100%; */
  overflow: hidden;
}

#yl_outer_header {
  background-color: #F2F2F2;
  position: fixed;
  box-shadow: 0px 0px 9px 7px #F2F2F2;
  -webkit-box-shadow: 0px 0px 9px 7px #F2F2F2;
}

#yl_inner_header {
  height: 50px;
  width: 960px;
  border: 0;
  padding: 0;
  margin: 0px auto;
  position: relative;
}

/* -- content container -- */
#yl_content {
  width: 960px;
  height: 100%;
  border: 0;
  margin: 0px auto;
  -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
       -o-transition: all .5s ease;
          transition: all .5s ease;
}

.yl_page {
  padding: 10px 3px 10px 3px;
  min-height: 400px;
  margin: 0;
  box-shadow: 0px 0px 7px 5px #FFF;
  -webkit-box-shadow: 0px 0px 9px 7px #FFF;
}

.yl_pic {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  display: block;
}

.yl_page img {
  padding: 0;
  border: 0;
  margin: 0;
  position: absolute;
  /* synchronize left with yl_page left padding */
  left: -3px;
  width: 100%;
  display: block;
} 


.ylpage p {
    padding: 2px 2px 2px 2px;
}

.yl_column {
    width: 33%;
    float: left;
}

/* if using a footer edid body margin in reset above*/
#yl_footer {
  clear: both;
  position: absolute;
  border: 0;
  padding: 0;
  margin: 0px auto;
  left: 0;
  bottom: 0;
  height: 100px; /* keep in sync with body margin above */
  width: 960px;
}

/**************
NAVIGATION MENU
**************/

#yl_nav_button {
  font-size: 16pt;
  cursor: pointer;
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #294A59;
  border: 3px;
  /* same height as yl_inner_header */
  height: 50px;
  width: 50px;
}

#yl_nav_icon {
  font-size: 27pt;
  color: #F2F2F2;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}

#yl_menu {
  display: block;
  background: #294A59;
  border-right: 1px solid #ddd;
  color: #F2F2F2;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  z-index: 100;
  opacity: 0.8;
  overflow: hidden;
}

#yl_menu a {
  display: block;
  margin: 10px 3px 10px 3px; 
}

#yl_menu a:link {
  padding: 3px;
  color: #F2F2F2;
  text-decoration: none;
}

#yl_menu a:visited {
  color: #F2F2F2;
  text-decoration: none;
}

#yl_menu li {
  border-bottom: 1px solid #F2F2F2;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  }

  #yl_menu ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  }

/********
Alert BOX
********/

/* Icon ie_warning.png from http://tango.freedesktop.org/ (Public Domain) */
/* http://commons.wikimedia.org/wiki/Tango_icons */
/* http://commons.wikimedia.org/wiki/File:Dialog-warning.svg */
#yl-alert {
  opacity: 0.8;
  display: block;
  background: #ffd url(/img/dialog-warning.png) no-repeat;
  background-position: left 4px top 4px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #CCCC00;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16pt;
  color: #000;
  text-align: left;
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 254;
}

#yl-alert-inside {
   padding: 5px 0px 0px 50px;
   position: relative;
}

#yl-alert a {
    text-decoration: underline;
}

#yl-close-alert-button {
  cursor: pointer;
  margin: 0;
  border: 0;
  padding: 0;
  position: absolute;
  top: 6px;
  right: 6px;
  height: 16px;
  width: 16px;
  background: url(/img/process-stop.png) no-repeat;
  float: right;
}

.yl_alert-issue {
  font-weight: bold;
}

#yl-alert p {
     margin: 0 28px 10px 0;
     border: 0;
     padding: 0;
}