body {
	min-height: 100%;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}







ul {
    padding:0;
    margin:0;
}

li {
    position:relative;
    z-index:1;
    overflow:hidden;
    list-style:none;
    padding:0;
    margin:0 0 0.25em;
}

/*
li a:link,
li a:visited {
    display:block;
    border:0;
    padding-left:28px;
    color:#c55500;
}

li a:hover,
li a:focus,
li a:active {
    color:#730800;
    background:transparent;
}

li:before,
li:after,
li a:before,
li a:after {
    content:"";
    position:absolute;
    top:50%;
    left:0;
}

li a:before,
li a:after {
    margin:-8px 0 0;
    background:#c55500;
}

li a:hover:before,
li a:focus:before,
li a:active:before {
    background:#730800;
}


*/






#square {
	width: 100px;
	height: 100px;
	background: red;
}
#rectangle {
	width: 200px;
	height: 100px;
	background: red;
}
#resizerectangle {
	min-width: 700px;
	max-width: 1000px;
	height: 100px;
	background: red;
}
#trapezoid {
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
.archiveplayer {
	height: 180px;
	width: 100%;
	max-width: 710px;
	margin: 5px auto;
	position: relative;
	z-index: 1;
//	background: red;
}
#show_img_panel {
	width: 150px;
	height: 150px;
	background: black;
}
#show_img {
	width: 140px;
	height: 140px;
	margin: 5px 5px;
}
#show_img_panel_scroller {
 position: absolute;
overflow: hidden;
 top: 5px; 
 left: 5px;
 width: 140px;
 height: 18px;
   background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(0, 0, 0, 0.55);
//  background-color:#000000;
//  opacity:0.3;
//  filter:alpha(opacity=30); /* For IE8 and earlier */
}
#scroller{
	color: #FFFFFF;
	white-space: nowrap;
}

#scroller p {
 padding: 0;
  opacity:1;
  filter:alpha(opacity=100); /* For IE8 and earlier */
}
#time{
position:absolute;
top: 130px;
left: 5px;
width:140px;
height:18px;
color: #FFFFFF;
font-size:15px;
   background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(0, 0, 0, 0.55);

}

#show_img_panel-control_panel {
	position: relative;
//	display: inline;
	z-index: 2;
	left:82px;
	top:-82px;
	border-bottom: 15px solid black;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 150px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17)"; /* IE8 */
}
#control_panel {
//	position: relative;
	left:275px;
	margin: -140px 0 0 164px;
//	width: 100%;
	min-width: 140px;
	max-width: 200px;
	height: 100px;
	background: black;
}


.play a:before {
    left:2px;
    border:8px solid transparent;
    border-width:8px 12px;
    border-left-color:#c55500;
    margin-top:-8px;
    background:transparent;
}

.play a:hover:before,
.play a:focus:before,
.play a:active:before {
    border-left-color:#730800;
    background:transparent;
}

.stop a:before {
    left:1px;
    width:14px;
    height:14px;
    margin-top:-7px;
}


.pause a:before {
    left:2px;
    width:4px;
    height:14px;
    border:4px solid #c55500;
    border-width:0 4px;
    margin-top:-7px;
    background:transparent;
}

.pause a:hover:before,
.pause a:focus:before,
.pause a:active:before {
    border-color:#730800;
    background:transparent;
}



/* JUMP FORWARD
------------------------------------------------------------------------------------------------------------------------------- */

.next a:before {
    left:9px;
    width:2px;
    height:10px;
    margin-top:-4px;
}

.next a:after {
    left:2px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-left-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.next a:hover:after,
.next a:focus:after,
.next a:active:after {
    border-left-color:#730800;
}
 
/* JUMP REWIND
------------------------------------------------------------------------------------------------------------------------------- */

.prev a:before {
    left:2px;
    width:2px;
    height:10px;
    margin-top:-4px;
}

.prev a:after {
    left:-3px;
    border:5px solid transparent;
    border-width:5px 7px;
    border-right-color:#c55500;
    margin-top:-4px;
    background:transparent;
}

.prev a:hover:after,
.prev a:focus:after,
.prev a:active:after {
    border-right-color:#730800;
}

/* POP-OUT WINDOW
------------------------------------------------------------------------------------------------------------------------------- */

.pop a:before,
.pop a:after {
    width:12px;
    height:8px;
    border:1px solid #c55500;
    margin-top:-4px;
    background:#fff;
}
 
.pop a:after {
    left:3px;
    margin-top:-7px;
}

.pop a:hover:before,
.pop a:focus:before,
.pop a:active:before,
 .pop a:hover:after,
 .pop a:focus:after,
 .pop a:active:after {
    border-color:#730800;
    background:#fff;
}

/* LIST VIEW
------------------------------------------------------------------------------------------------------------------------------- */

.list a:before,
.list a:after {
    left:8px;
    width:12px;
    height:2px;
    border-width:6px 0;
    border-style:double;
    border-color:#c55500;
    background:transparent;
}

.list a:after {
    left:4px;
    width:2px;
}

.list a:hover:before,
.list a:focus:before,
.list a:active:before,
.list a:hover:after,
.list a:focus:after,
.list a:active:after {
    border-color:#730800;
    background:transparent;
}

#control_panel-playlist_panel {
	position: relative;
	z-index: 2;
	right:82px;
	top:67px;
	border-bottom: 15px solid black;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 150px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=-1.836909530733566e-16, M12=1, M21=-1, M22=-1.836909530733566e-16); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-1.836909530733566e-16, M12=1, M21=-1, M22=-1.836909530733566e-16)"; /* IE8 */

}
#playlist_panel {
	margin: -125px 0 0 378px;
	top: 0;
	right: 0;
//	position: absolute;
//	width: 330px;
	min-width: 200px;
	max-width: 330px;
	height: 150px;
	background: black;
}



/* PERMALINK
------------------------------------------------------------------------------------------------------------------------------- */

.permalink a:before,
.permalink a:after,
.permalink:after {
    left:4px;
    width:6px;
    height:4px;
    border:2px solid #c55500;
    background:transparent;
    /* css3 */
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
}

.permalink a:after {
    left:12px;
    margin-top:-0px;
}

.permalink:after {
    left:7px;
    width:10px;
    height:2px;
    border:1px solid #fff;
    margin-top:-2px;
    background:#c55500;
}

.permalink a:hover:before,
.permalink a:focus:before,
.permalink a:active:before,
.permalink a:hover:after,
.permalink a:focus:after,
.permalink a:active:after {
    border-color:#730800;
    background:transparent;
}

.permalink:hover:after {
    background:#730800;
}



#wrapper{
width:600px;
margin: 50px auto;
}
#player{
	position:relative;
}
#controls{
	position:relative;
	margin: 0px auto;
	width: 140px;
	height: 34px;
	top: 5px;
	color: #FFFFFF;
}

#play_btn{
  position: absolute;
  top: 0px;
  left: 14px; 
}
#play_btn_onair{
  position: absolute;
  top: 0px;
  left: 0px; 
	display:none;
}
#pause_btn{
	position:absolute;
	top:0px;
	left:14px;
}
#stop_btn{
	position:absolute;
	top:113px;
	left:259px;
}
#stop_btn_onair{
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#fwd_btn{
  position: absolute;
  top: 7px;
  left: 50px; 
}
#back_btn{
  position: absolute;
  top: 7px;
  left: 0px; 
}
#list_btn{
  position: absolute;
  top: 5px;
  left: 70px; 
}
#share_btn{
  position: absolute;
  top: 5px;
  left: 96px; 
}
#past_show_list {
//  width: 250px;
//  height: 100px;
  background: #ccc;
  position:absolute;
  top: 25px;
  left: 25px;
  z-index: 3;
//  display: none;
//  overflow:auto;
border-radius:5px;
-moz-border-radius:5px; /* Old Firefox */
-webkit-border-radius:5px;
}
#past_show_list_close {
  position:absolute;
  top: -6px;
  right: -3px; 
}


/*
#scroller{
	color: #c5e2f7;
	white-space: nowrap;
}
#scroller_container {
 position: absolute;
 top: 30px; 
 left: 130px;
 width: 250px;
 height: 40px;
}
*/
/*
#scroller p {
 padding: 0;
}
*/
/*
#time{
position:absolute;
top:45px;
left: 30px;
width:90px;
height:30px;
color: #c5e2f7;
font-size:15px;
}
*/
#progressbar{
position:absolute;
top:80px;
left:138px;
width:250px;
height:5px;
}
#volumecontrol{
	position:relative;
	margin: 0px auto;
	width: 120px;
	height: 34px;
	top: 0px;
	color: #FFFFFF;
}
#volumebar{
	position:absolute;
	top:5px;
	left:25px;
}
#volumeicon{
	position:absolute;
	top:-2px;
	left:-7px;
}
#socialbuttons{
	position:relative;
	margin: 0px auto;
	width: 140px;
	height: 34px;
	top: -15px;
	color: #FFFFFF;
}
.social_logo {
  position:absolute;
  top: -14px;
  left: -23px; 
}
.social_cont {
  position:absolute;
  top: 4px;
  left: 65px; 
}
.social_username {
  position:absolute;
  bottom: 5px;
  left: 45px; 
  color: white;
  font-size:2.5em;
  font-family:Arial,Helvetica,sans-serif;
}
#facebookbutton{
	position:absolute;
	top:0px;
	left:0px;
}
#facebookbutton:hover{
	color: #3B5998;
}

#facebook_cont {
  width: 240px;
  height: 100px;
//  background: #ccc;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 4px 4px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 4px 5px;
background-color:#3B5998;
//background-color:#282828;
background-size:8px 8px;
  position:absolute;
  top: 25px;
  left: 25px;
  z-index: 3; 
border-radius:5px;
-moz-border-radius:5px; /* Old Firefox */
-webkit-border-radius:5px;
}
#facebook_cont_close {
  position:absolute;
  top: -6px;
  right: -3px; 
}

#twitterbutton{
	position:absolute;
	top:0px;
	left:31px;
}
#twitterbutton:hover{
	color: #4099FF;
}

#twitter_cont {
  width: 240px;
  height: 100px;
//  background: #ccc;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 4px 4px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 4px 5px;
background-color:#4099FF;
//background-color:#282828;
background-size:8px 8px;
  position:absolute;
  top: 25px;
  left: 25px;
  z-index: 3; 
border-radius:5px;
-moz-border-radius:5px; /* Old Firefox */
-webkit-border-radius:5px;
}
#twitter_cont_close {
  position:absolute;
  top: -6px;
  right: -3px; 
}

#googleplusbutton{
	position:absolute;
	top:0px;
	left:63px;
}
#googleplusbutton:hover{
	color: #D34836;
}

#googleplus_cont {
  width: 240px;
  height: 100px;
//  background: #ccc;
background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 4px 4px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 4px 5px;
background-color:#D34836;
//background-color:#282828;
background-size:8px 8px;
  position:absolute;
  top: 25px;
  left: 25px;
  z-index: 3; 
border-radius:5px;
-moz-border-radius:5px; /* Old Firefox */
-webkit-border-radius:5px;
}
#googleplus_cont_close {
  position:absolute;
  top: -6px;
  right: -3px; 
}

#envelopebutton{
	position:absolute;
	top:0px;
	left:94px;
}
#envelopebutton a:hover{
	color: yellow;
}
/*----------------------------
	countdown
-----------------------------*/

#note{
	color: #FFFFFF;
	font-size: 12px;
//	margin: 0 auto;
//	padding: 4px;
	text-align: center;
//	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
//	width: 400px;
}
/* Scroller Box */

.scroller_container_up_down, .scroller_container_left_right {
// border: 1px dotted #ddd;
 position: relative;
 overflow: hidden;
}

.scroller_container_up_down {
// width: 120px;
	min-width: 140px;
	max-width: 200px;

 height: 20px;
color: #FFFFFF;
text-align: center;
top: -12px;
//font-size:15px;
   background: rgb(0, 0, 0); /* The Fallback */
   background: rgba(0, 0, 0, 0.55);
}

.scroller_container_left_right {
 width: 300px;
 height: 60px;
}

.scroller_left_right {
 white-space: nowrap;
 line-height: 60px;
 font-size: 60px;
}

.scroller_up_down  p, .scroller_left_right p {
 padding: 0;
}
/* Scoller Box */

/* Example Divs */
.box1, .box2, .box3 {
 width: 25px;
 height: 25px;
 display: block;
 padding: 0;
 margin: 0;
}

.box1{background: #f00;}

.box2{background: #0f0;}

.box3{background: #00f;}

/* CSS Hack Safari */
#dummy {;# }

.scroller_container_up_down {
 overflow: auto;
}

/* Scoller Box */