Design - Santababy - CSS

/**DESIGNET ER LAGET AV GRATISDESIGNET.BLOGG.NO**/
@import url('https://fonts.googleapis.com/css?family=Dekko');
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,700,700italic|Open+Sans:300,300italic,400,400italic,700,700italic);
@import url('https://fonts.googleapis.com/css?family=Averia+Libre');
@import url('https://fonts.googleapis.com/css?family=Mr+De+Haviland');
html {
width: 100%;
overflow-x: hidden;
overflow: none;
}
textarea#comment_text {
background: #f6f6f6!important;
}
input#comment_submit {
background: #f9f9f9!important;
font-size: 13px!important;
}
#comments a img.avatar, #comments img.avatar {
border: 0;
float: left;
margin-right: 15px;
border-radius: 50%;
}
#comments .content {
font-size: 16px;
line-height: 1.4;
}
textarea#comment_text {
border: none!important;
outline: none!important;
}
input, textarea {
max-width: 100% !important;
-webkit-box-sizing: border-box!important;
-moz-box-sizing: border-box!important;
box-sizing: border-box!important;
background: none!important;
border: none!important;
border-bottom: solid 1px #ddd!important;
font-size: 15px!important;
padding: 1em!important;
}
div#copyright {
text-align: center;
background: rgb(247, 247, 247);
padding: 2em;
font-size: 17px;
color: #cfcfcf;
margin-top: 4em;
}
a#copya {
font-weight: 400;
color: #727172;
}
a#copya:hover {
font-weight: 400;
color: #000;
}
.blog-entry .fb-like, .blog-entry .fblike {
margin-bottom: 15px;
margin-bottom: 5em!important;
}
a#comments-r {
float: right;
margin-top: -6em;
color: #d41716;
font-size: 14px;
border-bottom: solid 2px #d41716;
}
h2#cato {
background: #ffffff;
border: double 4px #d41716;
padding: 4px;
position: relative;
width: 100%;
top: 11em;
text-transform: uppercase;
font-size: 20px;
}
div#bilde {
opacity: 0.7;
z-index: 3333;
}
div#bilde:hover {
opacity: 0.9;
z-index: 3333;
}
.row {
padding: 3em;
}
h1#logo {
font-family: 'Mr De Haviland', cursive;
font-size: 8em;
margin-top: 30px;
color: #d41716;
}
i.fa.fa-heart {
color: #d6d6d6;
margin-right: 6px;
}
i.fa.fa-heart:hover {
color: #d41716;
margin-right: 6px;
}
button#show-more-entries:hover {
border: double 4px #ddd;
}
button#show-more-entries {
border: double 4px #ddd;
text-transform: uppercase;
color: #8e8e8e;
font-size: 12px;
}
img#profileimg {
border: double 4px #dddddd;
padding: 8px;
border-radius: 50%;
margin-bottom: 2em;
width: 8em;
margin-top: -4em;
margin-bottom: -2em;
position: relative;
z-index: 3;
background: #fff;
top: 7em;
}
div#botinsta {
margin-top: 2em;
border-top: double 4px #d41716;
padding: 4px;
border-bottom: double 4px #d41716;
}
.content img {
width: 100%;
border: double 4px #d41716;
padding: 4px;
}
#na123 {
clear: both;
background: #f3f5f4;
margin-top: 2em;
margin-bottom: 2em;
padding-top: 3em;
padding-bottom: 3em;
}
a#cato {
background: #d41716;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color: #ffffff;
text-transform: uppercase;
font-size: 12px;
position: relative;
top: 5px;
font-weight: 900;
}
body {
background-color: #ffffff;
font-size: 13px;
line-height: 1.5;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
color: #222222;
margin: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p, ul, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
h1, h1 a,
h2, h2 a,
h3, h3 a,
h4, h4 a,
h5, h5 a {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
text-align: center;
color: #444444;
margin-bottom: 10px;
}
a:hover {
text-decoration: none;
}
a{
text-decoration: none;
}
a, li {
-webkit-transition: color 0.3s, background 0.3s;
-moz-transition: color 0.3s, background 0.3s;
-ms-transition: color 0.3s, background 0.3s;
-o-transition: color 0.3s, background 0.3s;
transition: color 0.3s, background 0.3s;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 34px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 22px;
}
img, iframe {
max-width: 100%;
}
a > img {
border: 0;
}
input, textarea, select {
padding: 3px 10px;
background: #f7f7f7;
border: 1px solid #ccc;
outline: none;
font-family: inherit;
}
button {
padding: 10px 30px;
}
.pad {
padding: 15px 30px;
}
.pad-double {
padding: 45px 60px;
}
.pad-top {
padding-top:20px;
}
.marg-top-bottom {
margin: 0px 0;
}
p {
margin-bottom: 20px;
line-height: 2.2;
text-align: justify;
}
.max {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.read-max > * {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.color-1 {
background: #ffffff;
}
.color-2 {
background: #333;
}
.mobile-only {
display: block;
}
#tpbnr *,
.bno_adboard * {
margin: auto !important;
text-align: center !important;
max-width: 100% !important;
}
#top-menu,
#footer,
#sidebar {
font-size: 11.05px;
}
#top-widgets,
#bottom-widgets {
text-align: center;
}
#top-widgets {
max-width: 100%;
}
.parallax {
height: auto;
overflow: hidden;
max-width: 100%;
margin: auto;
margin-top: -4px;
}
#header {
height: 200px;
background: #d41716;
}
#top-title {
display: none;
}
#top-title h1 {
display: none;
}
#top-title p {
display: none;
}
#top-title h1,
#top-title p {
text-align: center;
}
#top-menu {
position: absolute;
z-index: 333333;
padding: 10px 0;
width: 100%;
text-align: center;
top: 0;
padding: 2em;
margin: auto;
max-width: 100%;
display: block;
border: 1px solid #f1f1f1;
border-top: solid 4px #d41716;
background: #fbfbfb;
}
#mobile-menu-icon {
border: 0;
outline: 0;
cursor: pointer;
background: url(https://i.imgur.com/bBtcYwg.png) center no-repeat;
background-size: contain;
width: 100%;
color: transparent;
font-size: 0;
height: 50px;
}
#top-menu > ul {
width: 100%;
display: none;
}
#top-menu > ul > li {
display: block;
vertical-align: top;
padding: 5px;
margin-top: 5px;
text-align: -webkit-auto;
position: relative;
background: rgba(255,255,255,0.05);
}
#top-menu > ul > li > a, #top-menu > ul > li > span {
cursor: pointer;
color: #b9b9b9;
text-transform: uppercase;
font-family: sans-serif;
font-size: 10.05px;
letter-spacing: 4px;
border-bottom: dotted 1px #F5F5F9;
padding-bottom: 5px;
}
#top-menu > ul > li > a, #top-menu > ul > li > span:hover {
cursor: pointer;
color: #000000;
text-transform: uppercase;
font-family: sans-serif;
font-size: 10.05px;
letter-spacing: 4px;
border-bottom: dotted 1px #F5F5F9;
padding-bottom: 5px;
}
li a {
color: #b9b9b9!important;
}
li a:hover {
color: #000000!important;
}
#top-menu > ul > li > ul {
z-index: 999;
position: absolute;
opacity: 0;
pointer-events: none;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
text-align: center;
top: calc(100% + 10px);
left: 0;
padding: 10px 0;
background: #fff;
width: 100%;
list-style: none;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
-webkit-transition: transform 0.2s, opacity 0.2s;
-moz-transition: transform 0.2s, opacity 0.2s;
-ms-transition: transform 0.2s, opacity 0.2s;
-o-transition: transform 0.2s, opacity 0.2s;
transition: transform 0.2s, opacity 0.2s;
}
#top-menu > ul > li.visible-child > ul {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);;
pointer-events: initial;
}
#top-menu > ul > li > ul > li {
padding: 5px 20px;
}
#top-menu > ul > li > ul > li:hover {
background: #eee;
}
.stick #top-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
z-index: 9999;
border-top: solid 4px #d41716;
}
#main, #sidebar {
display: block;
background: #fff;
margin-bottom: 0px;
}
.blog-entry > .content {
text-align: left;
}
.blog-entry > header {
padding: 34px 0;
position: relative;
}
.blog-entry header h2 {
margin-bottom: 5px;
}
.blog-entry .header-info {
text-align: center;
}
.blog-entry .fb-like,
.blog-entry .fblike {
margin-bottom: 15px;
}
.blog-entry .bottom-meta {
text-align: center;
border: 1px solid rgba(0,0,0,0.05);
padding: 5px 10px;
background: #ffffff;
color: #222222;
display: none;
}
.blog-entry .header-info li, .blog-entry .bottom-meta li {
list-style: none;
display: inline-block;
margin: 0 5px;
font-size: 11.05px;
letter-spacing: 4px;
border-bottom: dotted 1px #F5F5F9;
padding-bottom: 5px;
}
#sidebar > div, .blog-entry, .bno_adboard {
margin-bottom: 0px !important;
margin-top: -29px;
}
#hidden-entries {
padding: 30px 0;
}
#sidebar img {
margin-bottom: 15px;
}
#sidebar ul {
list-style: none;
}
#sidebar > div > ul > li {
line-height: 2.2;
border-bottom: 1px solid #eee;
}
#sidebar .searchfield {
margin: auto;
text-align: center;
}
#sidebar .searchfield input {
border: 0;
width: calc(100% - 35px);
margin: 0;
}
#sidebar .searchfield input[type="submit"] {
background: #6c321e url('http://imagizer.imageshack.us/a/img911/3692/GtpWvt.png') no-repeat;
background-position: center;
background-size: 50%;
color: transparent;
cursor: pointer;
width: 30px;
}
@media(min-width: 779px) {
.column {
float: left;
padding: 10px;
height: 300px;
}
#main {
float: none;
margin: 0 auto;
width: 80%;
}
#sidebar {
display: none; width: calc(100% - 80% - 0px);
}
.mobile-only {
display: none;
}
#top-menu > ul {
display: block;
}
#top-menu > ul > li {
padding: 0 15px;
margin: 0;
display: inline-block;
background: transparent;
}
#top-menu > ul > li > ul {
width: 300px;
text-align: center;
}
.parallax {
height: 0px;
}
#header {
height: auto;
}
}
#wrap:after {
content: '';
display: block;
clear:both;
}
#footer-wrap {
background: #ffffff;
padding-bottom: calc(30px + 30px);
margin-bottom: -30px;
text-align: center;
font-size: 10.4px;
color: #333;
}
#footer-wrap > footer {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
color: #333;
}
#footer-wrap a {
color: #222;
}
/* ##############
## Comments
############### */
#comments, #newcomment {
margin: auto;
text-align: left;
padding: 45px 0;
}
#comments h3, #newcomment h3 {
padding: 10px 0;
border-bottom: 1px solid rgba(0,0,0,0.03);
}
#newcomment {
max-width: 568px;
}
#newcomment input, #newcomment textarea, #newcomment input#comment_authorurl {
width: 100%;
}
#newcomment #comment_author_wrapper, #newcomment #comment_authoremail_wrapper, #newcomment #comment_submit_wrapper, #newcomment #comment_remember_wrapper {
width: 48.75%;
margin-right: 0.5%;
float: left;
}
#newcomment #comment_authoremail_wrapper {
margin-right: 0;
float: right;
}
#commentform > div {
margin: 10px 0;
}
input, textarea {
max-width: 100% !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input#comment_remember {
width: auto;
}
#comments h4, #comments p {
text-align: left;
margin-bottom: 5px;
min-height: 20px;
}
#comments .meta p {
font-size: 12px;
}
#comments .content {
font-size: 90%;
line-height: 1.4;
}
.entry #comments .meta {
border: 0;
}
#comments a img.avatar, #comments img.avatar {
border: 0;
float: left;
margin-right: 15px;
border-radius: 100%;
}
#comments .meta, #comments .content {
display: block;
}
#comments .meta {
width: auto;
}
#comments .user, #comments .other, #comments .owner, #comments .reply {
border: 0px;
background: transparent;
margin: 40px 0;
position: relative;
}
#comments .reply {
margin-top: -10px;
margin-left: 15%;
}
#comments .reply:before {
content: ' ';
width: 20px;
height: 35px;
background: url('http://imageshack.com/a/img922/9444/DawRhW.png') center no-repeat;
background-size: contain;
position: absolute;
right: calc(100% + 15px);
top: 0;
}
.comment .content {
margin-top: 20px;
width: auto;
padding: 25px;
background: #f7f7f7;
position: relative;
}
.comment .content:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
top: -15px;
left: calc(3%);
border-left: 10px solid transparent;
border-bottom: 15px solid #f7f7f7;
border-right: 10px solid transparent;
}
#comment_remember_wrapper {
text-align: right;
}
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
border: solid 24px #fff;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media(max-width: 800px) {
.column {
float: left;
width: 33.33%;
padding: 10px;
display: none;
}
#snow{
display:none;
}
#main, #sidebar {
display: block;
background: #fff;
margin-bottom: 0px;
margin-top: 4em!important;
}
h2 {
font-size: 27px;
}
div#botinsta {
margin-top: 2em;
border-top: double 4px #d41716;
padding: 4px;
border-bottom: double 4px #d41716;
width: 100%;
}
}
#snow{
background: none;
font-family: Androgyne;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
height: 600px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:1;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 900px 900px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 900px 900px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 900px 900px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 900px 900px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}