/* 
-------------------------------------------------------------------------------------------

when it drops

-------------------------------------------------------------------------------------------
*/


/*****************************************************
* Global
*****************************************************/

*     { padding: 0; margin: 0; }
img   { border: 0; }
ul    { list-style: none; }
.hide { display: none !important; }
hr    { border: 0; height: 0; }
table { border-collapse: collapse; }

@font-face {
	font-family: 'Quicksand';
	src: url('../fonts/Quicksand_Bold-webfont.eot');
	src: local('☺'), url('../fonts/Quicksand_Bold-webfont.woff') format('woff'), url('../fonts/Quicksand_Bold-webfont.ttf') format('truetype'), url('../fonts/Quicksand_Bold-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	font: normal 62.5% 'Quicksand', Helvetica, Verdana, Arial, sans-serif;
	color: #8c8f91;
	background: #fff url(../images/bg.gif) repeat-x;
}

h1, h2, h3, h4, h5 {
	
}

p {
	font-size: 125%;
	line-height: 140%;
	margin: 0 0 1em 0;
}

a, 
a:visited {
	color: #8c8f91;
	text-decoration: none;
}

a:hover {
	color: #3c3f41;
}

.clear {
    position: relative;
    clear: both;
}

.nomargin      { margin: 0; }
.nopadding     { padding: 0; }
.float_l       { float: left; }
.float_r       { float: right; }

*.round_5px {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
*.round_10px {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div#container {
    position: relative;
    width: 890px;
    margin: 0 auto;
}

    div#header { text-align: center; }
    
        h1 {
            width: 555px;
            height: 50px;
            margin: 40px auto 15px auto;
            background: url(../images/logo.png) no-repeat center top;
        }
        
            h1 a {
                display: block;
                width: 100%;
                height: 100%;
                text-indent: -7777px;
            }
            /* h1 a:hover { background: url(../images/logo.png) no-repeat left bottom; } */
            
        h2 {
            font-weight: normal;
            font-size: 120%;
            line-height: 100%;
            color: #8c8f91;
            text-transform: uppercase;
            margin: 0 0 40px 0;
            letter-spacing: 1px;
        }
        
    div#fbook_like {
        position: absolute;
        top: -35px;
        left: 0;
    }
        
    div#nav { text-align: center; }
    
        #nav ul {
            height: 45px;
            padding: 0 0 50px 90px;
        }
    
        #nav ul li {
            display: block;
            float: left;
            width: 130px;
            height: 40px;
            margin: 0 25px;
        }
        
            #nav ul li a {
                display: block;
                width: 100%;
                height: 100%;
                text-transform: uppercase;
                font-size: 120%;
                color: #bfc6ca;
                background: url(../images/nav.gif) no-repeat;
                border-bottom: 1px solid #fff;
            }
            #nav ul li a:hover {
                color: #a4aeb5;
                border-bottom: 1px solid #bfc6cb;
            }
            #nav ul li.active a,
            #nav ul li.active a:hover {
                color: #8c8f91;
                cursor: default;
                border-bottom: 4px solid #5b5f62;
            }
            
            #nav ul li#this_week a { background-position: -130px top; }
            #nav ul li#next_week a { background-position: -260px top; }
            #nav ul li#two_weeks a { background-position: right top; }
            
            #nav ul li#last_week a:hover { background-position: left -40px; }
            #nav ul li#this_week a:hover { background-position: -130px -40px; }
            #nav ul li#next_week a:hover { background-position: -260px -40px; }
            #nav ul li#two_weeks a:hover { background-position: right -40px; }
            
            #nav ul li#last_week.active a, #nav ul li#last_week.active a:hover { background-position: left bottom; }
            #nav ul li#this_week.active a, #nav ul li#this_week.active a:hover { background-position: -130px bottom; }
            #nav ul li#next_week.active a, #nav ul li#next_week.active a:hover { background-position: -260px bottom; }
            #nav ul li#two_weeks.active a, #nav ul li#two_weeks.active a:hover { background-position: right bottom; }
            
                #nav ul li a strong { display: none; }
		
		
/*****************************************************
* Content area
*****************************************************/

div.releases {
	display: block;
	position: relative;
	padding: 0 0 10em 0;
}

    .releases h3 {
        text-indent: -7777px;
        height: 30px;
        background: url(../images/h3s.gif) no-repeat left top;
        margin: 0 0 2.5em 0;
    }
    #r_music.releases h3 { background-position: left -30px; }
    #r_dvds.releases h3  { background-position: left -60px; }
    #r_games.releases h3 { background-position: left -90px; }
    #r_books.releases h3 { background-position: left bottom; }

    .releases ul.list {
        margin: 0 0 0 -30px;
    }

	.releases ul.list li {
	    display: block;
		float: left;
		position: relative;
		width: 200px;
		margin: 0 0 30px 30px;
	}
	
	    .releases ul.list li img {
	        max-width: 200px;
	    }
	    
	    div.more_info {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			height: 100%;
			background: rgba(60,63,66,.90);
			cursor: default;
		}
		ul li:hover div.more_info { display: block; }
		
		    .more_info span {
		        display: block;
		        position: absolute;
				left: 0;
				bottom: 0;
				width: 170px;
				padding: 15px;
		    }
		
		    .more_info h4 {
				color: #fff;
				text-transform: none;
				font: bold 200%/100% Helvetica, Arial, Verdana, sans-serif;
				padding: 0 0 5px 0;
			}
			#r_music .more_info h4 { font-size: 175%; }
			
		    .more_info h5 {
				display: block;
				font: normal 130%/100% Helvetica, Arial, Verdana, sans-serif;
				color: rgba(255,255,255,.50);
			}
			
			.releases .more_info ul { margin: 15px 0 0 15px; }
			
			.releases .more_info ul li {
				float: left;
				width: auto;
				margin: 0 10px 0 0;
				overflow: visible;
			}
			.releases .more_info ul li.tomato,
			.releases .more_info ul li.amg {
			    position: relative;
			    overflow: visible;
			    background: #9cd841;
			    width: 170px;
			    height: 20px;
			    padding: 0;
			    margin: 10px 0 0 0;
			    -moz-border-radius: 7px;
			    -webkit-border-radius: 7px;
			    border-radius: 7px;
			}
			.releases .more_info ul li.amg {
			    height: 14px;
			    background-color: none;
			    background: url(../images/sprite_stars.png) no-repeat 76px top;
			}
			
    			.more_info ul li a.button,
    			.more_info ul li a.button:visited {
    				display: block;
    				background: rgba(0,0,0,0.90);
    				padding: 7px 0;
    				text-align: center;
    				text-transform: uppercase;
    				color: rgba(255,255,255,0.70);
    				font-size: 100%;
    				text-decoration: none;
    				-moz-border-radius: 5px;
    			    -webkit-border-radius: 5px;
    			    border-radius: 5px;
    			}
    			.more_info ul li a.button:hover {
    				background: rgba(255,255,255,0.90);
    				color: #333;
    			}
    			
    			.more_info ul li.tomato a,
    			.more_info ul li.tomato a:visited,
    			.more_info ul li.amg a,
    			.more_info ul li.amg a:visited {
    			    position: absolute;
    			    top: 0;
    			    left: 0;
    			    display: block;
    			    width: 163px;
    			    height: 40px;
    			    background: 0;
    			    font: bold 130%/100% Helvetica, Verdana, Arial, sans-serif;
    			    text-align: left;
    			    color: #fff;
    			    padding: 4px 0 0 7px;
    			    z-index: 33;
    			}
    			.more_info ul li.amg a,
    			.more_info ul li.amg a:visited {
    			    height: 14px;
    			    text-indent: -7777px;
    			}
			
    			a.button.trailer { width: 67px; }
    			a.button.tickets { width: 93px; }
    			a.button.amazon  { width: 87px; }
    			a.button.itunes  { width: 73px; }
    			a.button.netflix { width: 80px; }
    			a.button.bn,
    			a.button.ign     { width: 70px; }
    			a.button.bomb    { width: 65px; }
    			a.button.noble   { width: 48px; }
    			#r_dvds a.button.amazon  { width: 80px; }
    			#r_books a.button.amazon,
    			#r_games a.button.amazon { width: 90px; }
    			.more_info ul li a.button.itunes { text-transform: none; }
    			
    			.more_info ul li.tomato div {
    			    display: block;
    			    height: 20px;
    			    background: #ef7205;
    			    -webkit-border-top-left-radius: 5px;
                    -webkit-border-bottom-left-radius: 5px;
                    -moz-border-radius-topleft: 5px;
                    -moz-border-radius-bottomleft: 5px;
                    border-top-left-radius: 5px;
                    border-bottom-left-radius: 5px;
    			}
    			.more_info ul li.tomato.round div {
    			    -moz-border-radius: 5px;
			        -webkit-border-radius: 5px;
			        border-radius: 5px;
			    }
    			
    			.more_info ul li.amg div {
    			    display: block;
    			    height: 14px;
    			    background: url(../images/sprite_stars.png) no-repeat 76px top;
    			}
    			.more_info ul li.amg div.stars_05 { background-position: 76px -14px; }
    			.more_info ul li.amg div.stars_10 { background-position: 76px -28px; }
    			.more_info ul li.amg div.stars_15 { background-position: 76px -42px; }
    			.more_info ul li.amg div.stars_20 { background-position: 76px -56px; }
    			.more_info ul li.amg div.stars_25 { background-position: 76px -70px; }
    			.more_info ul li.amg div.stars_30 { background-position: 76px -84px; }
    			.more_info ul li.amg div.stars_35 { background-position: 76px -98px; }
    			.more_info ul li.amg div.stars_40 { background-position: 76px -112px; }
    			.more_info ul li.amg div.stars_45 { background-position: 76px -126px; }
    			.more_info ul li.amg div.stars_50 { background-position: 76px bottom; }
    			
    			.more_info ul li.tomato span,
    			.more_info ul li.amg span {
    			    position: absolute;
    			    top: 27px;
    			    left: 0;
    			    width: 170px;
    			    text-align: center;
    			    text-transform: uppercase;
    			    padding: 0;
    			    letter-spacing: 1px;
    			    z-index: 32;
    			}
    			.more_info ul li.amg span {
    			    top: 3px;
    			    text-align: left;
    			}
		
	a.more {
	    display: block;
	    text-align: center;
	    text-transform: uppercase;
	    letter-spacing: 2px;
	    font-size: 120%;
	    line-height: 100%;
	    background: #edeff0;
	    border: 1px solid #edeff0;
	    padding: 20px;
	}
	a.more:hover {
	    border: 1px dashed #d0d6d9;
	}
	a.more:active {
	    background: #e3e6e8;
	    border: 1px solid #d0d6d9;
	}



/*****************************************************
* Footer
*****************************************************/
	
div#footer {
    display: block;
    background: #edeff0;
    padding: 70px 0;
}

    #footer p {
        width: 890px;
        font: normal 210%/140% Helvetica, Arial, Verdana, sans-serif;
        margin: 0 auto;
        padding: 0 0 20px 0;
    }
    #footer p.ad {
        text-align: center;
        font: normal 110%/100% 'Quicksand', Helvetica, Verdana, Arial, sans-serif;
        text-transform: uppercase;
        letter-spacing: 2px;
    }
    #footer p.small {
        font-size: 140%;
        padding: 30px 0 0 0;
    }
    
    ul#sponsors {
        display: block;
        width: 890px;
        margin: 0 auto;
        padding: 10px 0 70px 0;
    }
        ul#sponsors li {
            float: left;
            position: relative;
            width: 444px;
            font: normal 140%/140% Helvetica, Arial, Verdana, sans-serif;
            border-right: 1px solid #d0d6d9;
            padding: 0;
        }
        
            ul#sponsors li span {
                position: absolute;
                top: 5px;
                left: 200px;
                width: 190px;
            }
            
            ul#sponsors li img {
                margin: 0 0 0 65px;
            }
    
    #footer a,
    #footer a:visited {
        font-weight: bold;
        color: #5b5f62;
    }
    #footer a:hover {
        color: #222;
    }


/*****************************************************
* Responsive Styles
*****************************************************/