cops/style.css
Thomas Severinsen 6a58a81b21 New theme, updated to HTML5
New style.css to reflect the update to html5
several changes in index.php as the html has been updated.
Had to delete icons support in base.php as they where conflicting with
the new theme.
2013-02-28 15:41:21 +01:00

230 lines
5 KiB
CSS

/* Global Box Sizing and Font-Smoothing */
*, *:after, *:before {
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
html { font-size: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; }
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; /* Serve Helvetica Neue, with Helvetica fallbacks to Arial */
font-size: 0.75em;/*12px/16px */
font-weight:300; /* Better supported than 'lighter' attribute */
line-height:18px;
color: #1c1c1c; /* Lighter on the eyes than #000 Black */
margin: 0px; background: #cccccc; background-size: cover;
}
img {
border: 0px;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
/* ==========================================================================
Typography stuff goes here
========================================================================== */
h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
/*h1 see mediaqueries*/
h2 {font-size: 1.2em;}
h3 {font-size: 1.1em;}
h4 {font-size: 1.0em; }
h5 {font-size: 0.83em;}
h6 {font-size: 0.75em;}
a:hover, a:active { outline: none; }
a { color: #2f4f4f ; text-decoration: none;}
a:visited { color:#414141 ; }
a:hover { color: black; text-decoration: underline; }
.frontpage a:hover { display:inline-block; width: 100%; background-color: #778899;}
/* =============================================================================
Main container stuff goes here
========================================================================== */
.container{
background: #414141; border:1px solid #000; border-radius:10px;
max-width:800px;width:95%;margin:0 auto;position:relative; }
/* =============================================================================
Header stuff goes here
========================================================================== */
header {
clear:both;
color:white;
text-align:center;
text-transform:uppercase;
display:block;
box-shadow:inset 0px -5px 8px #000000;
min-height:70px;
border-radius: 10px 10px 0px 0px;
}
.headleft {
float: left;
}
header h1{
float:none;
padding-top:25px;
}
.headright {
float: right;
}
/* =============================================================================
Section and Article stuff goes here
========================================================================== */
section {
clear:both;
background-color: #fff;
}
article {
border-bottom: 1px solid black;
}
/*-------------frontpage article-------------*/
.frontpage h2 {
padding: 5px 0 0 5px;
}
.frontpage h4 {
padding: 5px 0 5px 20px;
font-style: italic;
}
/*-------------books article-------------*/
.books {
clear: both;
padding: 10px;
}
.cover {
float:left;
padding: 0 10px 0 0;
min-width: 56px;
min-height: 70px;
}
.download {
float: right;
}
.download a {
border-radius: 6px;
box-shadow:0 0 10px #000;
background: darkgray;
background: radial-gradient(#666, black);
color: #EEE;
text-decoration : none;
font-weight: bold;
padding: 5px;
}
.books h4{
display: inline;
font-style: italic;
}
/* =============================================================================
Footer stuff goes here
========================================================================== */
footer
{
clear:both;
box-shadow:inset 0px 5px 8px #000000;
border-radius: 0px 0px 10px 10px;
height:32px;
}
footer a{
float: right;
}
/* =============================================================================
Aside stuff goes here
========================================================================== */
aside
{
float: right;
width : 250px;
}
.search
{
display:none;
width : 250px;
position: absolute;
background: white;
}
/*-------------Search Aside-------------*/
.search form
{
background-color: black;
margin-top: 3px;
border-radius: 6px;
}
.search input[type=text], .search select
{
vertical-align: middle;
margin: 8px 10px;
}
.search input[type=image], .search img
{
vertical-align: middle;
float:right;
padding: 3px 2px;
}
#loading
{
display:none;
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color: #ccc;
filter: alpha(opacity=70);
opacity: 0.70;
text-align: center;
padding-top: 120px;
}
/* =============================================================================
Mediaquerie stuff goes here
========================================================================== */
/* 100px and greater */
@media only screen and (min-width: 100px) {
h1 {font-size: 1em;}
.container { width:100%; }
}
/* 320px and greater */
@media only screen and (min-width: 320px) {
h1 {font-size: 1.2em;}
}
/* 480px and greater */
@media only screen and (min-width: 480px) {
h1 {font-size: 1.5em;}
}
/* 810px and greater */
@media only screen and (min-width: 768px) {
h1 {font-size: 2em;}
.container { box-shadow:0 0 20px #000; }
body { margin: 5px; }
}