Design #1 - Stilsett (CSS)

/* Denne designmalen er designet og kodet av Designmagasinet.blogg.no © 2015.*/

@import url(http://fonts.googleapis.com/css?family=Viga);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC);
.entry {
background-color: transparent;
}
body.front #header {
cursor: auto;
margin-left: auto;
margin-right: auto;
background-color: #EBEBEB;
width: 1097px;
margin-bottom: 17px;
margin-top: 17px;
height: 350px;
background-image: url('http://nyheter24.se/modette/angelicablick/files/2012/08/08.jpg');
background-size: 1217px;
background-position-y: -10em;
border: solid 18px #FFFFFF;
}
.entry .meta {
margin: 18px 0;
font-size: 12px;
text-align: center;
color: #646464;
margin-top: -15px;
}
.entry h2 {
margin: 0 0 5px 0;
font-family: 'Viga', sans-serif;
font-size: 35px;
font-family: 'Playfair Display SC', serif;
text-align: center;
padding-top: 0em;
border: solid 2px #E9E9E9;
margin-bottom: 1em;
}
#doc2 {
margin: auto;
width: auto;
min-width: 1130px;
}
body .entry * {
line-height: 1.9;
width: 100%;
}
body .entry {
margin: 0 0 20px 0;
clear: both;
margin-bottom: 15px;
background-color: #FFFFFF;
border: solid 23px #FFF;
}
#main {
float: left;
width: 840px;
background-color: transparent;
overflow: visible;
position: relative;
}
#side {
width: 315px;
float: right;
background-color: transparent;
overflow: visible;
margin-top: 0px;
padding: 0px 0px 0px 0px !important;
text-align: center;
}
body {
background-color: #f5f5f5;
font-family: 'Open Sans', sans-serif;
color: #333333;
}
#wrapper {
margin-left: auto;
margin-right: auto;
background-color: transparent;
padding: 0px;
width: 1170px;
}
#header{
height: 300px;
}
#footer {
background-color: #ffffff;
width: 1130px;
margin-left: auto;
margin-right: auto;
border: none;
font-size: 12px;
padding: 20px;
}
a:link {
    color: #0B0B0B;
}
a:link {
color: #000000;
}
a:visited {
/* font-family: 'Viga', sans-serif; */
font-size: 26px;
line-height: 31px;
text-transform: uppercase;
color: #000000 !important;
font-family: 'Playfair Display SC', serif;
}
a:active { color: #336699}
h1, h2, h3, h4, h5 { font-family: Tahoma, Geneva, sans-serif; }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #000000; }
#profile a img {
background-color: #fff;
padding: 0px;
border: 0px;
margin: 0px;
float: initial;
width: 95px;
height: 95px;
border: solid 4px #FFF;
border-radius: 50%;
margin-bottom: 0em;
margin-top: 7em;
}
h6 {
font-family: 'Viga', sans-serif;
font-weight: 600;
font-size: 13px;
line-height: 24px;
text-transform: uppercase;
color: #333;
padding: 1em;
text-align: left;
}
#h2 {
font-family: 'Viga', sans-serif;
font-size: 26px;
line-height: 31px;
text-transform: uppercase;
color: #000000 !important;
font-family: 'Playfair Display SC', serif;
}
#side div {
margin-bottom: 15px;
background-color: #FFFFFF;
}
#info{
font-family: Open Sans !important;
font-weight: 400 !important;
color: #666 !important;
font-size: 13px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 1em;
}
#side div {
margin-bottom: 15px;
background-color: #FFFFFF;
}
div#profile {
border: solid 1px #f1f1f1;
}
hr {
margin-bottom: 24px;
border: 0;
border-top: 1px solid #eee;
}
ul li {
margin: 0 0 3px 0;
list-style: none;
text-align: left;
padding-left: 1em;
margin-top: -8px;
margin-bottom: 1em;
}
.breadcrumbs {
margin: 0 0 17px 0;
padding-top: 5px;
font-size: 80%;
background-color: #FFFFFF;
border: solid 23px #FFF;
display: none;
}
.social-buttons {
height: 50px;
font-size: 10;
text-align: center;
right: 0;
left: 0;
top: 58%;
bottom: 46%;
}
.social-button {
display: inline-block;
background-color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
margin-left: 0 !important;
margin-right: 15px !important;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.06);
-webkit-transition: all .35s cubic-bezier(0.31,-0.105,0.43,1.59);
transition: all .35s cubic-bezier(0.31,-0.105,0.43,1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all .35s cubic-bezier(0.31,-0.105,0.43,1.79);
transition: all .35s cubic-bezier(0.31,-0.105,0.43,1.79);
}
.social-button .fa {
font-size: 29px;
vertical-align: middle;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
-webkit-transition: all .35s cubic-bezier(0.31,-0.105,0.43,1.59);
transition: all .35s cubic-bezier(0.31,-0.105,0.43,1.59);
margin-top: 12px;
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.social-button:focus {
opacity: .85;
}
* {
margin: 0;
padding: 0;
color: inherit;
box-sizing: inherit;
}
:focus {
outline: none;
}
blockquote {
font-size: 18px;
border-left: solid 4px #D3D3D3;
padding-left: 1em;
font-style: italic;
color: #A39D9D;
}
.entry .meta ul li, .entry .tags ul li {
list-style: none;
display: inline;
margin: 0 5px 0 5px;
padding: 0;
text-transform: uppercase;
letter-spacing: 5px;
color: #9B9191;
border-bottom: solid 1px;
}
#header {
background-image: url('http://nyheter24.se/modette/angelicablick/files/2012/08/deta.jpg');
background-size: 1217px;
background-position-y: -10em;
border: solid 18px #FFFFFF;
background-position-x: -6em;
cursor: auto;
margin-left: auto;
margin-right: auto;
background-color: #EBEBEB;
width: 1097px;
margin-bottom: 17px;
margin-top: 17px;
height: 350px;
}
#linkback{
text-transform: uppercase;
letter-spacing: 3px;
color: #E3E3E3;
font-family: inherit;
text-align: center;
}
@-webkit-keyframes fadeUpIn /* Safari and Chrome */
{
from { opacity:0; top:150px; }
to { opacity:1; top: 70px; }
}
html{
animation: fadeUpIn 3s;
-webkit-animation: fadeUpIn 3s; /* Safari and Chrome */
}
.comment.other {
text-align: -webkit-left;
}
#comments .owner {
color: #000;
text-align: -webkit-left;
border: none;
background: none;
}
#comments img.avatar {
border: 1px solid;
padding: 3px;
float: right;
margin: 0 0 10px 10px;
border-radius: 50%;
border: none;
}
h4{
font-size: 16px;
line-height: 31px;
text-transform: uppercase;
color: #000000 !important;
font-family: 'Playfair Display SC', serif;
}
#newcomment #comment_author_wrapper, #newcomment #comment_authoremail_wrapper, #newcomment #comment_submit_wrapper, #newcomment #comment_remember_wrapper {
width: 269px;
margin-right: 15px;
text-align: left;
background-color: #FFFFFF;
}
newcomment input {
width: 222px;
padding: 7px;
}
#newcomment input {
width: 217px;
padding: 11px;
}
#newcomment label {
width: 280px;
display: block;
text-align: -webkit-auto;
margin-bottom: 2em;
}
#newcomment textarea, #newcomment input#comment_authorurl {
width: 217px;
padding: 11px;
}
#side h3 {
clear: both;
font-family: 'Viga', sans-serif;
font-size: 36px;
line-height: 31px;
text-transform: uppercase;
color: #000000 !important;
font-family: 'Playfair Display SC', serif;
border-bottom: solid 1px;
padding-bottom: 1em;
margin-bottom: 1em;
}
#newcomment #comment_submit {
padding: 3px 10px;
width: 226px;
padding: 11px;
background-color: #E3E3E3;
color: #131313;
border: none;
border-radius: 30px;
}
input#comment_authorurl {
margin-left: -6px;
}
.mna-footer-text, .mna-footer-logo {
margin-bottom: 5px;
margin-top: 1em;
}
#comments .user {
border-top: 1px dotted;
border-bottom: 1px dotted;
background: #fff!important;
color: #000;
text-align: -webkit-auto!important;
border: none!important;
}