style_base.css

/* ===============================================
================== YES WEBSITES ==================
==================================================*/

body{
min-width:960px;
min-height:750px;
margin:0;
padding:0;
border:0;
font-family:'Arvo',serif;
height:750px;
background:url(./images/3.png) 0 0;
}

h1,h2,h3,h4,h5,h6,p {
padding:0;
margin:0;
font-family:'Arvo',serif;
color:#00B3BE;
}

.center {
left:0;
right:0;
margin:auto;
padding:0;
border:0;
display:block;
list-style:none;
text-align:center;
}

#page-content {
width: 960px;
margin: auto;
}

::selection {
background: #A2A4B7;
color: white;
text-shadow: none;
}

/* ===============================================
===================== NAV BAR ====================
==================================================*/

#header {
background:url(./images/header.png) 0 0;
}

#logo {
display:inline-block;
padding:0;
}

#logo a{
display:block;
overflow:hidden;
text-indent:-9999px;
width: 340px;
cursor:default;
height: 60px;
background:url(./images/logo.png) 0 0;
}

/* ===============================================
===================== CHOICE =====================
==================================================*/

#choice {
background:url(./images/1.png) 0 0;
}

#better {
display:none;
width:710px;
height:100px;
overflow:hidden;
text-indent:-9999px;
background:url(./images/better.png) no-repeat;
}

/* ===============================================
================= TOP CONTAINER ==================
==================================================*/

#page {
width:auto;
min-height:350px;
background:url(./images/2.png) 0 0;
}

#page-content {
padding:20px;
}

.contStuff {
display:inline-block;
vertical-align:middle;
}

.contStuff a{
display:block;
width:500px;
height:500px;
overflow:hidden;
text-indent:-9999px;
}

/* ===============================================
=================== GAME STUFF ===================
==================================================*/

#comparison-box {
display: none;
width:auto;
height:auto;
position: relative;
}

#comparison-box > div {
float: left;
}

#comparison-box > div.image-box {
box-shadow: 0 5px 10px rgba(0,0,0, 0.4);
opacity:.9;
background: #dfdfdf;
padding: 3px;
border-width:2px;
border-style:solid;
border-color:#dfdfdf;
top: 10px;
width: 300px;
min-width: 300px;
}

#comparison-box > div.image-box:hover {
opacity:1;
border-width:2px;
border-style:dashed;
border-color:#000;
}

#image1 {
left: 10px;
width: 300px;
min-width: 300px;
}

#neither {
margin: 135px 135px;
}

#neither a {
width:70px;
height:35px;
background:url(./images/neither.png) 0 0;
}

#neither a:hover{
background-position: 0 -35px;
}

#image2 {
right: 10px;
width: 300px;
min-width: 300px;
}

#comparison-box {
height:auto;
width:auto;
}

#game-box {
width:500px;
text-align:center;
display:none;
}

img.notif-image {
width: 50px;
margin-left: 56px;
}

div.notif-message {

}

div.notif-dummy {
clear: both;
}

span.notif-emp {
color: #00B3BE;
}

/* ===============================================
===================== BUTTONS ====================
==================================================*/

#login-message {
display:inline-block;
margin:25px;
}

#email {
outline-color:#00b3be;
}

#email-box {
padding: 20px;
clear: both;
}

#play-button {
display:inline-block;
cursor:pointer;
width:70px;
height:35px;
overflow:hidden;
text-indent:-9999px;
border:0px;
background:url(./images/play.png) 0 0;
}

#loading-animation {
margin-top:50px;
}
#play-button:hover{background-position: 0 -35px;}
#play-button:active{background-position: 0 -35px;}

.share-button {
cursor:pointer;
width:70px;
height:35px;
overflow:hidden;
text-indent:-9999px;
border:0px;
background:url(./images/share.png) 0 0;
}

.share-button:hover{background-position: 0 -35px;}
.share-button:active{background-position: 0 -35px;}

/* ===============================================
===================== FOOTER =====================
==================================================*/

#footer_nav {
height:100px;
}

.footer-text {
display:block;
}

#left-footer {
display:inline-block;
width:350px;
height:100px;
}

#right-footer {
display:inline-block;
width:350px;
height:100px;
}

#left-logo {
display:inline-block;
width:54px;
height:38px;
overflow:hidden;
text-indent:-9999px;
background:url(./images/logo_icon.png) 0 0;
}

#left-logo:hover {
background-position: 0 -38px;
}

#twitter {
display:inline-block;
width:23px;
height:24px;
overflow:hidden;
text-indent:-9999px;
background:url(./images/twitter.png) 0 0;
}

#twitter:hover {
background-position: 0 -24px;
}
#facebook {
display:inline-block;
width:24px;
height:23px;
overflow:hidden;
text-indent:-9999px;
background:url(./images/facebook.png) 0 0;
}

#facebook:hover {
background-position: 0 -23px;
}
#pre-image1, #pre-image2{
width:1px;
height:1px;
background-position:1px 1px;
}

/* ===============================================
===================== GALLERY ====================
==================================================*/

#selection {
display:block;
width:400px;
}

.gallery {
display:inline-block;
max-width:300px;
margin:2px;
height:200px;
border-width:2px;
border-style:solid;
border-color:#000;
margin-left: 2px;
box-shadow: -2px 2px 5px #333;
box-shadow: -2px 2px 5px rgba(0,0,0,0.7);
padding: 10px 10px;
}

#gallerybox{
margin: 25px 0;
}

.gallery:hover{
border-width:2px;
border-style:dashed;
border-color:#000;
cursor: pointer;
}