/* misc start */
          *{
               margin:0px;
               padding:0px
          }
          
          body{
               font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
          }
          
          .media1140px{
               background-color:#CE9429;
          }
          
          .media768px{
               background-color:#EDD49A;
          }
          
          .media480px{
               background-color:#EFEF34;
          }
          
          .media300px{
               background-color:#82EAFF;
          }
          
          .media1140px, .media768px, .media480px, .media300px{
               padding:15px;
          }
          
          p{
               margin:0 0 20px 0;
          }
          
          .clearb{
               clear:both;
          }
          /* misc end */
          
  /* 
-can be for 7 inch tablets
-This CSS will apply for devices with the minimum width of 480 pixels
 */
@media only screen and (min-width: 480px) {
     #mainHeader {
          background-color:#EFEF34;
     }
     
     nav ul li{
          float:left;
          width:25%;
     }
}        
          
    /*
-10 inch tablets
-This CSS will apply for devices with the minimum width of 768 pixels
*/
@media only screen and (min-width: 768px) {
     #mainHeader {
          background-color:#EDD49A;
     }
     
     #mainSection{
          float: left;
          width: 61%;
     }
     
     #sideBox1{
          float: right;
          width: 30%;
     }
     
}      
 /*
-Desktop computers
-This CSS will apply for devices with the minimum width of 1140 pixels
*/
@media only screen and (min-width: 1140px) {
     #mainHeader {
          background-color:#CE9429;
     }
     
     #responsiveLogo{
          float:left;
          width:30%;
     }
     
     nav{
          float:left;
          width:70%;
     }
     
     nav ul{
          margin:1.5em 0 0 0;
     }
}         
          
          /* header start */
          #mainHeader{
               background-color:#82EAFF;
               padding:0.5em;
               overflow:auto;
          }
           
          /* to make our logo resize automatically */
          #responsiveLogo{
               width:100%;
          }
          
          #responsiveLogo img{
               max-height: 100%;
               max-width: 100%;
          }
          /* header end */
          
          
          
          
          
          /* navigation start */
          nav{
               float:left;
               width:100%;
          }
          
          nav ul{
               list-style-type:none;
               padding:0;
          }
 
          nav ul li{
          
          }
 
          nav ul li a{
               background-color:purple;
               border:thin solid #fff;
               color:#fff;
               display:block;
               height:3em;
               line-height:3em;
               text-align:center;
               text-decoration:none;
               width:100%;
          }
          
          nav ul li a:hover{
               background-color:yellow;
               color:#000;
          }
          /* navigation end */
          
          
          
          
          
          /* middle section start */
          #mainSection{
               background-color: #D9F8F2;
               float: left;
               width: 96%;
          }
          
          #sideBox1{
               background-color: #C9A449;
               width: 96%;
          }
          
          #mainSection, #sideBox1{
               overflow: auto;
               padding:2%;
          }
          /* middle section end */
          
          
          
          /* footer start */
          footer{
               background-color:orange;
               height:50px;
               line-height:50px;
               text-align:center;
               width:100%;
          }
          /* footer end */