/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/******************
STYLES!!!
*******************/

body {width: 100%; background-color: #101010; font-family: arial; }

b {font-weight: bold; }
p {margin-bottom: 0.5em; }

#wrapper {max-width: 960px; margin: 0 auto; padding: 0 10px; position: relative; }

div#header { 
	width: 100%;
	height: 400px;
	background: url('/images/oo-cover-photo.jpg') no-repeat center top scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/oo-cover-photo.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/oo-cover-photo.jpg', sizingMethod='scale')"; 
}

.bsfn div#header {
	height: 350px;
	background: url('/images/OO-8-bit-cover.png') no-repeat center top scroll;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/OO-8-bit-cover.png', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/OO-8-bit-cover.png', sizingMethod='scale')"; 
}

div#header h1 {visibility: hidden; }

#logo {width: 100%; margin: 1em 0; }

.box {margin: 1em 0; background-color: #fff; }
	.boxinner {padding: 1em 1.5em; }
	.box h2 {color: #000; font-weight: bold; font-family: arial; font-size: 2.2em; text-transform: uppercase; margin-bottom: 0.3em; }

.box:nth-of-type(odd) {background-color: #F2663A; }
	.box:nth-of-type(odd) h2 {color: #fff; }

.box.half {width: 49%; float: left; margin-right: 2%; }
	.half.last {margin-right: 0; }
	
.box.white {background-color: #fff; }
	.box.white h2 {color: #000; }

.button-holder {width: 152px; margin: 0 auto; }

.button {display: inline-block; background: #F2663A; background: -webkit-linear-gradient(#F2663A 0%, #C03307 100%); color: #fff; font-family: arial, sans-serif; font-weight: bold; border-radius: 5px; width: 140px; height: 20px; text-decoration: none; text-align: center; padding: 6px; margin: 1em auto 1em auto; }

.box:nth-of-type(odd) .button {background: #fff; background: -webkit-linear-gradient(#ffffff 0%, #cfcfcf 100%); color: #F2663A; }

.mobile-display {display: none; }

img#footer {clear: both; display: block; width: 100%; height: auto; margin: 1em 0; }

.album-art {float: left; width: 30%; margin: 0 10px 0 0; }


@media only screen and (max-width: 767px) {

div#header {height: 250px; }

.box.half {width: 100%; float: none; margin-right: 0; }

#youtube-box iframe {height: 300px !important; }
#facebook-box iframe,
#twitter-box iframe {height: 450px !important; }

}

@media only screen and (max-width: 409px) {

.box h2 {font-size: 1.7em; }

.mobile-display {display: block; }
.no-mobile-display {display: none; }

.album-art {float: none; width: 100%; margin: 0 0 20px 0; }

#youtube-box iframe {height: 200px !important; }
#facebook-box iframe,
#twitter-box iframe {height: 300px !important; }

}