/****************************************************
Mobile device styles - portrait
****************************************************/
@media only screen and (max-device-width: 760px) and (orientation: portrait){
    
    #header{
      position:relative; 
      display:block;
      height:20%;
      width:100%;
    }

    #hleft {float:left; position:relative; width:100%; left:0px; }
    #hleft img{width:80%}
    #hright {float:right; position:relative; width:45%; right:0px; }
    #hmiddle {float:left; position:relative; width:45%; left:0px; }
    #hmiddle img,#hright img{height:50px;}

    #main{
      background-color:#FFFFFF;
      position:relative; 
      display:block;
      width:100%;
    }

    #body{
      position:relative; 
      display:block;
      clear:both;
      width:100%;
    }

    #bleft {position:relative; width:100%; left:0px;}
    #bright {position:relative; width:100%; left:0px;}
    #bmiddle {margin-left:2px; margin-right:2px; margin-top:0px; display:block; width:100%;} 
    
    hr{width:100%; margin-top:8px; margin-bottom:8px;}
    /******************************
        Menu Styles - Mobile
    ******************************/

    ul.menu{
        background-color:#EEEEEE;
        padding-left:0px;
        margin-left:0px;
        padding-top:0px;
        margin-top:0px;
        width:100%;
    }

    ul.menu li{
        list-style-type: none;       /* removes the bullet points */
        color:#990000;
        cursor:pointer;
        border-left:#CCCCCC solid 1px;
        border-right:#CCCCCC solid 1px;
        border-top:#CCCCCC solid 1px;
        font-size:2em;
        font-weight:bold;
        margin-left:0px;
        padding:4px;
        position:relative;	
    }

      ul.menu li.libottom{
        list-style-type: none;       /* removes the bullet points */
        color:#990000;
        background-color:#EEEEEE;
        border-bottom:#CCCCCC solid 1px;
        border-left:#CCCCCC solid 1px;
        border-right:#CCCCCC solid 1px;
        border-top:#CCCCCC solid 1px;
        font-size:2em;
        font-weight:bold;
        padding:4px;
        margin-left:0px;
        position:relative;
      }

      ul.menu a, ul.menu ul a{
              color:#990000;
              font-weight:bold;
              text-decoration:none;
              width:100%;
      }

      ul.menu li:HOVER{
              background-color:#DDDDDD;
      }
      
    #menunotes{
	color:#990000;
	background-color:#EEEEEE;
	border:#CCCCCC solid 1px;
	height:80px;
	margin-top:-5px;
        margin-bottom:8px;
	padding:2px;
	width:100%;
    }
    
   .maroon9 {
    color:#990000;
    font-size:2em;
  }
  
  .notes {
    color:#666666;
    font-size:3em;
  }
  
    h2 {
	color: #990000;
	font-weight: bold;
	font-size: 1.5em;
	margin-top:0px;
	white-space: nowrap;
	width:95%;
    }
    div.contentpanel{
	font-size: 2em;
	margin-top:0px;
    }
    
    #footer{
      position:relative; 
      display:block;
      clear:both;
      color:#666666;
      font-size:1.8em;
      margin-top:10px;
    }
}

/******************************************
  Mobile Styles - landscape
******************************************/ 
@media only screen and (max-device-width: 760px) and (orientation: landscape)
{
    #header{
      position:relative; 
      display:block;
      height:65px;
      width:100%;
    }

    #hleft {float:left; position:relative; width:66.67%; left:0px; }
    #hleft img{height:80%}
    #hright {float:right; position:relative; width:16.67%; left:0px; }
    #hmiddle {margin-left:10px; margin-right:10px; margin-top:10px; position:relative; display:block; height:1%;}
    #hmiddle img,#hright img{height:25px;}
    
    #main{
      background-color:#FFFFFF;
      position:relative; 
      display:block;
      width:100%;
    }

    #body{
      position:relative; 
      display:block;
      clear:both;
      width:100%;
    }

    #bleft {float:left; position:relative; width:25%; left:0px;}
    #bright {float:right; clear:right;  position:relative; width:0px; left:0px;}
    #bmiddle {float:left; margin-top:0px; display:block; width:72%;}
    
    .maroon9 {
    color:#990000;
    font-size:1.5em;
    }
    
   .notes {
    color:#666666;
    font-size:1.2em;
  }
    
    h2{
	color: #990000;
	font-weight: bold;
	font-size: 1.5em;
	margin-top:0px;
	white-space: nowrap;
	width:95%;
    }
    
    div.contentpanel{
	font-size: 0.9em;
	margin-top:0px;
    }
    
    hr{width:100%;}
    
    #footer{
      position:relative; 
      display:block;
      clear:both;
      color:#666666;
      font-size:1em;
      margin-top: 10px;
      width:100%;
    }
    
  /******************************
    Menu Styles
  ******************************/

  ul.menu{
          background-color:#EEEEEE;
          padding-left:0px;
          margin-left:0px;
          padding-top:0px;
          margin-top:0px;
          width:94%;
  }

  ul.menu li{
          list-style-type: none;       /* removes the bullet points */
          color:#990000;
          cursor:pointer;
      border-left:#CCCCCC solid 1px;
      border-right:#CCCCCC solid 1px;
      border-top:#CCCCCC solid 1px;
          font-size:1.5em;
          font-weight:bold;
          margin-left:0px;
          padding:4px;
          position:relative;	
  }

  ul.menu li.libottom{
          list-style-type: none;       /* removes the bullet points */
          color:#990000;
          background-color:#EEEEEE;
          border-bottom:#CCCCCC solid 1px;
      border-left:#CCCCCC solid 1px;
      border-right:#CCCCCC solid 1px;
      border-top:#CCCCCC solid 1px;
          font-size:1.5em;
          font-weight:bold;
          padding:4px;
          margin-left:0px;
          position:relative;
  }

  ul.menu li > ul {
    display: none;
    position: absolute;          /* make child blocks hover without leaving space for them */
    top: -1px;                    /* position slightly lower than the parent menu item */
    left: 128px;                  								  
  }

  ul.menu li:HOVER > ul{ 
          display:block;
  }

  ul.menu a, ul.menu ul a{
          color:#990000;
          font-weight:bold;
          text-decoration:none;
          width:100%;
  }

  ul.menu li:HOVER{
          background-color:#DDDDDD;
  }
  
    #menunotes{
	color:#990000;
	background-color:#EEEEEE;
	border:#CCCCCC solid 1px;
	height:80px;
	margin-top:-5px;
	padding:2px;
	width:93%;
    }
}