BookStore CSS

@charset "UTF-8";

/****
Created by: Imran Ziad
Email: imranziad@gmail.com
****/

@font-face {
    font-family: 'ProximaNova-Light';
    src: url('font/ProximaNova-Light.eot');
    src: url('font/ProximaNova-Light.eot?#iefix') format('embedded-opentype'),
         url('font/ProximaNova-Light.woff') format('woff'),
         url('font/ProximaNova-Light.ttf') format('truetype'),
         url('font/ProximaNova-Light.svg#ProximaNova-Light') format('svg');
    font-weight: normal;
    font-style: normal;

}

@-ms-viewport{
width: device-width;
}

*{
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html{
margin: 0;
padding: 0;
font:100%/1.5em 'ProximaNova-Light', Helvetica, sans-serif;
min-height: 100%;
}

body{
margin: 0;
padding: 0;
min-height: 100%;
color: #78829D;
font-size: 1em;
}

.container{
min-width: 1000px;
max-width: 1800px;
overflow: hidden;
margin: 0 auto;
}

a{
text-decoration: none;
color: #78829D;
}
ul{
list-style-type: none;
}

/* Header */

header{
width: 100%;
background-color: #2F364A;
position: relative;
}

/* LOGO */

.logo{
display: block;
float: left;
width: 20%;
height: 100%;
margin: 0 1em;
position: relative;
vertical-align: middle;
}

.logo a{
color: #78829D;
font-size: 0.6em;
font-weight: bold;
height: 100%;
vertical-align: middle;
position: relative;
display: block;
padding: 0.75em 0;
}

.logo a .fa{
padding-right: 0.2em;
}

/* Top Navigation */

.top-nav{
float: right;
position: relative;
display: block;
}

.top-menu{
display: block;
}
.top-menu li{
display: inline-block;
}
.top-menu li a{
vertical-align: middle;
height: 100%;
padding: 1.25em 1em;
}

.top-menu li a:hover{
background-color: #444A5C;
color: #f1f1f1;
}

.menu-profile{
cursor: pointer;
background-color: #15A4FA;
padding: 0.6em 1em;
color: #f1f1f1;
}
.menu-profile:hover{
background-color: #15A4FA;
}
.gravatar{
margin: 0;
padding: 0;
margin-right: 0.7em;
display: inline-block;
width: 2.3em;
border: 0.15em solid #f1f1f1;
height: 2.3em;

-moz-border-radius:50%;
-webkit-border-radius:50%;
-khtml-border-radius:50%;
border-radius:50%;
overflow: hidden;
vertical-align: middle;
}
.gravatar img{
min-width: 2.3em;
min-height: 2.3em;
}
.menu-profile .fa{
padding-left: 0.7em;
}

/* Top Drop Menu */
 .top-drop-menu{
  display: none;
  z-index: 900;
  clear: both;
  position: absolute;
  width: 11.3em;
  margin-top: 0.5em;
  margin-left: -1em;
 }

 .menu-profile:hover .top-drop-menu{
  display: block;
 }
 .top-drop-menu li{
  display: block;
  width: 100%;
  background-color: #15A4FA;
  border-bottom: 0.1em solid #1394E1;
 }

 .top-drop-menu li:last-child{
  border-bottom: none;
 }

 .top-drop-menu li a{
  display: block;
  padding: 0.8em 1em;
  color: #f1f1f1;
  font-size: 0.9em;
 }
 .top-drop-menu li:nth-child(2){
  font-weight: bold;
 }

.top-drop-menu li a .fa{
padding-right: 0.5em;
}

/* ASIDE */
aside{
clear: both;
width: 15%;
height: 100%;
margin: 0;
padding: 0;
display: block;
float: left;
position: relative;
background-color: #181E2C;
overflow: hidden;
height: 56em;
}

.sidebar-bg{
background-color: #1F2637;
margin-bottom: 0.5em;
font-size: 0.95em;
display: block;
border-top:1px solid #313543;
border-bottom: 1px ridge #22252F;
}

.add-book{
padding: 2.5em 0;
border-top: none!important;
}

.add-book a{
display: block;
width: 80%;
margin: 0 auto;
height: 3em;
font-size: 1em;
text-align: center;
line-height: 3em;
-moz-border-radius:0.2em;
-webkit-border-radius:0.2em;
-khtml-border-radius:0.2em;
border-radius: 0.2em;
color: #f1f1f1;
text-transform: uppercase;
font-weight: 900;
background-color: #F2795A;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.add-book a .fa{
padding-right: 0.3em;
}

.add-book a:hover{
background-color: #15A4FA;
}

.sidebar-menu li{
display: block;
padding:0;
margin: 0;
}

.sidebar-menu li a, .categories li a{
display: block;
padding: 0.7em 1em;
}

.sidebar-menu li a:hover, .categories li a:hover, .sidebar-menu li:nth-child(2) a{
background-color: #15A4FA;
color: #f1f1f1;
}

.sidebar-menu li a .fa, .categories li a .fa{
padding-right: 0.5em;
}

.categories li a .fa{
font-size: 0.5em;
}
.categories li a:hover .fa{
color: #f1f1f1!important;
}

.categories li:nth-child(1) a .fa{
color: #D94963;
}
.categories li:nth-child(2) a .fa{
color: #FFAB00;
}
.categories li:nth-child(3) a .fa{
color: #00BFDD;
}
.categories li:nth-child(4) a .fa{
color: #726FC5;
}

.history{
margin-bottom: 0;
padding-bottom: 2em;
}

.history li{
display: block;
padding: 2em 0.5em 0 1.5em;
font-size: 0.95em;
}
.history li .fa{
margin-left: -0.5em;
float: left;
line-height: 1em;
}

.history li p{
margin-top: -0.25em;
padding-left: 1em;
font-size: 0.95em;
color: #545D74;
}

.history li p a{
color: #677B92;
}

.history li p a:hover{
color: #f1f1f1;
}

.history .history-date{
margin-top: 0.7em;
}

/* SECTION */

section{
display: block;
float: left;
width: 85%;
position: relative;
margin: 0;
padding: 0;
height: 56em;
overflow: hidden;
}


/******* Section Header **********/

.section-header{
width: 100%;
display: block;
position: relative;
vertical-align: middle;
background-color: #EEF1F7;
border-bottom: 0.1em solid #DADFEA;
}

.section-header h2{
margin: 0;
display: block;
padding: 0em 1em;
vertical-align: middle;
color: #505460;
font-size: 1.5em;
width: 100%;
height: 3em;
line-height: 3em;
}

.section-nav{
display: block;
position: relative;
background-color: #EEF1F7;
width: 100%;
height: 3em;
border-top: 0.1em solid #F4F6FA;
border-bottom: 0.1em solid #DADFEA;
}

.section-menu{
float: left;
display: block;
}

.tab-menu{
display: block;
margin-left: 1em;
height: 3em;
width: 100%;
}

.tab-menu li{
display: inline-block;
font-size: 0.85em;
height: 1.8em;
line-height: 1em;
margin: 0.7em 0em 0.6em 1em;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
vertical-align: middle;
-moz-border-radius:1em;
-webkit-border-radius:1em;
-khtml-border-radius:1em;
border-radius: 1em;
}

.tab-menu li:hover,.tab-menu li:active, .tab-menu li.active{
background-color: #97B3CE;
color: #f1f1f1;
cursor: pointer;
}

.search{
float: right;
display: block;
width: 35%;
}

.search form{
display: block;
padding-left: 1em;
padding-right: 1em;
right: 1em;
line-height: 2.75em;
vertical-align: middle;
}

.search form input{
width: 90%;
height: 2.5em;
-moz-border-radius:1.25em;
-webkit-border-radius:1.25em;
-khtml-border-radius:1.25em;
border-radius: 1.25em;
vertical-align: middle;
padding: 0em 1em;
font-size: 0.85em;
background-color:#fff;
border: 1px solid #d0d0d0;
}

.search form input:focus{
outline: none;
}

.search form .fa{
margin-left: -2em;
font-size: 0.85em;
}

/*********** Tabs **************/

.tab1, .tab2, .tab3, .tab4{
display: none;
position: relative;
overflow: auto;
}
.active{
display: block;
}

/*********** Book Box **************/

.section-body{
width: 100%;
height: 48.5em;
overflow: auto;
}


.book-box{
width: 20%;
height: 330px;
display: block;
position: relative;
overflow: hidden;
float: left;
margin: 2em 0 1em 0;
}

.book-poster, .book-poster img{
width: 180px;
height: 248px;
margin: 0 auto;
padding: 0;
-moz-border-radius:0.3em;
-webkit-border-radius:0.3em;
-khtml-border-radius:0.3em;
border-radius:0.3em;
cursor: pointer;
}

.book-caption{
margin: 0.5em auto;
width: 180px;
}

h3.book-title{
padding: 0;
margin: 0;
margin-bottom: -0.2em;
}
.book-title a{
color: #505460;
font-size: 0.9em;
font-weight: bold;
}
.book-writer{
font-size: 0.9em;
}

.book-rating{
display: block;
margin-top: 0.2em;
}
.book-rating ul{
display: block;
}
.book-rating ul li{
display: inline-block;
padding: 0 0.1em;
color: #FFAB00;
cursor: pointer;
}

/* Footer */

footer{
clear: both;
width: 100%;
margin: 0;
padding: 0;
display: block;
position: relative;
background-color: #181E2C;
overflow: hidden;
}

.footer-menu{
float: right;
display: block;
}
.footer-menu li{
display: inline-block;
}
.footer-menu li a{
display: block;
color: #f1f1f1;
font-size: 1em;
padding: 0.7em 1.2em;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.footer-menu li a:hover{
background-color: #15A4FA;
}

/*********** transition **************/

.top-menu li a, .menu-profile, .top-drop-menu, .sidebar-menu li a, .categories li a, .history li p a, .tab-menu li{
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition:all 0.3s ease-out;
}


/*********** mediaqueries **************/

@media only screen and (max-width: 1020px){
.book-box{width: 25%;}
}

@media only screen and (min-width: 1020px){
.book-box{width: 25%;}
}

@media only screen and (min-width: 1280px){
.book-box{width: 20%;}
}

@media only screen and (min-width: 1600px){
.book-box{width: 16.6666667%;}
}


/*********** ClearFix CSS **************/

.clearfix:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix{
zoom: 1;
}

Learn More :

Share this

Share on FacebookPlus on Google+