@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Roboto);

* {padding: 0 0; margin: 0 0}

body {background-image: url(../images/bg-top.jpg);  background-color: rgba(0, 0, 0, 0); background-repeat: no-repeat; background-size: auto; width:100%; background-attachment:fixed;}

h1 {
	font-size: 25px;
	font-weight: 600;
}

h2 {
	font-weight: bold;
	font-size: 12pt;
}

/* unvisited link */
a:link {
    color: #C49310;
	text-decoration:none;
}

/* visited link */
a:visited {
    color: #C49310;
	text-decoration:none;
}

/* mouse over link */
a:hover {
    color: #FFF;
	text-decoration:none;
}

/* selected link */
a:active {
    color: #FFF;
	text-decoration:none;
}
#inhalt {
}

.link {
	cursor:pointer;
    color: #C49310;
}
#container {width:100%; margin-right: auto; margin-left: auto; position: relative; text-align: left; z-index:50; font-family: 'Roboto', sans-serif;}

#wrapper-navi {position:relative; left:5%;}
#inhalt {position:relative;  padding:35px;
background: -moz-linear-gradient(top, rgba(129,128,126,1) 0%, rgba(129,128,126,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(129,128,126,1)), color-stop(100%,rgba(129,128,126,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(129,128,126,1) 0%,rgba(129,128,126,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(129,128,126,1) 0%,rgba(129,128,126,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(129,128,126,1) 0%,rgba(129,128,126,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(129,128,126,1) 0%,rgba(129,128,126,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c39700', endColorstr='#00c39700',GradientType=0 ); /* IE6-9 */
}



#kontaktfeld {position:relative; padding:10px; background-color:rgba(45, 47, 47, 1); color:#FFF;}

#logo {
	background-image:url(../images/exom-logo.png); 
	position:relative; 
	/* float:left; */
	top:0px;
	width:220px; 
	height:106px; 
}

#exom-navi {
	position:relative; 
/* float:left; */
}

#inhalt ul {list-style-position:inside;}

/* Neu stylen der Bullets der Aufzählungsliste bei Anwendungsbereiche. Im Joomla muss dafür ein div um die Liste rum mit der id "Anwendungsbereiche", sonst werden auf der ganzen Seite alle Listenpunkte entsprechend gestalte */
#Anwendungsbereiche > ul {
	list-style-type: none;
	line-height: 1em;
}
#Anwendungsbereiche > ul > li:before {
	content: "";
	line-height: 1em;
	width: .5em;
	height: .5em;
	background-color: #663399;
	float: left;
	margin: .25em .25em 0;
}
#Anwendungsbereiche > ul > li > ul {
	list-style-type:none;
	line-height: 1em;
}
#Anwendungsbereiche ul > li > ul {
	margin-bottom:10px;
}
#Anwendungsbereiche > ul > li > ul > li:before {
	content: "- ";
	font-size:1.3em;
	margin-left:50px;
}
/* Ende Aufzählungspunkte gestalten */

@media only screen and (max-width: 999px) {    /* ab 0 px */
#wrapper-navi {
	clear:both;
 	width:80%; 
}
#inhalt {
	width:70%;
	margin-left:5%;
clear:both;
}
#exom-navi {
	clear:both;
}
#exom-navi a:link {
	/* width:100%; */
			color:#FFF;
			}
#inhalt img {	width: 150px;
             	float: left;
				margin-right: 10px;}
#kontaktfeld {display:none;}
}


@media only screen and (min-width: 1000px) {    /* ab 1000 px */

#wrapper-navi {
	width:220px;
	float:left;
} 
#inhalt {
	width:40%; 
	margin-left:7%;
	margin-top:106px;
	float:left;
}
#kontaktfeld {
	display:block; 
	width:15%;
	margin-top:106px;
	float:right;
}

/* #exom-navi {width:100%;} */
#inhalt img {	
	width: 150px;
	float: left;
	margin-right: 10px;
}
}



@media only screen and (min-width: 1300px) {    /* ab 1300 px */
#inhalt {width:45%; margin-left:10%;}
}