/*****************************************************************/
/* File : ui.css                                                 */
/*                                                               */
/* This stylesheet is used by all user interface parts within    */
/* the system with the exception of...                           */
/*************************************************************** */

H1 {font-size:28px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}
H2 {font-size:24px; font-weight:bold; color:#eeeeee; font-family:Arial,Helvetica,sans-serif;}
H3 {font-size:20px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}
H4 {font-size:16px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}

DT,DL,DD,TD {font-family:Arial,Helvetica,sans-serif;font-size:12px; color:#eeeeee;}

PRE {font-family:"Courier New",Courier,mono;}
XMP {font-family:"Courier New",Courier,mono;}

BODY { background-color:#00003f; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#eeeeee; }
.popupBody{ padding:0px; margin:0px; border-width: 0px; }

A:link    { color:#9999CC; font-weight:bold; text-decoration: none; }
A:visited { color:#9999CC; font-weight:bold; text-decoration: none; }
A:active  { color:#9999CC; font-weight:bold; text-decoration: none; }
A:hover   { color:#CCFFFF; font-weight:bold; text-decoration: none; }

.appLink            { color:#9999BB; font-weight:bold; text-decoration: none; }
.inactiveAppLink    { color:#999999; font-weight:bold; text-decoration: none; }

.inlineHeading2 {font-size:22px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}
.inlineHeading3 {font-size:18px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}
.inlineHeading4 {font-size:15px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}
.inlineHeading5 {font-size:14px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}
.logoHeading {font-size:22px; font-weight:bold; color:#ccccff; font-family:Arial,Helvetica,sans-serif;}

.datetime {font-size:12px; color:#ffffff; font-family:"Courier New",Courier,mono; }
.showType { color:#BB66DD; font-weight:bold; }

/**** CROPfm main page ****/
.main_section { padding: 0px 40px 10px 20px; }

.welcome { font-family:Verdana,sans-serif; font-size:12px; color:#dd99ff; padding:13px 20px 20px 0px; }

.subjectDescr {
  margin-left: 40px;
  width: 750px;
  background-color: #000055;
  padding:10px; 
  font-size:14px; 
  font-family:Verdana,sans-serif; 
  color: #bbbbff;
}

.section_heading {
  font-size:18px;
  font-weight:600;
  color:#dadaff;
  font-family:Arial,sans-serif;
  letter-spacing:1px; 
  background-repeat:repeat-x;
  background-position:0px 0px;
  white-space: nowrap;
  padding-left: 0px;
}

/***** CROPfm subpages (podcast page,...) *****/
.subpageContent { 
  width:750px;
  padding:10px 0px 0px 25px;
}

/**** CROPfm Listenlive ****/

.countdown {
  width: 100%;
  font-family:verdana;
  font-weight:300;
  letter-spacing: 2px;
  text-align: center;
  font-size: 27px;
  color: #5555ff;
}

.countdownBar {
   margin-top: 10px;
   font-size:0px;
   height: 2px;
   background-position: -63px -24px;
   border-right-width: 0px;
   border-right-style: dotted;
   border-right-color: 0000aa;
   border-left-width: 0px;
   border-left-style: dotted;
   border-left-color: 0000aa;
}

.netradio {
   font-weight: bold;
   color:#ccccff;
}

/**** CROPfm Show Listing ****/

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

.bulletEgg {float: left; }
.mediaEgg {width:74px; height:44px; margin:0px; padding:0px; float:right;}
.mediaEgg img {  margin:0px; padding:0px; float:left;}

.iconLink {  
  padding:4px 0px 0px 0px;
}

.iconLabel {  
  padding:7px 0px 0px 0px;
  vertical-align:top;
  width:150px;
}

.appIconLink {  
  vertical-align:40%;
}

/* CSS hack for Mozilla, needs more padding to align label */
html>body .iconLabel {
  padding:11px 0px 0px 0px;

}

.showHeader {
  background-repeat:repeat-x;
  background-position:0px 0px;
  width:100%; 
  padding:0px; 
  margin: 0px;
}

.showText { margin-left: 45; padding-right: 30px; }

.singleHeading {
	position:relative; 
	left: 10px; 
	top: 68px; 
	z-index:99
}

/* CSS hack for Mozilla, needs less distance to align label with plasma*/
html>body .singleHeading {
	top: 62px; 
}

.loading,
.loadingText { font-family:Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold; color:#9999FF;}
.loadingIconContent { position:absolute; left: 700; }
.loadingIcon { float:left; }

/**** CROPfm Search ****/

.tabTable { 
  width:232px;
  margin: 0px;
  padding: 0px;
}

.formTable {
  height:300px; 
  width:227px;
  margin: 0px;
}

.formElem {
  padding: 0px;
}

.cropfmTabLinkSelected { 
  border:#0000ff solid 1px;
  height:20px; 
  width: 100%;
  vertical-align:middle;
  text-align:center; 
  font: bold 14px arial;
  color:#aaaaff;
  padding:0px;
}

.tabDescription {
  color: ccccff;
  font: normal 12px arial;
  background-color: 000055;
  margin: 0px 0px 10px 0px;
  padding: 3px;
}

.inputLabel {
  color: #aaaaff;
  font: bold 12px arial;
}

.checkboxLabel {
  color: bbbbff;
  font: normal 12px arial;
}

/***** CROPfm input elements *****/

input.cropfmInput {
  color:#aaaaff;
  background-color:#00003f;
  border: 1px solid #3333ff;
} 

select.cropfmInput {
  color:#aaaaff;
  font: normal 12px arial;
  background-color:#00003f;
  border: 0px;
  outline: 0px;
  padding: 0px;
} 

/**** CROPfm paging ****/

.pageActive { 
  border:#000099 solid 1px;
  color: #4444ff;
  background-color: #000088;
  height:18px; 
  vertical-align:middle;
  text-align:center;
  font: bold 13px arial;
  cursor:hand;
  padding:0px 4px 0px 4px;
}

.pageActiveOver { 
  border:#0000AA solid 1px;
  color: #ccccff;
  background-color: #000088;
  height:18px; 
  vertical-align:middle;
  text-align:center;
  font: bold 13px arial;
  cursor:hand;
  padding:0px 4px 0px 4px;
}

.pageSelected { 
  border:#00003f solid 1px;
  color:#bbbbff;
  background-color:#00003f;
  height:18px; 
  vertical-align:middle;
  text-align:center; 
  font:bold 13px arial;
  cursor:default;
  padding:0px 4px 0px 4px;
}

.activePaging { 
  font-size:14px;
}

.inactivePaging { 
  font-size:14px;
  color:#999999; 
}
/**** CROPfm Main Header ****/

.newsTickerContent {
  white-space:nowrap;
  border:#0000AA solid 1px;
  color: #2222ff;
  background-color: #000050;
  height:18px; 
  font: bold 13px arial;
  cursor:hand;
  width:250;
}

.news_item { 
  font-family:Arial,Helvetica,sans-serif; 
  font-weight:bold; 
  color:9999CC; 
}

.news_item_active { 
  font-family:Arial,Helvetica,sans-serif;
  font-size:13px;
  font-weight:bold;
  color:CCFFFF;
}

.news_sub_item { 
  font-family:Arial,Helvetica,sans-serif; 
  font-size:90%; 
  font-weight:bold;
}

/**** CROPfm header bar ****/

.headerBar { background-color:#000077; width:100%; height:25px; }

.barLeft { 
  font: bold 16px arial;
  vertical-align:middle;
  text-align:left;
  font-weight:bold;
  color:#7777ff;
  padding:0px;
  margin:0px;
  color:#8888bb;
}

.headerButtonTable {
  padding:8px 12px 8px 0px;
}
 
.barRight { 
  vertical-align:middle; 
  text-align:right; 
  padding:0px; 
  margin:0px;
}

.pageHeader {
  width:99%;
  height:96px;
  background-color:#00003f;
}
  
/**** CROPfm button styles ****/

/* CROPfm standard button */

.cropfmButtonActive {
  border:#0000AA solid 1px;
  color: #4455ff;
  background-color: #000060;
  height:18px; 
  vertical-align:middle;
  text-align:center; 
  font: bold 13px arial;
  cursor:hand;
  padding:0px 4px 0px 4px;
}

.cropfmButtonOver {
  border:#0000AA solid 1px;
  color: #5539ff;
  background-color: #000088;
  height:18px; 
  vertical-align:middle;
  text-align:center; 
  font: bold 13px arial;
  cursor:hand;
  padding:0px 4px 0px 4px;
}

.cropfmButtonInactive { 
  border:#222244 solid 1px;
  height:18px; 
  vertical-align:middle;
  text-align:center; 
  font: bold 13px arial;
  background-color:#222233;
  color:#444444;
  padding:0px 4px 0px 4px;
  cursor:default;
}

/* CROPfm options button */

.cropfmOptionsButtonActive {
  border:#0000AA solid 1px;
  color: #aaac41;
  background-color: #000060;
  height:18px; 
  vertical-align:middle;
  text-align:center; 
  font: bold 13px arial;
  cursor:hand;
  padding:0px 4px 0px 4px;
}

.cropfmOptionsButtonOver {
  border:#0000AA solid 1px;
  color: #ccac41;
  background-color: #000088;
  height:18px; 
  vertical-align:middle;
  text-align:center; 
  font: bold 13px arial;
  cursor:hand;
  padding:0px 4px 0px 4px;
}

a.cropfmButton:link {color: #7777ff; text-decoration: none; }
a.cropfmButton:visited {color: #0000ff; text-decoration: none; }
a.cropfmButton:hover { color:#000066; background-color:#0000ff; text-decoration: none; }

/**** Option Window ****/

.optionsHeading {
  font-size:14px;
  font-weight:bold;
  color:#ccccff;
  font-family:Arial,Helvetica,sans-serif;
  padding: 20px 0px 10px 8px;
}

.optionsHeading2 {
  font-size:14px;
  font-weight:bold;
  color:#ccccff;
  font-family:Arial,Helvetica,sans-serif;
}

.footer {
  width: 100%;
  text-align: right;
  position: relative;
}

/* CSS hack for Mozilla, needs less width */
html>body .footer {
  width: 92%;
  bottom: -24px;
  right: -15px;
}

.outerFrameContent {
  background-color: #000049;
}

.controlGroup {
  padding: 0px 0px 0px 35px;
  font: bold 13px arial;
  color: #9999ff;
}

.controlGroup2 {
  font: bold 13px arial;
  color: #9999ff;
}

.controlGroup3 {
  text-align: center;
  padding: 1px 6px;
  font: bold 13px arial;
  color: #9999ff;
}

.textSize {
  font-weight:bold;
  font-family:Arial,Helvetica,sans-serif;
  color: #4444ff; 
  cursor: pointer;
  cursor: hand;
}

.image-descr {
  font-size: 10px;
}

#searchTd { display:table-cell; padding:0px; vertical-align:top; }
#contentTd { vertical-align:top; padding:5px 0px 20px 0px; }
#mainTable { }


/************************** CROPfm Cookie Consent **************************/

.cc_banner-wrapper {
	z-index:9001;
	position:relative
}
.cc_container .cc_btn {
	cursor:pointer;
	text-align:center;
	font-size:0.6em;
	transition:font-size 200ms;
	line-height:1em
}
.cc_container .cc_message {
	font-size:0.6em;
	transition:font-size 200ms;
	margin:0;
	padding-top:5px;
	line-height:1.5em
}
.cc_container .cc_logo {
	display:none;
	text-indent:-1000px;
	overflow:hidden;
	width:100px;
	height:0px;
	background-size:cover;
	opacity:0.9;
	transition:opacity 200ms
}
.cc_container .cc_logo:hover,.cc_container .cc_logo:active {
	opacity:1
}
@media screen and (min-width:500px) {
	.cc_container .cc_btn {
		font-size:0.8em
	}
	.cc_container .cc_message {
		font-size:0.8em
	}
}
@media screen and (min-width:768px) {
	.cc_container .cc_btn {
		font-size:1em
	}
	.cc_container .cc_message {
		font-size:1em;
		line-height:1em
	}
}
@media screen and (min-width:992px) {
	.cc_container .cc_message {
		font-size:1em
	}
}
@media print {
	.cc_banner-wrapper,.cc_container {
		display:none
	}
}
.cc_container {
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
	padding:10px 15px 50px
}
.cc_container .cc_btn {
	padding:8px 16px;
	background-color:#00006f;
	position:absolute;
	bottom:10px;
	left:15px;
	right:15px;
	text-align:center
}
@media screen and (min-width:500px) {
	.cc_container {
		left:initial;
		right:20px;
		bottom:20px;
		width:300px;
		padding-bottom:77px
	}
	.cc_container .cc_btn {
		right:15px;
		bottom:25px
	}
	.cc_container .cc_logo {
		display:block;
		position:absolute;
		bottom:8px;
		left:calc(50% - 50px)
	}
}
@media screen and (min-width:768px) {
	.cc_container {
		padding-bottom:87px
	}
	.cc_container .cc_message {
		font-size:1em
	}
}
.cc_container {
	background:#00006f;
	color:#eef;
	font-size:17px;
	font-family:"Helvetica Neue Light","HelveticaNeue-Light","Helvetica Neue",Calibri,Helvetica,Arial;
	box-sizing:border-box
}
.cc_container::-moz-selection {
	background:#ff5e99;
	color:#fff;
	text-shadow:none
}
.cc_container .cc_btn,.cc_container .cc_btn:visited {
	color:#eef;
	background-color:#4444ff;
	transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;
	-webkit-transition:background 200ms ease-in-out,color 200ms ease-in-out,box-shadow 200ms ease-in-out;
	border-radius:5px;
	-webkit-border-radius:5px
}
.cc_container .cc_btn:hover,.cc_container .cc_btn:active {
	background-color:#aaf;
	color:#000
}
.cc_container a,.cc_container a:visited {
	text-decoration:none;
	color:#31a8f0;
	transition:200ms color
}
.cc_container a:hover,.cc_container a:active {
	color:#b2f7ff
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity:0;
		-webkit-transform:translateX(20px);
		transform:translateX(20px)
	}
	100% {
		opacity:1;
		-webkit-transform:translateX(0);
		transform:translateX(0)
	}
}
@keyframes fadeInRight {
	0% {
		opacity:0;
		-webkit-transform:translateX(20px);
		-ms-transform:translateX(20px);
		transform:translateX(20px)
	}
	100% {
		opacity:1;
		-webkit-transform:translateX(0);
		-ms-transform:translateX(0);
		transform:translateX(0)
	}
}
.cc_container {
	-webkit-animation-duration:0.6s;
	animation-duration:0.6s;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:0.8s;
	-moz-animation-duration:0.8s;
	-o-animation-duration:0.8s;
	animation-duration:0.8s;
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-name:fadeInRight;
	animation-name: fadeInRight
}