body{
         margin:0px;
         padding:0px;
         background-color:#fff;
         font: 15px/1.5 calibri, arial, sans-serif;
    }

/********************** Global ********************/


.container{
          width:80%; 
          margin:auto;
          overflow:hidden;
         }
    ul{
             margin:0px;
             padding:0px;

     }
     
   .btn1{
        height:40px; 
        border:1px #55B17E solid;
        background-color: #48BEDB;
        padding:10px 10px 20px 10px;
        width:250px;
        margin-top:20px;
        color:#fff;
        text-align:center;
        font-size: 16px
      }
     
     
/********************** Header ********************/

    header{
           min-height: 80px;
           padding-top:30px;
           border-bottom: 3px #48BEDB solid;
           color:#3095E0;
           text-transform: uppercase;
           text-decoration: none;
           font-size: 16px

    }

    header span {
             color:cadetblue        
    }

    header a:link {text-decoration: none; color:#3095E0}

    header a:visited {text-decoration: none; color: #3095E0}

    header a:hover {text-decoration: none; color:#b61111;}

    header li{
             display: inline;
             float:left;
             padding: 0 20px 0 20px;

    }

    header #logo{float:left}

    header #logo h1{float:left; margin:10px 60px 20px 10px; font-size:24px}

    header #call p {float:right; margin:10px 15px 0px 30px; font-size:20px}

    header nav{float:right; margin-top:15px }


/********************** showcase ********************/

    #showcase{

            background:url(../images/limeret-header1.jpg) no-repeat 0 -60px;
            min-height: 400px;
    }


    .highlight{background-color:#AEDBD9; margin-bottom:30px; padding-bottom: 30px}

    .highlight h1{color:#fff; font-size:36px; margin:10px 0 5px 5px}

    .highlight p{font-size:16px}


/********************** Front boxes ********************/

    #box1{float:left; width:20%; margin:0px 20px 0px 0px}

    #box2{float:left; width:20%; margin:0px 20px 20px 0px; text-align: center}

    #box3{float:left; width:20%; margin:0px 20px 20px 0px; text-align: center}

    #box4{float:left; width:20%; margin:0px 20px 20px 0px; text-align: center}


    #box1 ul li {list-style:none; 
                 line-height:10px}

    #box1 form {padding:10px}

    #box1 input[type="text"], #box1 input[type="email"], #box1 input[type="tel"] 
               {width:90%;
                height:30px;
                border:1px #55B17E solid;
                padding:5px; 
                font-size: 14px;
                border-radius: 5px}
           
        
    #box1 textarea
               {width:90%;
                border:1px #55B17E solid;
                padding:5px;
                font-size: 14px;
                border-radius: 5px}


    #box2 img, #box3 img, #box4 img{width:100%;margin:auto; border:1px #55B17E solid}

    select{
          -webkit-appearance: none;
          -moz-appearance: none;
          -ms-appearance:none;
          appearance: none;
          display: block;
          padding:10px; 
          border:1px #55B17E solid;
          font-size: 14px;
          width:93%;
          border-radius: 5px;
          margin-top:10px;
          height:45px;
      }
   
  
/********************* Content inside pages *****************/
  
    .main_content{float:left; width:65%; padding:20px; margin: 0px 0px 10px 0px; border:1px #55B17E solid}

    .main_content article p {width:65%; padding:10px}

    aside{float:right; width:25%; padding:20px; border:1px #55B17E solid}

    aside form{margin:auto; padding: 0px 0px 10px 20px}
 
    aside form input[type="text"], aside form input[type="email"], aside form input[type="tel"] 
              {width:88%;
               height:30px;
               border:1px #55B17E solid;
               padding:5px; 
               font-size: 14px;
               border-radius: 5px}

    aside form textarea, aside form select
              {width:88%;
               border:1px #55B17E solid;
               padding:5px;
               font-size: 14px;
               border-radius: 5px} 

    aside ul li{list-style: none}
  
    aside h3, .main_content h3 {padding-left:20px; color:#3095E0; font-size: 20px}

   .main_content img{width:90%; border:1px #55B17E solid}

   .main_content span {color:#3095E0;  font-size: 16px}

   .main_content ol li {margin: 10px 0px 10px 20px}

   .main_content ol p {margin: 5px 0px 5px 20px}
   
   
/********************* Ad section *****************/
 
    #adsec {background-color: #48BEDB; padding:10px; margin:40px 0px 40px 0px}  

    #adsec #call p {font-size:26px; color:#fff; margin:0px; padding:10px; text-align: center}   
  
    #adsec #call a {text-decoration: none; color:#fff;}

    .adsection { 
           float:none; 
           text-align: center; 
           } 
           
    .adsection h1{ 
              color:#fff; 
              font-size: 30px
           } 
           
    .adsection p{ 
              color:#fff; font-size: 18px
           } 
  
    fieldset {border:1px #55B17E solid}

/********************** Footer ********************/

    footer{background-color:#BADCDB; 
             text-align: center;
               padding-top:30px;
               border-top:2px #55B17E solid;
               }

    footer p{
        margin-top: 5px;
        font-size: 12px;
        text-align:center;
        padding: 5px 40px 0 40px}


    footer #call p {font-size:20px; color:#fff; margin:0px; padding:5px;}

    footer #call a {text-decoration: none; color:#fff;}



/************ media size 800px **********/
@media (max-width:320px)
{
   header
   {float:none;  
    text-align: center;
    }
    
   header #logo, header #call p {width:100%}
   
   header nav li {display:none}
   
   header h1 {width:100%; font-size: 26px;}
   
   header #call p {font-size: 20px; margin-bottom: 20px}
   
   
    #showcase{

            background:url(../images/limeret-header1.jpg) no-repeat 0 -60px;
            min-height: 250px;
    }
    
    #showcase img{width:50%}
    
    .btn1{
        height:40px; 
        border:1px #55B17E solid;
        background-color: #48BEDB;
        padding:10px 10px 20px 10px;
        width:200px;
        margin-top:20px;
        color:#fff;
        text-align:center;
        font-size: 16px
      }
    
   
   #box1 {width:75%; margin:0px 0px 20px 5px; float:none} 
   
   #box1 input[type="text"], input[type="email"], input[type="tel"]  
       {width:85%;
            height:30px;
            border:1px #55B17E solid;
            
            }
            
   Select{width:85%}        
       
   #box1 textarea, button {width:85%;
            border:1px #55B17E solid;
            }
            
   #box2 {width:70%; margin:0px 0px 20px 5px; float:none} 
   
   #box3 {width:70%; margin:0px 0px 20px 5px; float:none} 
   
   #box4 {width:70%; margin:0px 0px 20px 5px; float:none} 
   
   .adsection {width:80%; margin:0px 0px 20px 20px; float:none; text-align: center} 
   
   footer #call p {font-size:20px; color:#fff; display:block; width:100%}

   footer #call a {text-decoration: none; color:#fff;display:block; width:100%}
   
   .highlight h1, .highlight p {text-align: center; float:none}
   
   .main_content {width:95%; float:none; margin-bottom: 30px}
  
   .main_content img {width:90%}
   
   aside{width:75%; margin:auto; float:none; clear:both}
   
   aside form{padding:0px 0px 10px 5px}
  
}

/********************* cell phones ***************/
@media (max-width:768px)
{
   header
   {float:none;  
    text-align: center;
    }
    
   header #logo, header #call p {width:100%}
   
   header nav li {display:none}
   
   header h1 {width:100%; font-size: 26px;}
   
   header #call p {font-size: 20px; margin-bottom: 20px}
   
   .btn1{
        height:40px; 
        border:1px #55B17E solid;
        background-color: #48BEDB;
        padding:10px 10px 20px 10px;
        width:200px;
        margin-top:20px;
        color:#fff;
        text-align:center;
        font-size: 16px
      }
   
   #box1 {width:88%; margin:0px 0px 20px 5px; float:none} 
   
   #box1 input[type="text"], input[type="email"], input[type="tel"]  
       {width:90%;
            height:30px;
            border:1px #55B17E solid;
            
            }
            
   Select{width:93%}        
       
   #box1 textarea, button {width:90%;
            border:1px #55B17E solid;
            }
            
   #box2 {width:88%; margin:0px 0px 20px 5px; float:none} 
   
   #box3 {width:88%; margin:0px 0px 20px 5px; float:none} 
   
   #box4 {width:88%; margin:0px 0px 20px 5px; float:none} 
   
   .adsection {width:80%; margin:0px 0px 20px 20px; float:none; text-align: center} 
   
   footer #call p {font-size:20px; color:#fff; display:block; width:100%}

   footer #call a {text-decoration: none; color:#fff;display:block; width:100%}
   
   .highlight h1, .highlight p {text-align: center; float:none}
   
   .main_content {width:88%; float:none; margin-bottom: 30px}
  
   .main_content img {width:100%}
   
   aside{width:75%; margin:auto; float:none; clear:both}
  
}