@viewport {
	width: device-width;
    zoom: 1.0;
}

@-ms-viewport {
    width: device-width;
    zoom: 1.0;
}

/* -------------- LAYOUT COMPONENTS ----------------- */

/* .hover {display:none;position:absolute;left:0;top:0;width:300px;height:200px;color:black;background-color:transparent;z-index:2;} */

html {
	font-size: 18px;
	font-family:arial,helvetica,sans-serif;
	width: 100%;
	height: 100%;
	max-width:100%;
	margin: 0;
	padding: 0;
	}

body {
	color: black;
	background-color: #ffff99;
	width: 100%;
	max-width:100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

div#header {
	width:100%;
	max-width:100%;
	display:block;
	background-color:#ccffff;
	position:relative;
}

div#masthead {
	padding:0;
	margin: 0 auto;
	text-align:center;
	max-width:100%;
	white-space: nowrap;
	position:relative;
}

img.size {
	border:0;
	height:100%;
	max-height:100%;
	min-height:100%;
}

#cut1 {width:5.8%;}
#cut2 {width:20.29%;}
#cut3 {width:51.37%;}
#cut4 {width:4.35%;}
#cut5 {width:18.2%;}

div#barholder {
	background-color:white;
	background-image: url('../images/menu/buttonbar_background.jpg');
	background-repeat: repeat-x;
	width:100%;
	max-width:100%;
	height:35px;
	text-align:center;
	padding:0;
	margin: 0 auto;
	position:relative;
}

div#menubuttons {
	position:relative;
	max-width:100%;
	width:680px;
	text-align:center;
	margin: 0 auto;
}

.buttons {border:0;padding-right:5px;}

div#page {
	position:relative;
	background-color: #ffffff;
	border: solid black 3px;
	margin:0 auto;
	padding: 0;
	width:66%;
	max-width:100%;
	height:auto;
	min-height:400px;
	min-width:260px;
}

/* -------------- RESPONSIVE COMPONENTS ----------------- */

.hSize {
	width:620px;
	height:130px;
}

@media screen and (max-width: 320px) {
	html {font-size: 11px;}
	div#page {width:99%;border:1px solid black;margin-top:10px;}
	.hSize {width:310px;height:65px;}
	div#barholder {height:105px;background-image: url('../images/menu/buttonbar_background-tallest.jpg');	}
	div#menubuttons {width:230px;}
	.buttons {padding-right:2px;}
}

@media screen and (min-width:321px) and (max-width: 480px){
	html {font-size: 12px;}
	div#page {width:90%;margin-top:8px; padding:8px 0 8px 0;} /* padding 8 */
	.hSize {width:434px;height:91px;}
	div#barholder {height:105px;background-image: url('../images/menu/buttonbar_background-tallest.jpg');}
	div#menubuttons {width:230px;}
	.buttons {padding-right:3px;}
}

@media screen and (min-width:481px) and (max-width: 599px){
	html {font-size: 12px;}
	div#page {width:88%;margin-top:10px;padding:10px 0 10px 0;} /* padding 10 */
	div#barholder {height:70px;background-image: url('../images/menu/buttonbar_background-tall.jpg');}
	div#menubuttons {width:360px;}
	.buttons {padding-right:4px;}
}

@media screen and (min-width:600px) and (max-width: 720px){
	html {font-size: 12px;}
	div#page {width:85%;margin-top:15px;padding:15px 0 15px 0;}  /* padding 15 */
	div#barholder {height:70px;background-image: url('../images/menu/buttonbar_background-tall.jpg');}
	div#menubuttons {width:360px;}
}

@media screen and (min-width: 721px) and (max-width:1024px){
	html {font-size: 12px;}
	div#page {width:85%;margin-top:20px;padding:20px 0 20px 0;} /* padding 20 */
}
@media screen and (min-width: 1025px) and (max-width:1280px){
	html {font-size: 13px;}
	div#page {width:75%;margin-top:25px;padding:25px 0 25px 0;} /* padding 25 */
}

@media screen and (min-width: 1281px) and (max-width:1440px){
	html {font-size: 14px;}
	div#page {width:70%;margin-top:30px;padding:30px 0 30px 0;} /* padding 30 */
	.hSize {width:684px;height:143px;}
}

@media screen and (min-width: 1441px) and (max-width:1600px){
	html {font-size: 15px;}
	div#page {width:66%;margin-top:35px;padding:35px 0 35px 0;} /* padding 35 */
	.hSize {width:744px;height:156px;}
}

@media screen and (min-width: 1601px) {
	html {font-size: 16px;}
	div#page {width:60%;margin-top:40px;padding:40px 0 40px 0;} /* padding 40 */
	.hSize {width:806px;height:169px;}
}


/* -------------- FONTS ----------------- */

a:focus, a:active {outline: 0; -moz-outline: none;}
a.uppercase {font-size: .7em; color: #3333cc; font-weight: bold; text-decoration: none; padding: 10px;}
a.uppercase:visited {color: #3333cc; text-decoration: none;}
a.uppercase:hover {text-decoration: underline; color: #cc0033; }
a.uppercase:active {text-decoration: underline; color: #ff6699;}
#barholder a {text-decoration:none;padding:0;margin:0;color:white;}

H1 {
	color : #CC3366;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 200%;
	font-weight : 900;
	text-align : center;
	text-transform : capitalize;
	padding-bottom : 0%;
	margin-bottom : 0%;
}

H2 {
	color : #CC3366;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 170%;
	font-weight : bold;
	text-align : center;
	text-transform : none;
	text-decoration : none;
}

H3 {
	color : #CC3366;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 130%;
	font-weight : bold;
	text-align : center;
	text-transform : none;
	text-decoration : none;
}

H4 {
	color : #CC3366;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 130%;
	font-weight : bold;
	text-align : center;
	text-transform : none;
	margin-bottom : 0%;
	margin-top : 0%;
	padding-bottom : 0%;
	padding-top : 0%;
}

H5 {
	color : Black;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 115%;
	font-weight : bold;
	text-align : left;
	text-transform : uppercase;
}

H6 {
	color : Black;
	font-family : Arial, Helvetica, sans-serif;
	font-size : 115%;
	font-style : italic;
	font-weight : bold;
	text-align : left;
	text-transform : none;
}


/* -------------- CLASSES ----------------- */

CAPTION {
	font-family : "Times New Roman", Times, serif;
	font-weight : normal;
	font-size : -1;
}

.title {
	color: #B02D5A;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bold;
	font-size : 20px;
}

.titleblack {
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bold;
	font-size : 24px;
	color : Black;
}

.titleblack18px {
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bold;
	font-size : 18px;
	color : Black;
}

.smalllink {
	color: #B02D5A;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bold;
	font-size : 10px;
	text-decoration : none;
}

.body {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}

.medium {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.bignbold {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
}

.small {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.smallgrey {
	color: #5E5E5E;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}

.media {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-weight : bold;
	font-size: 12px;
}

.albumtitle {
	color: #B02D5A;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bolder;
	font-size : 18px;
}

.songlist {
	color: black;
	font-family : Arial, Helvetica, sans-serif;
	font-weight : bold;
	font-size : 12px;
}

.tinytext {
	color: black;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}

.radiomonth {
	color: #E12385;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight : bolder;
	text-decoration : underline;
}

.footertext {
	font-family:Arial,Helvetica,sans-serif;
	font-size:11px;
	color:#8D8E9E;
 }

.greybigtext {
	font-family:Arial,Helvetica,sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#8D8E9E;
	text-align : center;
}