/*
==================
1. General stuff
2. Header
3. Main section
4. Media queries
==================
*/

/* === 1. General stuff === */
@charset "utf-8";
@import url(../icons/stylesheet.css);
html { height:100%; position:relative; }
body { background:#000; font-family:Arial, Helvetica, sans-serif; margin:0; min-height:100%; padding:0; }
h3 { font-weight:400; letter-spacing:1px; }
h1 { letter-spacing:2px; }
.light { background:rgba(255,255,200, 1); border-radius:500%; box-shadow:rgba(255,255,200,1) 0px 0px 2px 2px; display:none; height:1px; opacity:0.4; position:absolute; width:1px; z-index:-1; }
#bg { list-style:none; margin:0; padding:0; }
#bg li { bottom:0; display:none; left:0; overflow:hidden; position:absolute; right:0; top:0; z-index:-1; }
#bg li.o { display:block; }
#bg li img { width:100%; }
#sliderbar { background:rgba(0,0,0,0.75); height:5px; left:0; position:absolute; right:0; top:0; }
#sliderbarin { background:#C04545; height:5px; width:0; }
::selection { background:rgba(255,255,255,0.15); }
::-moz-selection { background:rgba(255,255,255,0.15); }
.clear { clear:both; display:block; }
.highlight { color:#C04545; }
a { color:#C04545; text-decoration:none; }
a:hover { color:#CC7777; }



/* === 2. Header === */
header { background:rgba(0,0,0,0.75); color:#FFF; height:40px; line-height:40px; margin-top:5px; padding:0 10%; position:absolute; width:80%; }
header img { float:left; }
#music { cursor:pointer; float:right; }
#tweet { color:#999; float:left; font-size:12px; line-height:40px; margin:0; padding:0; }
.tweet_time:before { content:' — '; }
.tweet_time { color:#555; float:right; font-size:10px; margin-left:5px; }
.tweet_time a { color:#555; }



/* === 3. Main section === */
#main { background:rgba(0,0,0,0.75); border-bottom:5px #C04545 solid; border-top:5px #C04545 solid; color:#FFF; padding:50px 10%; position:absolute; top:300px; width:80%; }
#left { float:left; margin:0; position:relative; width:50%; }
#right { float:left; margin:0; padding:0; position:relative; width:50%; }
p.notification { color:#999; font-family:Arial, Helvetica, sans-serif !important; font-size:11px; margin-bottom:5px; text-align:right; }
form input { border:none; box-sizing:border-box; color:#777; float:left; height:40px; moz-box-sizing:border-box; padding:12px; webkit-box-sizing:border-box; }
form input[type="email"] { box-shadow:#CCC -1px 0px 0px inset; width:70%; }
form input[type="submit"] { background:#C04545; color:#FFF; width:30%; }
#social_icons { float:left; margin:10px 0; margin-bottom:20px; }
#social_icons ul { list-style:none; margin:0; padding:0; }
#social_icons ul li { background:#C04545; border-radius:50%; box-shadow:rgba(255,255,255,0.1) 0px 0px 0px 4px; display:inline-block; height:40px; line-height:40px; margin-right:15px; text-align:center; width:40px; }
#social_icons ul li:hover { background:#e55353; }
#social_icons ul li a { color:#662525; text-shadow:rgba(255,255,255,0.1) 0px 1px 0px; }
#counter { float:right; margin:10px 0; margin-bottom:20px; }
#counter > div { display:inline-block; margin-left:50px; }
#counter div h1 { color:#FFF; margin:0; text-align:right; }
label.error { bottom:44px; color:#999; font-size:11px; left:0; position:absolute; }
#map { bottom:0; left:0; position:absolute; right:0; top:0; z-index:-1; }



/* === 4. Media queries === */
@media(max-width:1800px) {
	#social_icons, #counter { float:right; margin:10px auto; text-align:right; width:100%; }
	#social_icons ul li { margin-left:15px; margin-right:0; }
}
@media(max-width:1350px) {
	#bg li img { height:100%; width:auto; }
}
@media(max-width:768px) {
	#left, #right { float:none; width:100%; }
	#main { top:100px; }
	#social_icons { float:left; width:50%; }
	#social_icons ul li { margin-left:0; margin-right:15px; }
	#counter { float:left; width:50%; }
	#counter > div { margin-left:28px; }
	h1 { font-size:24px; }
	h3 { font-size:18px; }
	label.error { bottom:0; }
}
@media(max-width:320px) {
	#main { font-size:12px; padding:10px 5%; top:40px; width:90%; }
	#social_icons, #counter { float:none; width:100%; }
	#social_icons { margin:auto; text-align:center; }
	#social_icons ul li { margin:0 7px; }
	#counter { margin:10px auto; text-align:center !important; }
	#counter > div { margin:0 10px; text-align:center !important; }
	#counter > div h1 { text-align:center; }
	header { padding:0 5%; width:90%; }
	#tweet { display:none; font-size:11px; }
	#header_twitter { display:none; }
}
@media(max-width:1024px) and (max-height:768px) and (min-width:768px) {
	#main { padding:25px 5%; width:90%; }
	#social_icons, #counter { float:right; margin:10px auto; text-align:right; width:100%; }
	#social_icons ul li { margin-left:15px; margin-right:0; }
}
@media(max-width:480px) and (max-height:320px) {
	header { display:none; }
	#tweet { display:none; font-size:11px; }
	#header_twitter { display:none; }
	#sliderbar { height:5px; }
	#main { border-top:none; font-size:12px; padding:0 5%; padding-bottom:20px; top:5px; width:90%; }
	h1 { font-size:18px; }
	h3 { font-size:14px; }
	#bg li img { height:100% !important; width:auto !important; }
	#right, #left { float:none; width:100%; }
	#social_icons ul li { height:25px; line-height:25px; margin:0 6px; width:25px; }
	#counter > div { margin-left:13px; }
	#counter { margin-bottom:0px; }
}