/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */


/* Allgemeine Angaben */
@font-face {
    font-family: 'Civox normal';
    src: url('../fonts/newsgothic_condensed-webfont.eot');
    src: url('../fonts/newsgothic_condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/newsgothic_condensed-webfont.woff') format('woff'),
         url('../fonts/newsgothic_condensed-webfont.ttf') format('truetype'),
         url('../fonts/newsgothic_condensed-webfont.svg#webfontuploaded_file') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'civox-bold';
    src: url('../fonts/newsgothic_condensedbold-webfont.eot');
    src: url('../fonts/newsgothic_condensedbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/newsgothic_condensedbold-webfont.woff') format('woff'),
         url('../fonts/newsgothic_condensedbold-webfont.ttf') format('truetype'),
         url('../fonts/newsgothic_condensedbold-webfont.svg#webfontuploaded_file') format('svg');
    font-weight: normal;
    font-style: normal;}

body {
	background: url("../images/black-bg-02.jpg") scroll top center transparent;
	color: #fff;
   	font-family: Arial, sans-serif;
    font-size: 110%; 
	line-height: 1.35em;}

h2, h3, h4, h5  {
	font-size: 90%;;}
	
a{
  color: #fc4c08;
  font-weight: normal;
  text-decoration: none;}

a:link, 
a:visited{
  color: #fc4c08;
  text-decoration: none;}
  
a:hover{
  color: #fc4c08;
  text-decoration: underline;}

/* Header mit Logo und Spruch */	
#siteHeader h1 {
    background: url("../images/civox-logo-02.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 114px;
    text-indent: -20000px;
    width: 122px;
	margin: 50px 0 0 14.50%;}

.spruch-home, .spruch-angebot, .spruch-ansagenautomat, .spruch-civox, .spruch-referenzen, .spruch-partner{
	margin-top: 180px;}

/* Navigation */
#navMain ul {
    float: left;
	background-color: rgba(0,0,0,0.40);
	width: 100%;
	margin: -20px 0 50px 0;
	padding-left: 7.00%;}
	
#navMain li {
    float: left;
    position: relative;
	list-style-type: none;}
	
#navMain li.current {   	
  	color: #fc4c08;}
	
#navMain li a:link,
			a:visited {
   	text-transform: uppercase;
  	color: #fff;
   	display: block;
	font-family: "Civox normal", Helvetica, Arial, sans-serif;
	letter-spacing: 0.03em;
   	font-size: 100%;
    padding: 10px 35px 10px 0;
    text-decoration: none;}
	
#navMain li a.current {
   	color: #fc4c08;}
	
#navMain li a:hover {
   	  	color: #fc4c08;}

/* Content Text */	
#content {
    	margin-left: 10.5%;}

#content h1 {
    	font-weight: normal;
		margin-bottom: 20px;}

#content p {
    	font-size: 80%;
		margin-bottom: 20px;}
		
#content ul {
    	font-size: 80%;
		list-style: disc;
		margin-left: 2%;
		margin-bottom: 20px;}
		
#content ul li {
    	margin-bottom: 15px;}

#content a:link {color: #fc4c08;}
#content a:visited {color: #fc4c08;}
#content a:hover {
    	color: #fc4c08;
		text-decoration: underline;}
		
ul.referenzen li {
		list-style: none !important;
		margin-bottom: -3px !important;
		margin-left: -2% !important;}

/* Sidebar mit Kontakt und Button */
#sidebar {
    	margin-left: 8.5%;
		margin-right: 20.5%;}

.play, .contact {
    	background-color: rgba(255,255,255,0.10);
		margin-bottom: 30px;
		padding: 20px;}

.play h2, .contact h2 {
    	font-weight: normal;
		font-size: 110%;
		margin-bottom: 5px;}

.play p, .contact p {
    	font-size: 70%;
		line-height:1.30em;}

#sidebar a:link {color: #fc4c08;}
#sidebar a:visited {color: #fc4c08;}
#sidebar a:hover {
    	color: #fc4c08;
		text-decoration: underline;}

#fallback {
	display: none;}

.audioButton {	
	background: url("../libs/img/btn.png") no-repeat 0 0;
	display: block;
	cursor: pointer;
	margin: -50px 0 25px 78%;
	padding: 0;
	height: 40px;}

.audioButton:hover {
	background-position: 0 -40px;}

.audioButton.playing {
	background-position: 0 -80px;}

.audioButton.playing:hover {
	background-position: 0 -120px;}

#player {
	display: none;}
	
ul.controls li {
		list-style: none !important;}

/* Footer mit Impressum und Facebook */
#siteFooter {
    	float: right;
		margin-right: 5%;
		font-size: 70%;
		padding-bottom: 50px;}
		
#siteFooter a:link {color: #fff;}
#siteFooter a:visited {color: #fff;}
#siteFooter a:hover {
    	color: #fc4c08;
		text-decoration: none;}

#siteFooter img {
    	margin: 0 0 0 10px;}	

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {
	
body {
	background: url("../images/black-bg-02-mobile.jpg") repeat-y scroll top center transparent;
	color: #fff;
   	font-family: Arial, sans-serif;
    font-size: 100%; 
	line-height: 1.35em;}

.spruch-home, .spruch-angebot, .spruch-ansagenautomat, .spruch-civox, .spruch-referenzen, .spruch-partner{
	margin-top: 50px;}
	
/* Sidebar mit Kontakt und Button */
#sidebar {
    	margin-left: 1%;
		margin-right: 10%;}
	
/* Content Text */	
#content {
    	margin-left: 1%;}
		
.audioButton {	
	background: url("../libs/img/btn.png") no-repeat 0 0;
	display: block;
	cursor: pointer;
	margin: -50px 1% 25px 80%;
	padding: 0;
	height: 40px;}

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

body {
	background: url("../images/black-bg-02-retina.jpg") repeat-y scroll top center transparent;
	background-size: auto auto;
	}
/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}

/*@media only screen and (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

body {
	background: url("../black-bg-02-mobile-retina.jpg") repeat-y scroll top center transparent;
}*/
/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/