/*
Theme Name: Disturbingly Random
Theme URI: http://disturbinglyrandom.com
Description: Disturbingly Random Design by Brad Frost Web
Author: Brad Frost Web
Author URI: http://bradfrostweb.com
version: 1.0
Tags: random
*/

/*******************RESET CSS*******************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, cite, font, img, small, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
/****************END RESET********************/

/****************Global Elements**************/
html { overflow-x: hidden; }
html,body { font: 32px Georgia, "Times New Roman", Times, serif; font-weight: bold; line-height: 80%; background: url(images/noise.png) #006e53; color: #fff; line-height: 120%; width: 100%; word-wrap: break-word; }
h1 { }
h1 a { display: block; font-size: 100% !important; width: 400px; height: 59px; background: url(images/logo.png); text-indent: -9999em; margin: 0 auto; }
h2 { }
a { color: #fff; text-decoration: none; }
a:hover { }
p { margin: 0 0 19px 0; line-height: 18px; }
::-moz-selection{background:#000; color:#fff;}
::selection {background:#000; color:#fff;}
/****************End Global Elements**********/

/****************Structure*********************/
#container { }
.single #container { text-align: center; }
#header { padding: 8px 0; background: #000; position: fixed; top: 0; left: 50%; z-index: 1; width: 500px; margin-left: -250px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px;  border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; }
#header h1 { padding-left: 20px; }
#content { overflow: hidden;  }
#dinosaur-gelatin {   }
#dinosaur-gelatin a { text-decoration: none;  }

#face-farts { overflow: hidden; font-style: italic; }
#face-farts li { width: 20%; height: 200px; float: left; overflow: hidden; background: #d37200; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: relative; text-align: center; cursor: pointer; }
#face-farts li:hover { opacity: #fff; }
#face-farts li:hover a { color: #fff; }
#face-farts .stink { display: block; margin: 0 auto; width: 85%; position: relative; top: 30%; color: rgba(0,0,0,0.4); }
#face-farts .stink:hover {  color: #fff; }
#face-farts .ralph { display: none; float: right; margin-left: 20px; width: 15%; }
#face-farts li:hover .ralph { display: block; }

#footer { padding: 20px 0; background: #000; position: fixed; bottom: 0; left: 50%; z-index: 1; width: 500px; margin-left: -250px; font-size: 20px; font-family: Helvetica, Arial, sans-serif; text-align: center; line-height: 100%; 	-moz-border-radius-topright: 10px; 	-moz-border-radius-topleft: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-top-left-radius: 10px;  border-top-right-radius: 10px; border-top-left-radius: 10px;  }
/****************End Structure******************/

.class1 { background: #666; text-shadow: 14px 14px 0 #000, 28px 28px 0 salmon, 42px 42px 0 red; font-family: Arial Black, Arial, Helvetica, sans-serif; color: #6FF; }
.class2 { background: blue; font-family: 'Reenie Beanie'; }
.class3 { background: orange; font-family: 'Tangerine'; }
.class4 { background: yellow; font-family: 'Inconsolata'; }
.class5 { background: red; font-family: 'Lobster'; }
.class6 { background: salmon; font-family: 'Reenie Beanie'; }
.class7 { background: lightsalmon; font-family: 'Tangerine'; }
.class8 { background: darksalmon; font-family: 'Lobster'; }
.class9 { background: #777; font-family: 'Josefin Sans Std Light'; }
.class10 { background: #fff; font-family: 'Tangerine'; }
.class11 { background: #000; color: #fff; font-family: 'Tangerine'; }
.class12 { background: pink; font-family: 'Tangerine'; }
.class13 { background: limegreen; font-family: 'Tangerine'; }
.class14 { background: cyan; font-family: 'Tangerine'; }
.class15 { background: orange; font-family: 'Lobster'; }
.class16 { background: orange; font-family: 'Inconsolata'; }
.class17 { background: orange; font-family: 'Josefin Sans Std Light'; }
.class18 { background: orange; font-family: 'Lobster'; }
.class19 { background: orange; font-family: 'Josefin Sans Std Light'; }
.class20 { background: orange; font-family: 'Inconsolata'; }

body.single {  }
#old-balls { background: #d6de02; color: #000; height: 400px; position: absolute; top: 50%; left: 50%;  z-index: 0; width: 900px; height: 900px; margin: -450px 0 0 -450px; text-align: center;  }
#old-balls h2 { position: relative; top: 50%; width: 80%; margin: -20px auto 0; color: rgba(0,0,0,0.5); margin-top: -30px; font-size: 200%; line-height: 110%; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; }

.home #header { position: static; float: left; width: 20%; margin: 0; padding: 0; }
.home #footer { display: none; }
.home h1 { margin: 50% auto 0; }
.home h1 a { width: 190px; height: 40px; background: url(images/logo_vert.png) no-repeat; margin-top: -20px; }
.home #content, .home #face-farts { display: inline; }
.home #footer a { display: block; margin: 0 auto; width: 80%; margin-top: 44%; }

.navigation div { display: block; background: #000; width: 20%; height: 200px; float: left; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position: relative; text-align: center; font-style: italic; cursor: pointer; } 
.navigation a { display: block; margin-top: 40%; }

@media screen and (max-width: 320px) {
	
	#face-farts li,.home #header,.navigation div { width: 100%; }
}
@media screen and (min-width: 330px) and (max-width: 600px) {
	
	#face-farts li,.home #header,.navigation div { width: 50%; }
}