div#content a, div#footer a {
	color: black;
	text-decoration: none;
	border-bottom: 1px dashed;
}
div#loading {
	background-color: white;
	font-size: 45px;
	text-align: center;
}
body {
	margin: 0;
	background-color: gray;
	background-image: url(images/background.png);
	background-image: -webkit-image-set( url(images/background.png) 1x,
										 url(images/background-2x.png) 2x);
	font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Light";
}

p {
	margin-left: 10px;
	margin-top: 5px;
}

div#topbar {
	background-color: rgb(31, 34, 37);
	height: 85px;
	margin: 0;
	padding-top: 15px;
}

div#topbar h1 {
	text-indent: -9999px;
	background: url(images/logo.png);
	background: -webkit-image-set( url(images/logo.png)    1x,
                                   url(images/logo-2x.png) 2x);
                                   
    height: 64px;
    width: 300px;
    margin: 0;
}

div#container {
	width: 950px;
	margin: auto;
	border: 1px solid black;
	margin-top: 15px;
	border-radius: 5px;
}

div#topbar div#navbar {
	float: right;
	margin-right: 10px;
}

div#topbar div#navbar ul {
	list-style-type: none;
	margin: 0;
	margin-top: -10px;
}

div#topbar div#navbar ul li {
	font-family: "HelveticaNeue-UltraLight", "Helvetica Neue Light";
	font-size: 22px;
	color: white;
	float: left;
	margin: 0;
	margin-left: 15px;
}

div#topbar div#navbar ul li#selected {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light";
	margin-top: -1px;
}

div#topbar div#navbar ul li a {
	color: white;
	text-decoration: none;
}

div#topbar div#navbar ul li a:hover {
	color: lightgray;
	text-decoration: none;
}

/*Official Social Links*/

div#topbar div#officialstuff {
	float: right;
	color: white;
	margin-right: 10px;
}

div#topbar div#officialstuff div.social {
	height: 35px;
	width: 35px;
	float: right;
}

div#topbar div#officialstuff #facebook {
	background: url(images/social/facebook.png);
	background: -webkit-image-set( url(images/social/facebook.png)    1x,
                                   url(images/social/facebook-2x.png) 2x);
}

div#topbar div#officialstuff #twitter {
	background: url(images/social/twitter.png);
	background: -webkit-image-set( url(images/social/twitter.png)    1x,
                                   url(images/social/twitter-2x.png) 2x);
}

div#topbar div#officialstuff #itunes {
	background: url(images/social/itunes.png);
	background: -webkit-image-set( url(images/social/itunes.png)    1x,
                                   url(images/social/itunes-2x.png) 2x);
}

div#topbar div#officialstuff #instagram {
	background: url(images/social/instagram.png);
	background: -webkit-image-set( url(images/social/instagram.png)    1x,
                                   url(images/social/instagram-2x.png) 2x);
}

div#topbar div#officialstuff #store {
	background: url(images/social/store.png);
	background: -webkit-image-set( url(images/social/store.png)    1x,
                                   url(images/social/store-2x.png) 2x);
}

div#topbar div#officialstuff #youtube {
	background: url(images/social/youtube.png);
	background: -webkit-image-set( url(images/social/youtube.png)    1x,
                                   url(images/social/youtube-2x.png) 2x);
}

div#content {
	background: white;
	padding: 15px;
	border-bottom: 1px solid black;
}

div#footer {
	padding: 5px;
	background: lightgray;
	text-align: center;
	height: 20px;
	border-radius: 5px;
}

/* home content */
div#content div#sidebar {
	float: right;
}
div#content div#tweets {
	width: 300px;
}

div#content div#sitenews {
	width: 303px;
	height: 100px;
	background: url(images/insidethedrop.png);
	background: -webkit-image-set( url(images/insidethedrop.png)    1x,
                                   url(images/insidethedrop-2x.png) 2x);
                                   
	border: 1px solid black;
}

div#content div#sitenews:hover {
	background-position: 0 100px;
}

div#content div#latestvideo {
	float: left;
	padding: 5px;
	margin-left: 10px;
}

div#content div#latestvideo div#vidcontent, 
	div#content div#vidplayer {
	height: 315px;
	width: 560px;
	background: url(images/videos/promovid.jpg);
	background: -webkit-image-set( url(images/videos/promovid.jpg)    1x,
                                   url(images/videos/promovid-2x.jpg) 2x);
}

div#content div#latestvideo div#vidcontent:hover, 
	div#content div#vidplayer:hover {
	background-position: 0 315px;
}

div#content h2 {
	margin: 0;
}
div#content div#recommend {
	float: left;
}
div#content div#recommend div.recommendedvid {
	border: 1px solid black;
	margin-top: 10px;
	margin-left: 10px;
}

div#content div#recommend div#heartattack {
	height: 130px;
	width: 190px;
	background: url(images/videos/heartattack.png);
	background: -webkit-image-set( url(images/videos/heartattack.png)    1x,
                                   url(images/videos/heartattack-2x.png) 2x);
    float: left;
    z-index: 50;
}

div#content div#recommend div#heartattack:hover {
	background-position: 0 130px;
}

div#content div#recommend div#justfriend {
	height: 130px;
	width: 190px;
	background: url(images/videos/justfriend.png);
	background: -webkit-image-set( url(images/videos/justfriend.png)    1x,
                                   url(images/videos/justfriend-2x.png) 2x);
    float: left;
}

div#content div#recommend div#justfriend:hover {
	background-position: 0 130px;
}

div#content div#recommend div#livewarrior {
	height: 130px;
	width: 190px;
	background: url(images/videos/livewarrior.png);
	background: -webkit-image-set( url(images/videos/livewarrior.png)    1x,
                                   url(images/videos/livewarrior-2x.png) 2x);
    float: left;
}

div#content div#recommend div#livewarrior:hover {
	background-position: 0 130px;
}

/*videopage*/
div#content div#vidpage {
	background: url(images/curtains.jpg);
	background: -webkit-image-set( url(images/curtains.jpg) 1x,
							       url(images/curtains-2x.jpg) 2x);
	background-size: 920px 650px;
	background-repeat: no-repeat;
}

div#content div#chswitch {
	float: right;
	margin-top: -35px;
}

div#content div.videothumb div#text {
	position: relative;
	width: 150px;
	margin-left: 30px;
	text-align: center;
	height: 60px;
}
div#content div#videos {
	width: 100%;
	margin-left: 30px;
	height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	color: white;
}
div#content div.videothumb {
	float: left;
	margin-right: 10px;
	position: relative;
}

div#content div#vidpage {
	border: 1px solid black;
	padding: 15px;
	border-radius: 5px;
}

div#content div.videothumb div.playbutton {
	position: absolute;
	width: 85px;
	height: 70px;
	top: 37.5px;
	left: 60px;
	background: url(images/videos/playbutton.png);
	background: -webkit-image-set( url(images/videos/playbutton.png) 1x,
							       url(images/videos/playbutton-2x.png) 2x);
	opacity: 0.95;
}

div#content div.videothumb:hover {
	box-shadow: 0px 0px 16px white;
	opacity: 1;
}

/*About page*/
div#content div#johnnyimg {
	height: 272px;
	width: 268px;
	background: url(images/johnny.jpg);
	background: -webkit-image-set( url(images/johnny.jpg)    1x,
                                   url(images/johnny-2x.jpg) 2x);	
                                   
    float: right;
    border: 1px solid black;
}

/*Lyrics Page*/
div#content div.lyricContainer {
	float: left;
	margin-left: 10px;
	overflow: none;
	width: 450px;
}
div#content div.lyricContainer a {
	float: right;
	margin: 0;
}
div#content div.lyricContainer div#lyrics {
	float: left;
}
div#content div#nevergiveup div#neverimage {
	background: url(images/lyrics/NeverGiveUp.jpg);
	background: -webkit-image-set( url(images/lyrics/NeverGiveUp.jpg)    1x,
                                   url(images/lyrics/NeverGiveUp-2x.jpg) 2x);	
	height: 215px;
	width: 430px;
}

div#content div#nevergiveup div#neverimage:hover {
	background-position: 0 215px;
}

div#content div#summertime div#summerimage {
	background: url(images/lyrics/Summertime.jpg);
	background: -webkit-image-set( url(images/lyrics/Summertime.jpg)    1x,
                                   url(images/lyrics/Summertime-2x.jpg) 2x);	
	height: 215px;
	width: 430px;
}

div#content div#summertime div#summerimage:hover {
	background-position: 0 215px;
}

/*FanPics*/
div#content div#piclist {
	max-height: 700px;
	overflow: scroll;
}
div#content div#piclist div#text {
	margin-bottom: 15px;
}
div#content div#upload {
	float: right;
	width: 235px;
	height: 110px;
	border: 1px solid black;
	padding: 5px;
	margin-top: -15px;
	margin-right: -5px;
}

div#content div#upload form {
	float: right;
}

div#content div#upload form input[type="text"],
							input[type="submit"] {
	width: 225px;
	font-size: 22px;
	margin-left: 5px;
}

div#content div.image {
	display: inline-block;
	margin-bottom: 15px;
}
div#content div.image img {
	margin-left: 5px;
}