/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

a:link,a:visited,a:focus  { outline:0; border: none; }

.preload { left:-9999px; top:-9999px; position:absolute; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body { height:100%; padding:0; margin:0; }

body {   background:#000000;  overflow-x:hidden;   }
body.ageGate {   background:#ffdc00;  overflow-x: hidden;   }

h1, h2, h3, h4, h5 {
    font-family: Verdana, Sans-Serif;
}

#mainContainer { margin:0 auto; display:block; width:100%; height:900px; background:url('../img/yellowBg.jpg') no-repeat center top #ffdc00; overflow:hidden;  }
#mainPageContainer { margin:0 auto; display:block; width:100%; /*width:1280px;*/ height:100%; /*background:url('../img/background1.jpg') no-repeat center top #000;*/ background:#000;  }
#mainDiscoverPageContainer { margin:0 auto; display:block; width:100%; height:880px; background:url('../img/background2.jpg') no-repeat center top #000; overflow:hidden;   }

.contentFull { margin:0; display:block; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1;  }

.content { margin:0 auto; display:block; border:0px solid red; width:810px; height:100%; position:relative; z-index:1;  }


/*--- AGE CHECK ---*/
.snoopDogg { background:url('../img/age-snoop.png') no-repeat 0px 0px transparent; width:563px; height:509px; display:block; position:absolute; top:36px; left:60px; z-index:0;  }
.snoopGuy { background:url('../img/guy1.png') no-repeat 0px 0px transparent; width:583px; height:530px; display:block; position:absolute; top:-20px; left:170px; z-index:1;  }
.snoopGuySmoke { background:url('../img/guy2.png') no-repeat 0px 0px transparent; width:583px; height:530px; display:none; position:absolute; top:-20px; left:170px; z-index:1;  }


.ageBox { background:url('../img/age-title.png') no-repeat 0px 0px transparent; width:809px; height:307px; display:block; position:absolute; top:340px; left:0px; z-index:2;  }

.footer { background:url('../img/footer.png') no-repeat 0px 0px transparent; width:810px; height:192px; display:block; position:absolute; bottom:20px; left:0px; z-index:2;  }
.pageFooter .content { background:url('../img/footer-page.png') no-repeat 0px 0px transparent; width:810px; height:238px; display:block; z-index:2;  }
.pageFooter .content a, .footer a { text-indent: -9000px; }
.link-1 { border: 0px solid red;    display: block;    height: 85px;    position: absolute;    right: 0;    top: 50px;    width: 65px; }
.link-2 { border: 0px solid red;    display: block;    height: 46px;    position: absolute;    right: 90px;    top: 80px;    width: 145px; }
.link-3 { border: 0px solid red;    display: block;    height: 46px;    position: absolute;    right: 238px;    top: 80px;    width: 124px; }
.link-4 { border: 0px solid red;    display: block;    height: 46px;    position: absolute;    right: 366px;    top: 80px;    width: 68px; }
.link-5 { border: 0px solid red;    display: block;    height: 46px;    position: absolute;    right: 193px;    top: 30px;    width: 68px; }
.link-6 { border: 0px solid red;    display: block;    height: 46px;    position: absolute;    right: 545px;    top: 80px;    width: 110px; }


.footer .link-1 { 
    display: block;
    height: 50px;
    left: 200px;
    position: absolute;
    top: 60px;
    width: 194px;
}
.footer .link-2 { 
    display: block;
    height: 50px;
    left: 390px;
    position: absolute;
    top: 60px;
    width: 140px;
}
.footer .link-3 { 
    display: block;
    height: 50px;
    right: 50px;
    position: absolute;
    top: 10px;
    width: 110px;
}
.footer .link-4 { 
    display: block;
    height: 50px;
    right: 160px;
    position: absolute;
    top: 10px;
    width: 65px;
}



form .content.ageHolder div input:focus {
    color: #333; background: #9a9a9a;
}

form .content.ageHolder { padding:230px 0px 0px 0px; }
form .content.ageHolder h1 { font-family: Verdana, Sans-Serif; font-weight:normal; font-size:32px; color:#fff; text-align:center; text-transform:uppercase; padding-bottom:5px;  }
form .content.ageHolder { width:300px; margin:0 auto; font-family:Verdana, Sans-Serif; font-weight:normal; }
form .content.ageHolder div { float:left; margin:0px 5px;}
form .content.ageHolder div label { display:none;  }
form .content.ageHolder div input { position:relative; width:100px; padding:5px; border:2px solid #fff; background-color:#000; color:#ffdc00; text-align:center; font-family: Verdana, Sans-Serif; font-weight:bold; font-size:20px;}
form .content.ageHolder div input.smaller { width:60px; }
form .content.ageHolder div.confirmBtn { clear:both; padding:0px 0px 0px 0px; width:280px; margin:0 auto; text-align:center; }
form .content.ageHolder div.confirmBtn input {  background:url(../img/submit.jpg) center -8px #333; height:40px;  font-size:32px; padding:5px; width:50%; cursor:pointer; font-family:Verdana, Sans-Serif;}
form .content.ageHolder div.confirmBtn input:hover { background:url(../img/submit-hover.jpg) center -8px #333;  font-family: 'ImpactRegular',Impact, Charcoal, Sans-Serif; }
form .content.ageHolder div.checkbox {width: 100%;text-align: center;margin-left: -3px; font-size: 14px;margin-top: 5px; font-family: Verdana, Sans-Serif; margin-bottom:10px;}
form .content.ageHolder div.checkbox input {width: 20px;top: 0px;}
form .content.ageHolder div.checkbox input.remember { background:transparent; float:left; }

form .content.ageHolder div input.error { color:Red; }

form .content.ageHolder div.checkbox input { border:0; height:20px; width:auto; height:auto; padding:5px; background:#fff; margin:5px; }

form .content.ageHolder div.checkbox.rememberMe { width:160px; margin:0px auto; float:none; }
form .content.ageHolder div.checkbox.rememberMe div { margin:5px 0; }
.rememberText { background:url('../img/rememberme.png') no-repeat 0px 0px transparent; width:120px; height:25px; text-indent:-9000px; display:block; float:right; }

h2.ageError { 
    background: none repeat scroll 0 0 #fff;
    border: 10px solid #000; bottom: 0;
    color: #000;  display: block;  margin: 230px auto 0 auto; border-radius: 15px;
    padding: 10px; position: relative;  width: 50%;  font-size:18px;    
}

/*--- TITLES ---*/
h1.titleOne { background:url('../img/title1.png') no-repeat 0px 0px transparent; width:810px; height:66px; display:block; position:relative; z-index:10;  text-indent:-9000px; cursor:pointer; }
h1.titleTwo { background:url('../img/title2.png') no-repeat 0px 0px transparent; width:810px; height:66px; display:block; position:relative; z-index:10;  text-indent:-9000px; cursor:pointer; }
h1.titleThree { background:url('../img/title3.png') no-repeat 0px 0px transparent; width:810px; height:66px; display:block; position:relative; z-index:10;  text-indent:-9000px; cursor:pointer; }
h1.titleFour { background:url('../img/title4.png') no-repeat 0px 0px transparent; width:810px; height:66px; display:block; position:relative; z-index:10;  text-indent:-9000px; cursor:pointer; }


/*--- MAIN NAV ---*/

.nav { position:absolute; z-index:5; padding:90px 0px 0px 10px; width:auto;}
.nav ul { padding:0px; margin:0px; width:380px; }
.nav ul li { list-style:none; padding:0; margin:0 0 5px 0; width:380px; height:67px; display:block; }
.nav ul li a { padding:0; margin:0 0 0 0; width:380px; height:67px; display:block; text-indent:-9000px; }
.nav ul li a:hover { zoom: 1;	filter: alpha(opacity=80);	opacity: 0.8; }
.nav ul li.link1 a { background:url('../img/btn1.png') no-repeat 0px 0px transparent; }
.nav ul li.link2 a { background:url('../img/btn2.png') no-repeat 0px 0px transparent; }
.nav ul li.link3 a { background:url('../img/btn3.png') no-repeat 0px 0px transparent; }
.nav ul li.link4 a { background:url('../img/btn4.png') no-repeat 0px 0px transparent; height:97px; }

.snoopDogg2 { background:url('../img/page-snoop.png') no-repeat 530px 0px transparent; width:780px; height:640px; display:block; position:absolute; top:36px; right:10px; z-index:1;  }
.snoopGuy2 { background:url('../img/page-guy.png') no-repeat 0px 0px transparent; width:400px; height:640px; display:block; position:absolute; top:50px; right:10px; z-index:2;  }

/*--- DISCOVER ---*/
.section.waydogg { margin:0 auto; display:none; width:100%; height:600px; background:url('../img/background2.jpg') no-repeat center top #000; overflow:hidden; position:absolute; top:0px; left:0px; z-index:10;  }

.section.discover { margin:0 auto; display:none; width:100%; height:600px; background:url('../img/background2.jpg') no-repeat center top #000; overflow:hidden; position:absolute; top:0px; left:0px; z-index:10;  }
.section.discover .content { height: 600px; }
.section.discover.open { background: none; }

.snoopDogg3 { background:url('../img/page-snoop-left.png') no-repeat 0px 0px transparent; width:300px; height:530px; display:block; position:absolute; top:0px; left:-380px; z-index:0;  }
.snoopGuy3 { background:url('../img/page-guy-right.png') no-repeat 0px 0px transparent; width:300px; height:530px; display:block; position:absolute; top:50px; right:-360px; z-index:0;  }
.gallery { display:none; width:490px; height:330px; position:relative; top:45px; margin:0 auto; background:url('../img/video.png') no-repeat 0px 0px transparent;  }

/*--- UNLOCK ---*/
.section.unlock { margin:0 auto; display:none; width:100%; height:600px;background:url('../img/background2.jpg') no-repeat center top #000; overflow:hidden; position:absolute; top:0px; left:0px; z-index:10;  }
.section.unlock .content { height: 600px; }
.section.unlock.open { background: none; }

/*--- BEAT ---*/
.section.findTheBeat { margin:0 auto; display:none; width:100%; height:600px; background:url('../img/background2.jpg') no-repeat center top #000; overflow:hidden; position:absolute; top:0px; left:0px; z-index:10;  }
.section.findTheBeat .content { height: 600px; }
.section.findTheBeat.open { background: none; }

/*--- JOIN US ---*/
.section.joinUs { margin:0 auto; display:none; width:100%; height:600px; background:url('../img/background2.jpg') no-repeat center top #000; overflow:hidden; position:absolute; top:0px; left:0px; z-index:10;  }
.section.joinUs .content { height: 600px; }
.section.joinUs .content .gallery { display:none; width:490px; height:330px; position:relative; top:45px; margin:0 auto; background:url('../img/4-bg.png') no-repeat 0px 0px transparent; }
.section.joinUs .content .gallery h2 { background:url('../img/4-follow.png') no-repeat 0px 0px transparent; height:76px; width: 312px; text-indent: -9000px; margin: 0 auto; position: relative; top: -40px; z-index: 5; }
.section.joinUs .downloadBlock {  margin: 0 auto; display:block; position: relative; z-index: 10; display: none; left: 60px; bottom: 10px; background:url('../img/4-download.png') no-repeat 0px 0px transparent; height: 146px; }
.section.joinUs .downloadBlock .link-2 { float: left;    height: 88px;    left: 156px;    position: absolute;    text-indent: -9000px;    top: 34px;    width: 160px; }
.section.joinUs .content .gallery a { text-indent: -9000px; float: left; margin: 15px; }
.section.joinUs .content .gallery a:hover { background-position: left bottom; }
.section.joinUs .content .gallery .buttons { width: 408px; margin: 0 auto; position: relative; bottom: 40px; }
.facebookBtn { width: 174px; height:174px; background:url('../img/4-facebook.png') no-repeat 0px 0px transparent; display: block;  }
.twitterBtn { width: 174px; height:174px; background:url('../img/4-twitter.png') no-repeat 0px 0px transparent; display: block;  }
.section.joinUs.open {
    background: none;
}



/*---ANIMATION TEST ---*/

.parallax-holder { position:absolute; top:0px; left:0px; width:810px; height:800px;}
/* 
.parallax-viewport {
    height: 600px;
    max-width: 810px;
    width: 520px;
    overflow: hidden;
    position:relative;
    float:right;
}*/

.parallax-viewport {
    height: 600px;
    overflow: hidden;
    position:relative;
    /*float:left;
    width: 1280px;*/
}

.snoopDoggBg { background:url('../img/background0.jpg') repeat-x 0px 0px #000; width:1600px; height:800px; display:block; position:absolute; top:0px; right:0px; z-index:0;  }


/*---FOOTER --*/

.pageFooter {
    bottom: 0;
    display: block;
    margin: 0;
    width: 100%;
    background-color:#000;
}

.motherFooter {   }


/*---Hide these fools for now---*/

/*---IFRAME VIDEOS ---*/
.slides li iframe { margin: 0 auto; display: block; }

/*---Responsive---*/

@media only screen and (max-width: 990px) {
    #mainPageContainer { width: auto; }
}



/*---404---*/
.pagenotFound { background:url('../img/404-title.png') no-repeat 0px 0px transparent; width:809px; height:307px; display:block; position:absolute; top:340px; left:0px; z-index:2;  }


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/*Overlay*/

#Overlay
{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;    
background-image:url('../img/bg_mask.png');
}
    
.overlay-content {
background-color: white;
 border: 10px solid #000;
color: black;
font-size: 11px;
margin: 300px auto;
padding: 20px;
width: 600px;
 border-radius: 15px;
    padding: 20px;
}


.right
{
    float:right;
    }
    
#ShowCookies
{
 display:block;
  margin:20px auto 0 auto;
  width:100px;
  color:black; font-size: 12px;
}

.footer2
{
    width: 810px;
display: block;
position: absolute;
bottom: 0px;
left: 0px;
z-index: 3;
}

#cookiesNeeded
{
    background: none repeat scroll 0 0 #fff;
    border: 10px solid #000;
    bottom: 0;
    color: #000;
    display: block;
    margin: 230px auto 0 auto;
    border-radius: 15px;
    padding: 10px;
    position: relative;
    width: 50%;
    font-size: 18px;
 }
 
 #cookiesNeeded p
 {
     text-align:center; font-size: 12px;
 }