/* CSS Document */

/* From 0 to 480px width */
@media screen and (min-width: 0px) {

	div#mainwrapper
  {
    width: 100%;
  }
  
  div#leftcontainer
  {
    float: none;
    width: 100%;
    max-width: 100%;
    padding-right: 0px;
  }
  
  div#rightcontainer
  {
    width: 100%;
  }
  
  nav
  {
    margin-bottom: 10px;
  }
  div.menu, div#usermenu, div.help, div#newsbox
  {
    width: 25%;
    padding: 2%;
    display: none;
  }
  div#newsbox, #breaknewsbox, div.help
  {
    display: none;
  }
  .menu ul li
  {
    /*display: inline-block;*/
    min-height: 20px;
  }
}

/*from 480 to 768 px width*/
@media screen and (min-width: 480px) {

}

@media screen and (min-width: 768px) {

	div#mainwrapper
  {
    width: 768px;
  }
  div#newsbox
  {
    
  }
  div#newsbox
  {
    min-height: 110px;
    height: 110px;
    width: 300px;
    display: inline;
  }
  
  .newssummary
  {
    display: none;
  }
  div.newsboxcontent
  {
    position: relative;
    top: 0px;
    height: 100%;
  }
  
  div.newstext
  {
    position: absolute; 
    bottom: 20px;
    width: 300px;
  }
  
  
  
    
}
@media screen and (min-width: 992px) {

	div#mainwrapper
  {
    width: 992px;
  }
  
  div.menu, div#usermenu, div.help, div#newsbox
  {
    display: inline-block;
  }
  
  div.menudropdown
  {
    display: none;
  }
  
  nav
  {
    margin-bottom: 90px;
  }
  div#topmenu
  { 
  }
  
  div#leftcontainer
  {
    float: left;
    width: 20%;
    max-width: 20%;  
    
    /* The below will create a 20 px gutter between columns without making the div larger than 20%  **/
    padding-right: 20px; 
  }
  
  div#rightcontainer
  {
    float: left;
    width: 80%;
  }
  
  div.help
  {
    display: inline;
  }
  
  div#newsbox
  {
    min-height: 210px;
    height: 210px;
  }
  
  .newssummary
  {
    display: block;
  }
  
  div.newstext
{
  text-align: left;
  padding: 10px 10px 10px 10px;
  position: absolute; 
  bottom: 0px;
  background: rgba(33, 33, 33, 0.8); 
  color: white;
  width: 90%;
}
  
    
  div.menu
  {
    width: 86%;
    max-width: 86%; 
    min-height: 185px;
    margin-right: 20px;
    margin-bottom: 20px;   
    padding: 7%;
    float: left;
      
  }
  
  div#usermenu, div.help
  {
    width: 86%;
    max-width: 86%;
    /*margin-right: 20px; */
    margin-bottom: 20px;   
    padding: 7%;
    float: left; 
  }
  
  div#newsbox
  {
    width: 86%;
    max-width: 86%; 
    min-height: 185px;
    padding: 7%;
    }
    
    div.newsboxcontent
  {
    height: 190px;
  }

}

@media screen and (min-width: 1382px)
{
  div#mainwrapper
  {
    width: 992px;
    margin: 0px auto 0px auto;
  }
  
}