/* CSS Document */

*
{
-webkit-touch-callout:  none;
-webkit-user-select:    none;
-khtml-user-select:     none;
-moz-user-select:       none;
-ms-user-select:        none;
user-select:            none;
font-family:  Heletica, Arial;
}

body
{
padding: 4px;
margin: 4px;
}

.touch_play, .touch_play:hover
{
display:block;
box-shadow: 0px 0px 20px white inset;
background-image:url(img/tplay.png)
position:relative;
width:120px;
height:90px;
top:0px;
left:0px;
}



#thumb_list
{
min-width:  139px;
position: relative;
top:  0px;
right:0px;
width:  139px;
height: 274px;
border: 0px;
overflow: hidden;
overflow-y: auto;
float:right;
-webkit-overflow-scrolling:touch;
}

.thumb_list_item
{
width:  120px;
height: 90px;
display:  block;
padding:  0px;
cursor: pointer;
float:  left;
border:1px solid white;
border-top:0px;
background-size:cover !important;
}

.thumb_list_item:hover
{
box-shadow: 0px 0px 33px white inset;
}

.thumb_list_item_overlay_play
{
  background:url(img/play.png);
  background-repeat:no-repeat;
  margin-left:40px;
  margin-top:5px;
  width:45px;
  height:53px;
}

.thumb_list_item_overlay
{
height: 28px;
left: 0px;
right:  0px;
bottom: 0px;
background: url(img/playlist_vorschaubild_overlay_inaktiv.png);
position: relative;
color:  white;
padding:  2px;
min-height: 28px;
text-align:left;
overflow:hidden;
white-space:wrap;
font-size:12px;
font-family: Arial;
text-shadow: 0 -0.6px 0.15px black;
overflow: none;
background-position: top right;
}

.thumb_list_item:hover .thumb_list_item_overlay
{
display:block;
}

.thumb_list_item:hover .thumb_list_item_overlay
{
 background: url(img/playlist_vorschaubild_overlay_aktiv.png);
 background-position: top right; 
}

#menu_list
{

}

.menu_list_item
{

}

#wrapper, body
{
position: absolute;
left:  0pt;
right: 0pt;
top:  0pt;
bottom: 0pt;
padding:  0px;
margin:  0px;
}

#wrapper
{
padding:  20px;
text-align:center;
margin-right:20px;
}

#content
{
float:left;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
text-align: left;
bottom: 0px;
top: 0px;
right: 0px;
width:  100%;
background: #C0C3C5;
box-shadow:0px 0px 7px black;
border:1px solid white;
-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;
}

#content_wrapper
{
width:  550px;
padding:0px;
margin: auto;
}


#footer
{
float:left;
padding:5px;
/*
background: #A0A3A5;
box-shadow:0px 0px 7px black inset;
*/
margin-left:10px;
margin-right:10px;
height:21px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px; 
width:519px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 0 7px rgba(0, 0, 0, 0.3) inset;
}

#player
{
width:  411px;
height: 272px;
overflow: visible;
float:  left;
border:1px solid white;
border-right:0px;
background:black;
z-index:0 !important;  
border-left:0px;                    
}

#loadmore
{
background:black;
color:white;
text-align:center;
cursor:pointer;
}

#loadmore:hover
{
background:grey;
}

#first_time_overlay
{
background:rgba(175,175,175,0.9);
border-radius:5px;
border:2px solid white;
width:405px;
height:340px;
position:absolute;
left:90px;
top:70px;
box-shadow:0px 0px 5px black inset, 1px 1px 35px black;
padding:14px;
padding-top:10px;
}

#first_time_overlay h1
{
margin-top: 0px;
}

.close
{
width:auto;
min-width:24px;
height:24px;
background:url(img/close.png);
background-repeat:no-repeat;
right:5px;
top:5px;
text-align: right;
padding-right:26px;
position:absolute;
cursor:pointer;
color:#D6D6D6;
background-position: right top;
line-height: 24px;
}




.close:hover
{
background-position: right bottom;
color: grey;
}




.page_btn
{
/*
border-top-left-radius: 5px;
border-top-right-radius: 5px;
*/

display:inline-table;
vertical-align: top;
border: 1px solid;
border-left:0px;
border-top:1px solid;
border-radius:0px solid;
border-color:white;


padding-left:4px;
padding-right:4px;
background-color:whitesmoke;
color:silver;

cursor:pointer;


height:36px;
width:100px;
background-color:red;
background:url(img/button.png);
background-position: 0px 0px;
background-repeat: no-repeat;


font-size:13px;
line-height:17px;

text-shadow:0px -0.6px 0.15px black;



}

.page_btn:hover
{
background-position: 0px -36px;
}

.selected_btn, .selected_btn:hover
{
color:whitesmoke;
cursor:default;
background-position: 0px -36px;
}

#pages
{

border-radius: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;

padding:0px;

height:79px;
}

#inf
{
background:#B2B2B2;
padding:3px;
padding-left:13px;
font-size:12px;
color:black;
}

#inf2
{
padding:3px;
padding-right:13px;
text-align: right;
font-size:10px;
color:black;
}

#welcome_content
{
float:left;
padding:7px;
width:516px;
height:55px;
margin:8px;
margin-bottom:4px;
overflow:hidden;
background:white;
border: 1px solid #E64515;
user-select:auto;
font-family:Arial;
font-size:15px;

}

#overlay
{
 background:rgba(0,0,0,0.3);
 position:fixed;
 z-index:99999 !important;
 left:0px;
 right:0px;
 top:0px;
 bottom:0px;
 margin: 20px; 
}

.themen_prev, .themen_next, .themen_prev_ia, .themen_next_ia
{
  line-height: 19px;
  cursor:pointer;
  width:30px;
  height:16px;
  display:inline-block;
}

.themen_prev
{
  background:url(img/trenner01.2_back-button_inaktiv.png);
}

.themen_next
{
  background:url(img/trenner01.4_forward-button_inaktiv.png);
}

.themen_prev_ia
{
  background:url(img/trenner01.2_back-button_aktiv.png);
  cursor:default;
}

.themen_next_ia
{
  background:url(img/trenner01.4_forward-button_aktiv.png);
  cursor:default;
}

#more
{
  float:left;
  border-top:1px solid transparent;
  background:#B2B2B2;
  cursor:pointer;
  padding:3px;
  text-align:center;
  width:544px;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  color:grey;
  -moz-background-clip: padding; 
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

#more:hover
{
 border-top:1px solid white;
 color:black;
 box-shadow: 0px 0px 5px #E6E6E6 inset;
}

#welcome_content a
{
cursor:pointer;

color:#393939;
font-weight:bold;
margin-left:3px;
}

#welcome_content a:hover, #welcome_content a:active
{
color:#797979;
}

.dummy
{
 color:whitesmoke;
}

.hidden
{
  display: none;
}

.thumb_list_item_overlay_overflown
{
  background: url(img/playlist_vorschaubild_overlay_inaktiv_overflown.png);
  background-position: top right;
  padding-right:26px;
  word-wrap: break-word;
}

.thumb_list_item_overlay_overflown:hover, .thumb_list_item:hover .thumb_list_item_overlay_overflown
{
  background: url(img/playlist_vorschaubild_overlay_aktiv_overflown.png) !important;
  background-position: top right !important;
}