@import url(http://fonts.googleapis.com/css?family=Raleway:900,700);

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
	position:relative;
}

/* defaults for a large screen */
html {
	font-size: 110%;
  font-family: "Raleway","Trebuchet MS",sans-serif;
	font-weight:700;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	color:#fff;
}
body {
  background: #191708 url(images/bg2.jpg) repeat-y;
	background-size: 100%;
  margin:0;
  padding:1em 0 1em 2em;
}
#media:after {content:"big screen"}

@media (max-width:1024px) {  /* overrides for a smaller screen */
  html { font-size: 95%; }
	body{
		background-size: auto;
		padding:1em 0 1em 1em;
	}
	#media:after {content:"medium"}
}
@media (max-width:600px) { /* overrides for a tiny screen */
  html { font-size: 80%; }
	body{
		background-size: auto;
		padding:0.5em 0 0.5em 0.5em;
	}
	#media:after {content:"<40 tiny"}
}

#left {
	width:223px;
	float:left;
}
#content {
	position:absolute;
	left: 290px; top:110px;
	max-width:50rem;
	width:auto;
	clear:both;
	margin-bottom:9px;
}
@media (max-width:1024px) {  /* overrides for a smaller screen */
	#content { left: 255px; }
}
@media (max-width:600px) { /* overrides for a tiny screen */
	#content { position:relative; left:auto; top:auto; float:left; }
}

#nav {
	float: left;
}
#leftbuttons {
	clear:both;
	float:left;
	width:223px;
}
#logo {
	display:block;
	margin-top:1.4em;
	margin-bottom:6px;
}
#blurb {
	background-color:#000;
	padding:5px 8px;
	font-size:88%;
	margin-bottom:6px;
}

a     { color: #EAE415; text-decoration:none }
a:hover { color: #ffffaa; text-decoration:underline }

h1,h2,h3 {
  color:#FFF;
  font-weight:900;
  margin-top:0.1em;
  margin-bottom:0.5em;
}
h1 { font-size:200% }
h2 { font-size:140% }
h3 { font-size:110% }

.box {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
	border:4px solid #ffeb2f;
	/*background-color: rgba(5,5,5,0.7);*/
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGDYDAAAuAC0TCbBxgAAAABJRU5ErkJggg==);
	padding:0.8em 0.8em 2em 0.8em;
	margin:0 1em 1em 0;
	clear:both;
	float:left;
}

div.station {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  width:14em;
	position:relative;
	float:left;
	border:4px solid #ffeb2f;
	background-color: rgba(111,111,34,0.7);
	margin-right:1.6em;
	margin-bottom:1em;
}
div.sthead {
	background-color: #000;
	text-align:center;
	height:66pX;
	padding:5px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
div.sthead h3 { line-height:2.6em; white-space: nowrap; font-size:95% }
div.station .pad {
	padding:0.6em;
	height:7.5rem;
	display:block;
	font-size:80%;
}

.round {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
}
.pad {
	padding:0.3em;
	position:relative;
}

a.button {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: none;
  display: block;
  font-size: 93%;
  font-weight: 900;
  padding: 0.5em 0;
	text-align: center;
  white-space: nowrap;
}

a.buttonm {
  background-color: #ffff00;
  color: #000;
	width:6.1em;
	float:left;
	margin-right:1.6em;
	margin-bottom:1.1em;
}
a.selected {background-color: #ffffaf;}
a.buttonm:hover { text-decoration:none; color: #888; }
a.buttonL {
  background-color: #c3c000;
  color: #000;
	font-size: 18px;
	height:38px;
	width:223px;
	float:left;
	margin-bottom:9px;
}
a.buttonL:hover { text-decoration:none; color: #000; }

a.buttonSt {
  background-color: #ffeb2f;
  color: #4e4e0f;
	font-size: 150%;
	font-weight:900;
	width:12.6rem;
	padding:0.2em;
	text-align:center;
	position:absolute;
	bottom:6px;
}
a.buttonSt:hover { text-decoration:none; color: #FFF; }

div.leftbutton {
	clear:left;
	margin-bottom:6px;
}
div.leftbutton a {
	display: block;
	width:223px; height:38px;
	background-image:url(images/leftbuttons.png);
}
#lb_1 {background-position:0 0}
#lb_1:hover {background-position:-224px 0}
#lb_2 {background-position:0 -40px}
#lb_2:hover {background-position:-224px -40px}
#lb_3 {background-position:0 -80px}
#lb_3:hover {background-position:-224px -80px}
#lb_4 {background-position:0 -120px}
#lb_4:hover {background-position:-224px -120px}
#lb_5 {background-position:0 -160px}
#lb_5:hover {background-position:-224px -160px}

div.stationicon {
	display: block;
	width:58px; height:55px;
	float:left;
	background-image:url(images/stations.png);
}
#st1 {background-position:0 0}
#st2 {background-position:-60px 0}
#st3 {background-position:-120px 0}
#st4 {background-position:-180px 0}
#st5 {background-position:-240px 0}
#st6 {background-position:-300px 0}
#st7 {background-position:-360px 0}
#st8 {background-position:-420px 0}
#st9 {background-position:-480px 0}
#st10 {background-position:-540px 0}
#st11 {background-position:-600px 0}
#st12 {background-position:-660px 0}
#st13 {background-position:-720px 0}
#st14 {background-position:-780px 0}
#st15 {background-position:-840px 0}
#st16 {background-position:-900px 0}
#st17 {background-position:-960px 0}
#st18 {background-position:-1020px 0}
#st19 {background-position:-1080px 0}

.clear {
	clear: both;
	width:1px;
	height:0px;
	line-height:1px;
	*zoom: 1;
}


::-webkit-scrollbar-track {
	background-color: #444;
}
::-webkit-scrollbar {
	width: 12px;
	background-color: #000;
}
::-webkit-scrollbar-thumb {
	background-color: #eee;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #E6DC32;
}
::selection,
::-moz-selection {
	background-color: #E6DC32;
}