body{
    background:#ffffff;
    font-family:'Open Sans', sans-serif;
    color:#666666;
    line-height:1.7em;
    text-align:left;
}

#screen_width{
    position:absolute;
    top:-5px;
    left:0;
    color:#fff;
    font-size:10px;
}

p{
    padding:5px 0;   
}

a{
    text-decoration:none;
    color:#888888;
}

a:hover{
    color:#cccccc;   
}

h1{
    font-size:37px;
    font-weight:bold;
    padding:10px 0;
    color:#353535;
    line-height:1em;
}

h3{
    font-size:24px;
    padding:5px 0;
}

.clr{
    clear:both;   
}

.pull-right{
    float:right; 
    padding:10px;
}

.pull-left{
    float:left; 
    padding:10px;
}

.image100{
    width:100%;   
}

.container{
    margin:0 auto;
    width:90%;
    overflow:auto;
    clear:both;
}

.main-header{
    background:#ffffff;
    border-top:#353535 15px solid;
    overflow:auto;
    width:100%;
    box-shadow: 0 3px 3px -3px;
}

.main-header .logo{
    width:25%;
    float:left;
    padding-top:10px;
}

.main-header .main-nav{
    width:70%;
    float:right;
    padding-top:20px;
}

.main-header .main-nav ul{
    float:right;   
}

.main-nav ul li{
    float:left;
    display:inline;
    margin-right:3px;
}

.main-nav ul li a{
    display:inline-block;
    padding:10px 20px;
}

.main-nav ul li a:hover,.main-nav ul li a.active{
     border-bottom:#73b819 solid 2px;  
    padding-bottom:34px;
}

#showcase{
    padding:50px 0;
    margin-top:2px;
    background:#eceded url(../images/texture.png);
    border-bottom:1px #cccccc solid;
}

.showcase-right{
    width:50%;
    float:right;
}

.showcase-right img{
    width:100%;   
}

.showcase-left{
    width:45%;
    float:left;
}

.box3{
    width:33%;
    float:left;
    overflow:auto;
    padding-top:20px
}

.box3 img{
    float:left;
    padding:5px 10px 0 0;
}

#content{
    overflow:auto;
    width:67%;
    float:left;
    margin-top:20px;
}

#sidebar{
    width:30%;
    float:right;
    margin-top:20px;
    padding-left:10px;
}

ul.list-group{
    border:1px #cccccc solid;
    border-radius:5px;
    padding:10px 20px;
}

.list-group li{
    padding:5px 0;
    border-bottom:1px #cccccc dashed;
}

/* Sticky Footer Code */

html,body{
    height:100%;   
}

#wrap{
    min-height:100%;
    margin-bottom:-80px;
}

#wrap:after{
    content:"";
    display:block;
}

footer,#wrap:after{
    height:80px;   
}

footer{
    background:#353535;
    border-top:3px #000000 solid;
    margin:10px 0 10px 0;
}

footer p{
    color:#ffffff;
    margin:0;
    padding:10px 0 0 0;
    text-align:center;
}

/* Start Media Queries */

/* iPads and Small Laptops */
@media only screen and (min-width: 768px) and (max-width: 1100px){
    .main-nav ul li a{
        padding:10px 10px;
    }
    
    h1{
        font-size:30px;
        padding:5px 0;
    }
    
    h3{
        font-size:20px;
    }
    
    #showcase{
        padding:30px 0;
    }
    
    .box3{
        text-align:center;
    }

    .box3 img{
        float:none;
        margin:0 auto -30px auto;
        width:30%;
        display:block;
    }
}


/* Smartphones and small tablets */
@media only screen and (min-width: 240px) and (max-width: 767px){
    h1,h2,h3,h4,h5,h6{
        text-align:center;
    }
    
    /* Header */
   .main-header .logo{
        width:60%;
        float:none;
        display:block;
        margin:auto;
    }
    
    .main-header .logo img{
        width:100%;
        margin:auto;
    }
    
    /* Navigation */
    .main-header .main-nav{
        width:100%;
        float:none;
        display:block;
        padding-top:10px;
    }

    .main-header .main-nav ul{
        float:right;  
        margin:0;
        padding:0;
        text-align:center;
        margin:auto;
        width:100%;
    }

    .main-header .main-nav ul li{
        float:none;
        display:block;
        margin:0;
    }

    .main-header .main-nav ul li a{
        display:block;
        padding:10px 20px;
        border-bottom:1px dashed #cccccc;
    }
    
    .main-header .main-nav li:last-child a{
        border:0;   
    }

    .main-header .main-nav ul li a:hover,.main-header .main-nav ul li a.active{
        border:0;
        background:#e7e5e2;
        padding:10px 20px;
    }
    
    /* Showcase */
    #showcase{
        text-align:center;
    }

    .showcase-right{
        width:100%;
        float:none;
    }

    .showcase-right img{
        width:100%;   
    }

    .showcase-left{
        width:100%;
        float:none;
    }
    /* 3 Boxes */
    .box3{
        width:100%;
        float:none;
        clear:both;
        border-bottom:1px #cccccc dashed;
    }

    .box3 img{
        float:left;
        padding:5px 10px 0 0;
    }
    
    /* Main Content */
    #content{
        width:100%;
        float:none;
        display:block;
        text-align:center;
    }

    #sidebar{
        width:95%;
        float:none;
        display:block;
        text-align:center;
    }
    
    .pull-right,.pull-left{
        float:none;
        display:block;
    }
}