﻿

@font-face {
font-family: 'EntypoPlus';
src: url('fonts/entypo-plus.eot');
src: url('fonts/entypo-plus.eot?#iefix') format('embedded-opentype'),
url('fonts/entypo-plus.woff') format('woff'),
url('fonts/entypo-plus.ttf') format('truetype'),
url('fonts/entypo-plus.svg#EntypoPlus') format('svg');
font-weight: normal;
font-style: normal;
}

html { margin:0;
padding:0;
height:100%;}

body {  margin:0;
padding:0;
height:100%; font-family:  'Open Sans', Arial, Helvetica, sans-serif; font-size: 20px; color: #ffffff; background-color: #f9c62b; }

* { padding: 0;	margin:0; }

a { text-align:left; color:#ffffff; text-decoration:none; }

a:hover { color:#f1f1f1; text-decoration:none; }

img { border: none; }

h1 {  font-size:40px; font-weight:300; margin: 0 0 30px 0;  }

#wrapper { z-index:100;  min-height:100%; position:relative; width:1000px; margin: 0 auto; }

#logo { position:fixed; left:0; top:0; margin: 30px 0 0 30px; text-transform:uppercase; font-weight:400; }
#logo a:hover { color:#ffffff; }
#logo a span { opacity:0; transition: all 0.12s ease-in-out; }
#logo a:hover span { opacity:1; }

#categories { text-align:center; padding: 30px; }

#compliment { margin:80px 0 60px 0; padding:20px 10px 10px 10px; position:relative; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; }
#compliment p { text-align:center; font-size:50px; font-weight:300; min-height:160px; }


#compliment-menu { height:35px; overflow:hidden;  width:600px; margin:10px auto; }




#compliment-voting { margin: 5px 0 0 0; position:relative; padding: 0 0 5px 0;}

#compliment-voting .voting-links a.faded { opacity:0.5; }
#compliment-voting .voting-links a.voted i.entypo-icon:before { font-size:37px; }
#compliment-voting .voting-links a.faded:hover i.entypo-icon:before,#compliment-voting .voting-links a.voted:hover i.entypo-icon:before { color:#ffffff;  }
#compliment-voting .voting-links a.faded,#compliment-voting .voting-links a.voted { pointer-events: none; cursor: default; }

#compliment-share { margin: 5px 0 0 0;  position:relative; }

.col1-3 { width:32%; display:inline-block; }
.text-left { text-align:left; margin-left:2px; }
.text-right { text-align:right; }
.text-middle { text-align:center; }

small { font-size:14px; }

.mr10 { margin-right:10px;}

#misc { text-align:center; padding-bottom:70px;  -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -ms-animation-delay: 0.5s; -o-animation-delay: 0.5s; }

#misc a {  margin: 0 0 60px 0; }

.big-button { text-align:left; display:inline-block;  -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-color:#ffb824;  padding:10px 16px 10px 10px; font-family: 'Open Sans', Arial;  font-size:20px; color:#ffffff;  border:0; cursor:pointer; margin: 0 20px 0 20px;  transition: all 0.12s ease-in-out;}

.big-button:hover i.entypo-icon:before { color:#ffffff; font-size:32px; }

.big-button:hover { background-color:#eba410;}

#footer { height:70px; position:absolute; bottom:0; left:0; width:100%;  }

#footer div { -webkit-animation-delay: 1s; animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; }

#footer div a#show-info { float:right; }

#footer div a#facebook { margin: 0 10px 0 0; }

#info-overlay { height: 100%; left: 0; position: fixed; top: 0; bottom:0; width: 100%; z-index: 700; background-color: #f9c62b !important; display:none;  background: url(images/orange_bg2.jpg) top left;}

#info { position:absolute;  height: 100%; left: 0; top: 0; bottom:0; width: 100%; background-color: #f9c62b; z-index: 800; display:none;  }

#info-content {  width: 1000px; margin: 0 auto; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s; padding: 100px 0 20px 0; text-align:center;  -webkit-animation-duration: 0.4s; -moz-animation-duration: 0.4s; -ms-animation-duration: 0.4s; -o-animation-duration: 0.4s; animation-duration: 0.4s; z-index: 900; }

#info-content p { margin: 0 0 20px 0;}

#close-info-container {  right: 0; position: absolute; top: 0;  z-index: 2000; margin: 30px 30px 0 0; cursor:pointer;}


#creators { margin: 0 0 40px 0;}
.creator-info { display:inline-block; margin: 0 10px 20px 10px; }
.creator-info .image { display:block; width:150px; height:150px; -webkit-border-radius: 75px; -moz-border-radius: 75px; border-radius: 75px; margin: 0 0 5px 0; border: 2px solid #f1f1f1;}
.creator-info .image.oskar { background: url(images/oskar.jpg) no-repeat top left; }
.creator-info .image.camilla { background: url(images/camilla.jpg) no-repeat top left; }
.creator-info .image.robert { background: url(images/robert.jpg) no-repeat top left; }

#suggest-compliment { position:relative; text-align:center; margin-top: 80px; padding-bottom:70px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; -ms-animation-delay: 0.2s; -o-animation-delay: 0.2s;  }

#suggest-compliment .desc { }

#suggest-compliment .form { margin: 90px 0 0 0; text-align:center; }

#suggest-compliment #submit-info { margin:10px 0 0 0; height:30px; }
#suggest-compliment #submit-info span { display:none; font-style:italic; color:#746843; font-size:16px; }
#suggest-compliment #submit-info.show span { display:inline; }

#suggest-compliment .btns { margin: 60px auto 50px auto; width:600px; }

#suggest-compliment input { width:100%; background-color:#f9c62b; border:0; font-family:  'Open Sans', Arial, Helvetica, sans-serif; font-size: 40px;  color: #ffffff;  font-weight:300; text-align:center; }
#suggest-compliment input:focus { outline:none; }


i.entypo-icon { position:relative; display:inline-block; width:40px; height:20px; }
i.entypo-icon:before {  font:32px 'EntypoPlus'; line-height:24px; height:20px; vertical-align:-4px; width:40px;  text-decoration:none; zoom:1; -webkit-font-smoothing:antialiased; transition: all 0.12s ease-in-out;  color:#ffffff; margin:0; position:absolute; text-align:center; }

.test-loading .entypo-icon:before { background: url(images/loader.gif) no-repeat top left;  }

a:hover .entypo-icon:before { color:#272727; font-size:37px; }
.entypo-icon.reload:before { content:"\e614"; }
.entypo-icon.info:before { content:"\e611"; }
.entypo-icon.plus:before { content:"\e630"; }
.entypo-icon.close:before { content:"\e60d";  }
.entypo-icon.glad-smiley:before { content:"\f118";  }
.entypo-icon.sad-smiley:before { content:"\f119";  }
.entypo-icon.menu:before { content:"\e627";  }
.entypo-icon.cross:before { content:"\e61b";  }
.entypo-icon.perma:before { content:"\e624";  }
.entypo-icon.back:before { content:"\e61d";  }

.entypo-icon.sun:before { content:"\e61a"; line-height:19px; }
a:hover .entypo-icon.sun:before { color:#ffffff; font-size:32px; animation: sun-rotate 8s linear infinite; -webkit-animation: sun-rotate 8s linear infinite; -ms-animation: sun-rotate 8s linear infinite; -o-animation: sun-rotate 8s linear infinite; line-height:19px; }

.entypo-icon.facebook:before{ content:"\e618"; }
a:hover .entypo-icon.facebook:before { color:#3b5998; }
.entypo-icon.twitter:before{ content:"\e617"; }
a:hover .entypo-icon.twitter:before { color:#55acee; }

@keyframes sun-rotate {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-o-keyframes sun-rotate {
0% {-o-transform: rotate(0deg);}
100% {-o-transform: rotate(360deg);}
}
@-moz-keyframes sun-rotate {
0% {-moz-transform: rotate(0deg);}
100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes sun-rotate {
0% {-ms-transform: rotate(0deg);}
100% {-ms-transform: rotate(360deg);}
}
@-webkit-keyframes sun-rotate {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }    
.clearfix { display: inline-block; }    
/* start commented backslash hack \*/  
* html .clearfix { height: 1%; }  
.clearfix { display: block; }  
/* close commented backslash hack */ 

.clear { clear:both; }
