/* 
Outshine Family
Version 1.0
Author:Paul Mylecharane
www.softpyramids.com
*/

/*reset*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,del,em,font,img,small,strike,strong,dl,dt,dd,ol,ul,li,fieldset,form,label,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:''; content:none; }

/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse:collapse; border-spacing:0; }

/* Structure */
a img { border:none; }
html,body { height:100%; width:100%; background-color:#000; }
#header { height:30px; width:100%; background:#000; margin:0 auto; z-index:500; }
#bg { height:100%; width:100%; z-index:10; position:absolute; background:#000 url(../images/osf_bg.jpg) center center fixed no-repeat; -moz-background-size:cover; background-size:cover; display:none; }
#container { margin:0 auto -50px; min-height:100%; width:800px; height:auto!important; height:100%; overflow:hidden; position:relative; top:0; left:0; z-index:100; }
#content { width:620px; float:left; min-height:100%; margin:93px 0 0 10px; padding-bottom:50px; position:relative; overflow:hidden; }
.media { width:600px; margin:50px 0 0 15px; }
#footer { width:100%; height:30px; background-color:#000; margin-top:20px; clear:both; position:relative; z-index:120; }
#inside { width:750px; height:30px; margin:0 auto; }
#holder { width:750px; height:30px; margin:0 auto; }
#bio { width:590px; height:350px; float:left; margin-left:12px; overflow:hidden; }
.contentBox { float:left; }
#pages { width:590px; height:15px; float:right; text-align:right; margin:10px 16px 0 0; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; padding-top:3px; }
.left { float:left; height:20px; }
.right { float:right; height:20px; }
#items { width:615px; height:600px; float:left; margin:10px 10px 0 5px; }
.below { float:right; margin:25px -85px 0 0; }
.sound { float:right; width:57px; margin:4px 10px 0 0; }
.bm { float:right; width:57px; }
.facebook { height:21px; width:52px; position:absolute; overflow:hidden; margin:-26px 5px 0 535px; }
.facebook2 { height:21px; width:52px; position:absolute; overflow:hidden; margin:-28px 5px 0 535px; }
.addthis { width:20px; position:absolute; margin:-26px 20px 0 510px; }
#menu { width:160px; float:left; margin:40px 0 0; }
.navigation { width:130px; float:left; margin:20px 0 0 15px; }
.extras { width:52px; float:left; margin:20px 0 0; }
#about { width:550px; height:610px; float:left; margin:95px 0 0 10px; position:relative; }
#news2 { width:550px; height:610px; float:left; margin:220px 0 0 30px; position:relative; }
#record { width:550px; height:700px; float:left; margin:95px 0 0 30px; position:relative; }
#folks { width:700px; height:600px; background-color:#fff; filter:alpha(opacity=75); opacity:0.75; -moz-opacity:0.75; float:left; margin:100px 0 0 10px; }
.block { height:10px; display:block; }
.block2 { height:20px; display:block; }
.line { width:590px; border-bottom:1px solid #fff; margin-top:5px; filter:alpha(opacity=75); opacity:0.75; -moz-opacity:0.75; }
.title { width:590px; height:31px; margin:0 0 0 15px; display:block; float:left; border-bottom:1px solid #fff; border-top:1px solid #fff; padding-top:3px; }
.big2 { width:330px; margin:0 0 0 15px; display:block; float:left; border-bottom:1px solid #fff; border-top:1px solid #fff; padding-top:3px; }
#disco { width:590px; height:600px; float:left; margin:20px 10px 0 15px; }
#contact { width:590px; height:600px; float:left; margin:30px 10px 0 15px; }
#here { width:320px; float:left; margin:15px 0 0 30px; }
.over { width:240px; float:left; margin-top:10px; }
.cover { width:176px; height:176px; float:left; margin:10px 0 0; }
.info { width:350px; height:176px; margin:12px 0 0 30px; float:left; }
.b_left { width:285px; margin:25px 0 0; float:left; }
.b_right { width:285px; margin:25px 0 0 20px; float:left; }
.f_left { width:280px; margin:25px 0 0 18px; float:left; }
.f_right { width:280px; margin:25px 0 0 25px; float:left; }
.full { width:585px; margin:15px 0 0 17px; float:left; }
.middle { width:535px; margin:-15px 0 0; float:left; }
#band_1 { width:590px; margin:15px 0 0 13px; float:left; }
.band_2 { width:590px; margin:0; float:left; }
.vid { width:550px; float:left; margin:20px 0 0; }
.player { width:590px; margin:10px auto; float:left; padding-bottom:7px; }
#faceJoin { height:25px; margin:2px 0 0 10px; float:left; }

/* CSS Rollovers */
a.rollover { display:block; width:22px; height:25px; text-decoration:none; background:url(http://www.outshinefamily.com/images/boid.png); }
a.rollover:hover { background-position:-22px 0; }
a.rollover2 { display:block; width:12px; height:25px; text-decoration:none; background:url(http://www.outshinefamily.com/images/face.png); }
a.rollover2:hover { background-position:-12px 0; }

/* Entry Styles */
.wrap { padding:10px; margin-bottom:20px; float:left; }
.box { margin:5px 20px 5px -5px; float:left; padding:13px 5px 10px; }
.box:hover { background:rgba(255,255,255,0.2); cursor:pointer; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
.col1 { width:180px; float:left; }
.box img { padding-bottom:10px; }

/* Tweet Style */
#tweet { width:130px; height:20px; margin:30px 0 10px; border-bottom:1px dotted #fff; border-top:1px dotted #fff; }
#tweet p { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:12px; font-weight:300; font-style:normal; letter-spacing:1px; line-height:13px; padding-top:4px; color:#fff; }
#twitterSearch { width:130px !important; margin:180px 0 0 15px; }
#twitterSearch p.text { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; line-height:13px; padding-bottom:15px; color:#FFF; }
#twitJoin { height:25px; margin-top:2px; float:left; }

/* Text Styles */
a:link { color:#FFF; text-decoration:none; outline:none; }
a:visited { color:#FFF; text-decoration:none; outline:none; }
a:hover { color:#09C; text-decoration:none; outline:none; font-style:italic; }
a:active { color:#CCC; text-decoration:none; outline:none; }
a.pk:link { color:#09C; text-decoration:none; outline:none; }
a.news:hover { color:#0099FF; text-decoration:none; }
p { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; line-height:13px; color:#FFF; padding-bottom:10px; }
.hyphenate { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; line-height:13px; color:#FFF; padding-bottom:10px; }
.date { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:500; font-style:normal; letter-spacing:1px; color:#FFF; padding-bottom:4px; border-bottom:1px solid #FFF; margin-bottom:15px; }
.other { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; color:#FFF; border-bottom:1px solid #FFF; padding:5px 0; text-align:right; }
.other2 { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; color:#FFF; border-bottom:1px solid #FFF; padding:5px 0; text-align:left; }
.bottom { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; color:#999; padding-top:9px; text-align:left; }
.small { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:8px; font-weight:100; font-style:normal; letter-spacing:1px; line-height:9px; color:#FFF; padding:5px; }
.above { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:100; font-style:normal; letter-spacing:1px; color:#FFF; padding:5px 0; }
h1 { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:14px; font-weight:100; font-style:normal; padding:5px 0; color:#FFF; border-bottom:1px solid #FFF; }
h2 { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:11px; font-weight:500; font-style:normal; text-decoration:underline; letter-spacing:1px; padding-bottom:10px; color:#FFF; }
h3 { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:9px; font-weight:100; font-style:normal; letter-spacing:.06em; padding-bottom:5px; color:#FFF; }
h4 { font-family:museo-sans-1, museo-sans-2, sans-serif; font-size:.75em; font-style:normal; font-weight:300; letter-spacing:.06em; padding-top:10px; color:#FFF; }
.title { font-family:"Century Gothic", sans-serif; font-size:.88em; font-weight:400; color:#000; }

/* Form Style */
.message { width:310px; padding-bottom:10px; font-family:museo-sans-1, museo-sans-2; font-size:10px; color:#09C; font-style:normal; font-weight:100; letter-spacing:1px; line-height:12px; display:none; }
.contact { text-align:left; }
.contact ul { list-style-type:none; width:310px; padding-bottom:20px; }
.contact li { list-style-type:none; }
.contact li.special { display:none; }
.contact input { width:310px; height:22px; background-color:transparent; border:1px solid #fff; font-family:museo-sans-1, museo-sans-2; font-size:11px; color:#fff; 
font-style:normal; font-weight:100; }
.contact textarea { width:310px; background-color:transparent; border:1px solid #fff; font-family:museo-sans-1, museo-sans-2; font-size:11px; color:#fff; padding:10px 0 0 5px; font-style:normal; font-weight:100; letter-spacing:1px; }
body div input.button { width:90px; float:right; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; margin:5px 0 0; background:#000; font-family:museo-sans-1, museo-sans-2; font-weight:300; font-style:normal; color:#FFF; padding:0 auto; cursor:pointer; border:none; clear:inherit; }
.button:hover { background:#09C; }

/* MAIL CHIMP  */
#message { height:24px; float:left; margin-left:275px; }
#subscribe { height:24px; width:315px; float:right; margin:2px 0 5px; }
#mce-EMAIL { height:17px; float:left; margin:3px 0 0; background-color:#000; border:1px solid #999; font-family:museo-sans-1, museo-sans-2; font-weight:100; font-style:normal; color:#999; }
#mce-FNAME { height:17px; float:left; margin:3px 0 0 10px; background-color:#000; border:1px solid #999; font-family:museo-sans-1, museo-sans-2; font-weight:100; font-style:normal; color:#999; }
.response { overflow:visible; float:right; margin:-35px 0 0; }
#mce-responses { height:25px; float:right; overflow:visible; margin:-30px 0 0; }
#mce-success-response { font-family:museo-sans-1, museo-sans-2; font-size:10px; font-weight:100; font-style:normal; color:#fff; }
#mce-error-response { font-family:museo-sans-1, museo-sans-2; font-size:10px; font-weight:100; font-style:normal; color:#09C; }
.mce_inline_error { float:left; overflow:visible; margin:-20px 0 0 -110px; font-family:museo-sans-1, museo-sans-2; font-size:10px; font-weight:100; font-style:normal; color:#fff; }
#mc-embedded-subscribe { position:absolute; }
.btn { height:17px; float:right; margin:5px 0 0 10px; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; background:#999; font-family:museo-sans-1, museo-sans-2; font-weight:300; font-style:normal; color:#000; cursor:pointer; border:none; }
.btn:hover { background:#09C; color:#000; }