Vestride_Shuffle/css/style.css

/*=============================================*\
 $Structure
\*=============================================*/

body {
    margin: 0;
    background-color: #0F0F0F;
    color: #F0F0F0;
    font-family: 'Poly', serif;
}

#main {
    width: 1000px;
    margin: 0 auto;
}


/*=============================================*\
 $General Styles
\*=============================================*/

::-moz-selection{ background: rgb(10, 170, 200); color:#fff; text-shadow: none; }
::selection { background:rgb(10, 170, 200); color:#fff; text-shadow: none; }

h1 {
    font-weight: 400;
    font-size: 200px;
    margin: 0 0 20px;
    text-shadow: 0 1px #000;
    color: #0aaacb;
}

h2 {
    color: #0aaacb;
    font-size: 30px;
    margin: 20px 0;
}

h3 {
    color: #0AAAC8;
}

section {
    margin: 40px 0;
}

p {
    font-style: italic;
}

a {
    color: #0AAAC8;
    text-decoration: none;
    
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
}
a:visited { color: #0AAAC8;}
a:hover { color: #F0F0F0; text-decoration: underline; }
a:focus { outline: thin dotted; }

pre[rel] {
    padding-top: 20px;
    position: relative;
}

pre[rel]::after {
    content: attr(rel);
    font-family: 'Poly', serif;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 16px;
    color: #0AAAC8;
}

/*=============================================*\
 $Header
\*=============================================*/
header h1 {margin-bottom: 0; line-height: 0.9;}
header p {margin-top: 0;}

/*=============================================*\
 $Download options
\*=============================================*/
.downloads a {
    position: relative;
    margin: 0 15px 0 0;
    color: #F0F0F0;
    padding: 5px 15px;
    border: 1px solid #454545;
    
    
    background-color: #333333;
    background-image: -webkit-linear-gradient(top, #333333, #242424); 
    background-image:    -moz-linear-gradient(top, #333333, #242424); 
    background-image:     -ms-linear-gradient(top, #333333, #242424); 
    background-image:      -o-linear-gradient(top, #333333, #242424); 
    background-image:         linear-gradient(top, #333333, #242424);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#242424'); 
   
    
  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
       -o-transition: all 0.2s ease-out;  
          transition: all 0.2s ease-out;  


}

.downloads a:hover {
    text-decoration: none;
    color: #0AAAC8;
    border-color: #0AAAC8;
}

.downloads a:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 170, 200, .15);
}

/*=============================================*\
 $Filter options
\*=============================================*/
.filter {
    position: relative;
    font-size: 17px;
    margin: 20px 0;
}

.filter-container {
    float: left;
    background-color: #2D2D2D;
    width: 230px;
    box-sizing: border-box;
}

.filter-options {
    padding: 0;
    display: inline;
    list-style: none;
}

.filter-options li {
    display: block;
    position: relative;
    margin: 0;
    color: #F0F0F0;
    float: left;
    padding: 5px 15px;
    border: 1px solid #454545;
    
    
    background-color: #333333;
    background-image: -webkit-linear-gradient(top, #333333, #242424); 
    background-image:    -moz-linear-gradient(top, #333333, #242424); 
    background-image:     -ms-linear-gradient(top, #333333, #242424); 
    background-image:      -o-linear-gradient(top, #333333, #242424); 
    background-image:         linear-gradient(top, #333333, #242424);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#242424'); 
   
    
  -webkit-transition: all 0.2s ease-out;  
     -moz-transition: all 0.2s ease-out;  
      -ms-transition: all 0.2s ease-out;  
       -o-transition: all 0.2s ease-out;  
          transition: all 0.2s ease-out;  


}

.filter-options li:first-child {
    border-radius: 5px 0 0 5px;
}

.filter-options li:last-child {
    border-radius: 0 5px 5px 0;
}

.filter-options li:hover,
.filter-options li.active {
    cursor: pointer;
    color: #0AAAC8;
    border-color: #0AAAC8;
}

.filter-options li:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 170, 200, .15);
}


/*=============================================*\
 $Grid items
\*=============================================*/

#grid .item {
    float: left;
    margin: 0 20px 20px 0;
    width: 230px;
    background-color: #2D2D2D;
}

#grid .item-details {
    text-align: right;
    padding: 14px 20px;
}


/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }