*
these name: Libydesign html5/css3 layout
datum:april 2014
omschrijving:portfolio website
*/
body {
background-image: url('img/bg.png');
color: #666;
font-size: 87.5%; /* Base font size: 14px */
font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.429;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
text-align: left;
}
img.floatright
{
float: inherit; }
.body {
clear: both;
margin: 0 auto;
width: 70%;
}
H1 {font-size: 1.691em}
h2 {font-size: 1.571em}
h3 {font-size: 1.429em}
h4 {font-size: 1.286em}
h5 {font-size: 1.143em}
h6 {font-size: 1em}
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
}
a {
outline: 0;
}
a img {
border: 0px;
text-decoration: overline;
}
a:link, a:visited {
color: #CF5C3F;
padding: 0 1px;
text-decoration: none;
}
a:hover, a:active {
background-color: #CF5C3F;
color: #fff;
text-decoration: none;
}
.mainHeader nav {
background: #666;
font-size: 1.143em;
height: 40px;
line-height: 30px;
margin: 0 auto 30px auto;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li {
float: left;
display: inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
display: inline-block;
height: 30px;
padding: 5px 23px;
text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader img {
width: 30%;
height: auto;
margin: 3% 0;
}
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-bottom: 3%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
}
.content {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
font-style: italic;
color: #999;
font-size: 85%;
}
.top-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 2% 3%;
margin-bottom: 2%;
}
.middle-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 2% 3%;
margin-bottom: 2%;
}
.bottom-sidebar {
width: 24%;
float: left;
margin-left: 2%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
padding: 2% 3%;
}
.mainFooter {
width: 100%;
float: left;
margin-top: 2%;
margin-bottom: 2%;
padding-left: 0;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #FFF;
}
.mainFooter p {
width: 91%;
margin: 2% auto;
}
{
.body {
clear: both;
margin: 0 auto;
width: 90%;
font-size: 90%;
}
.mainHeader nav {
background: #666;
font-size: 1.143em;
height: 160px;
line-height: 30px;
margin-bottom: 0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style: none;
margin: 0 auto;
padding-left: 0;
}
.mainHeader nav li {
margin-left: 0 auto;
width: 100%;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #FFF;
display: block;
height: 30px;
padding: 5px 0;
text-decoration: none;
}
.mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
background: #CF5C3F;
color: #fff;
text-shadow: none ;
}
.mainHeader nav li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader img {
width: 100%;
height: auto;
margin-bottom: 3%;
}
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 4%;
margin-bottom: 2%;
}
.topcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 5%;
margin-bottom: 4%;
}
.bottomcontent {
background-color: #FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 5%;
}
.content {
width: 100%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.post-info {
display: none;
}
.middle-sidebar {
width: 86%;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #FFF;
margin-top: 4%;
margin-left: 0;
padding: 0 7%;
margin-bottom: 0;
}
.middle-sidebar p {
width: 90%;
}
.mainFooter {
width: 100%;
float: left;
margin: 2% 0;
padding-left: 0;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #FFF;
}
.mainFooter p {
width:86%;
margin: 2% auto;
}