/*  

Description: Stylesheet for onfire-design
Version: 1.0
Author: Andreas Linder
Author URl: http://www.atelier-interaktiv.de

*/




/*Farben:

magenta :    #f80078

*/







/*:::::::::::::::::: 
Contao-Styling 
:::::::::::::::::::*/


body {
margin : 0;
padding : 0;
font-size : 100.01%;
text-align : left;
position : relative;
}
select, input, textarea {
font-size : 99%;
}
form {
margin : 0;
padding : 0;
}
img {
border : 0;
}
#left {
float : left;
}
#right {
float : right;
}
#main {
width : auto;
position : relative;
}
.inside {
position : relative;
text-align : left;
}
.block {
overflow : hidden;
}
.clear, #clear {
height : 0.1px;
font-size : 0.1px;
line-height : 0.1px;
clear : both;
}
.invisible {
width : 0;
height : 0;
left : -1000px;
top : -1000px;
position : absolute;
overflow : hidden;
display : inline;
}
.custom {
display : block;
text-align : left;
}
.custom:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
* + html #main {
position : static;
}
header, footer, nav, section, aside, article, figure, figcaption {
display : block;
}
#header {
height : 100px;
}
#left {
width : 267px;
}
#main {
margin-left : 267px;
}
@media screen {
.warning {
color : #c55;
font-size : 1.1em;
}
.confirmation {
color : #090;
font-size : 1.1em;
}
.information {
color : #999;
font-size : 0.9em;
}




/*	strange*/
/*Verschwindet sonst*/

.ce_text{
	display: inline;
}

/*	strange*/





/*:::::::::::::::::: 
Allgemeines Styling  
:::::::::::::::::::*/



body {
background : #fff url('../images/bg/bg-all.png') no-repeat;
font-family : Georgia;
color : #000;
font-size : 14px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin : 0;
padding : 0;
letter-spacing : 0.09em;
}
ul {
list-style-type : none;
}
h1, h2, h3, h4, h5, h6 {
font-size : 100%;
font-weight : normal;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style : normal;
font-weight : normal;
}
fieldset, img {
border : 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration : none;
color : #000;
}

#main a{
	color: #f80078;
}

a:focus {
outline : none;
}
h1 {
color : #000;
font-size : 14px;
line-height : 16px;
padding-bottom : 30px;
font-weight :normal;
letter-spacing : 0.09em;
text-transform: uppercase;
}
	#clients h1{
		margin-bottom: 7px;
	}
	
	#contacts h1{
		margin-bottom: 36px;
	}
	
	#imprint h1{
		margin-bottom: 61px;
	}
	
	h1.titleline{
	font-size : 13.4px;	
	}


h2 {
font-weight: bold;
font-size : 11px;
}

p {
color : #000;
line-height : 20px;
margin-bottom : 1em;
font-size : 11px;
}

#main ul {
list-style-type : disc;
margin-left : 1.2em;
}
#main li {
color : #fff;
font-size : 16px;
line-height : 24px;
margin-bottom : 1em;
}




/*:::::::::::::::::: 
id und class
:::::::::::::::::::*/



.gap {
padding-bottom : 20px;
}
.biggap {
padding-bottom : 40px;
}
.clear {
clear : both;
}
strong {
font-weight : bold;
}
.active, a.trail, a:hover {
color : #f80078;
}


em{
	color: #f80078;
}



a.header{
	display: block;
	height: 80px;
	width: 275px;
}



header h1{
	position: absolute;
	top: -26px;
	left: 352px;
	text-transform: uppercase;
}

.hide{
	display: none;
}



.back-btn img {
display : block;
margin-bottom : 10px;
}
.back-btn a {
display : block;
/*margin-top : 18px;*/
margin-bottom : 18px;
margin-right : 18px;
border-bottom : 1px solid #333;
}



/*Anfangstext*/
.introtext-work{
	display: inline;
}

	.introtext-work h1{
		width: 677px;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
		padding-bottom: 20px;
		background: #474747;
		color: #fff;
	}
	.introtext-work p{
		width: 677px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
		background: #474747;
		color: #fff;
	}
	
	.introtext-work em{
		color: #fff;
		font-style: italic;
	}


/*:::::::::::::::::: 
Projektuebersicht
:::::::::::::::::::*/


.ce_image, .image_container {
display : inline;
}
figure,
section{
margin : 0;
height: 0;
}
.work-overview .image_container img {
border : 1px solid #000;
margin-right : 14px;
margin-bottom : 14px;
}

.work-overview .image_container img:hover {
border : 1px solid #f80078;
}



/*:::::::::::::::::: 
Menue
:::::::::::::::::::*/



.mod_navigation {
text-align : right;
padding-top: 17px;
/*padding-right : 83px;*/
}
.mod_navigation li{
padding-bottom : 0.8em;
text-transform : uppercase;
}

.mod_navigation ul.level_2 {
margin-top : 5px;
margin-bottom : 5px;
}

.mod_navigation .level_2 li {
font-size : 11px;
padding-top : 0.6em;
padding-bottom : 0;
letter-spacing : 0.04em;
text-transform: none;

}




/*:::::::::::::::::: 
Bereiche
:::::::::::::::::::*/

#main {
min-height : 400px;
width : 818px;
/*width : 1002px;*/
/*margin-right : 83px;*/
padding-top: 17px;
padding-bottom: 50px;
}

	
	#main .ce_headline,
	#main .ce_image,
	/*#main .ce_text,*/
	/*	strange hack*/	
	#main h1,
	#main h2,
	#main p,
	#main .portfolio-image img,
/*	strange*/
	#main #startseite,
	#main #uebersicht{
		margin-left: 83px;
	}
	
	#main .work-overview,
	#main .portfolio-image{
		margin-left: 0;
	}
	
	
	#main .ce_text{
		padding-right: 20px;
	}
	
#header {
height : 100px;
width : 1085px;
}
#left {
min-height : 400px;
width : 267px;
}