/****************************
www.calm-n-easy.de
Version 5 - Februar 2011
Alle Rechte vorbehalten.
****************************/

/****************************
	Allgemeine Formatierung 
****************************/
html {}
body { 
	font-weight: 300;
	font: normal 0.8em/1.4 'Lato', arial, sans-serif;
	color: #303030;
	background: transparent;
	min-height: 101%;
	padding: 50px 0;
}
a, a:link, a:visited {
	background-color: transparent;
	color: #f00;
	font-weight: 700;
	text-decoration: none;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
}
a:hover, a:focus, a:active {text-decoration: none; color: #000}
a:active {position: relative; top: 1px; outline:}

a img, img {border: none;}
a img {
	opacity: 0.7;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
}
a:hover img {opacity: 1;}

::-moz-selection {background:#FFFAB1;}
::selection {background:#FFFAB1;}


/****************************
	Typographie 
****************************/
p, dl {margin: 0 0 1.5em 0;}
h1,h2,h3 {
	font-family: Lato, Georgia, "Times New Roman", Times, serif;
	font-weight: 500;
	line-height: 1.4em;
	clear: both;
}
h1 {
	font-weight: 100;
	text-transform: uppercase;
}
h1, h2 {font-size: 2em; margin: 0 0 -0.2em 0; padding: 0;}
h2 {line-height: 1em; margin: 0 0 1em;}
h2 span, h3 span {font-weight: 100; display: block; text-transform: uppercase;}
#frontslide h2 {
	margin-left: 45px;
}
h3 {font-size: 2em; margin: 0 0 0.75em 0;}
blockquote,form,fieldset {margin: 0 0 1em 0;}
blockquote {
	background: #fafafa url(../images/quote.gif) no-repeat 5px 5px;
	padding: 1em 1em 1em 50px;
}
blockquote[cite]:after {
	content: "Quelle: " attr(cite);
	border-top:1px dotted #ddd;
	padding-top:0.5em; margin-top: 1em;
	display:block;
	color:#aaa;
}
q {quotes:"\201C" "\201D" "\2018" "\2019";}
q:before {content:open-quote;}
q:after {content:close-quote;}
	/* Hide from IE5-mac \*/
	* html q {font-style:italic;}
	/* End hiding from IE5-Mac */
abbr, acronym { border-bottom: 1px dotted #636363; cursor: help;}
em {font-style: italic; color: #999;}
ol {list-style: decimal outside; padding-left: 30px; margin: 0 0 1em 0; line-height: 1.75em;}
ul {list-style: square outside;  padding-left: 20px; margin: 0 0 1em 0; line-height: 1.75em;}


/****************************
	Layout 
****************************/
#title {
	padding: 20px 0 0;
	margin: 20px 0 0;
	border-top: 1px dotted #ddd;
	border-bottom: 1px dotted #ddd;
}	
#slogan {font-size: 1.2em; padding-left: 2px;}

/* Topnavigation */
ul#navi {
	position: relative;
	float: right;
	margin: 0;
	padding-left: 0;
	white-space: nowrap;
}
#navi li {
	display: inline;
	list-style-type: none;
}
#navi a { padding: 3px 10px; }
#navi a, #navi a:link, #navi a:visited {
	color: #000;
	background-color: transparent;
	text-decoration: none;
}

#navi a:hover, #navi a.active {
	color: #F00;
	background-color: transparent;
	text-decoration: none;
}

/* Footer */
#footer {
	margin-top: 50px;
}
#footer-vcard .email {display: block;}
#vcard-download {display: block; background: transparent url(../images/vCard.png) no-repeat left; padding: 15px 0 15px 30px;}


/* Klassen */
.border {
	border-bottom: 1px dotted #ddd;
	padding: 15px 0;
	margin: 15px auto;
}
.border.clear {
	padding: 0;
	margin:  25px auto;
}
.border-top {
	border-top: 1px dotted #ddd;
	margin-top: 25px;
	padding-top: 25px;
}
.keineanzeige, .hide {display: none;}
.clear {clear: both;}
.blockie {display: block;}
.desc { /* Beschreibung im Slider, angepasste Breite */
	width: 270px;
	float: left;
}
.date {display: block;}
.webtype {display: block; font-weight: 700;}
.left {float: left; margin: 0 1em 1em 0;}
.right {float: right; margin: 0 0 1em 1em.;}
a.buttonlink {
	display: block;
	float: left;
	padding: .6em 1.1em;
	text-align: center;
	position: relative;
	top: 5px;
	background: #eee;
	color: #404040;
	border: none;
	clear: both;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
}
a.buttonlink:hover {
	background-color: #bbb;
	color: #000;
}
.bloglink {
	padding: 72px 0 0;
	text-align: center;
}
.bloglink .buttonlink {
	position: relative;
	left: 5px;
}

/* Content Slider */
#slideshow {
	position: relative;
}
#slideshow #slidesContainer {
	margin:0 auto;
	width:750px;
	height:285px;
	overflow:auto; /* allow scrollbar */
	position:relative;
}
#slideshow #slidesContainer .slide {
	margin:0 auto;
	width:750px; /* reduce by 20 pixels to avoid horizontal scroll */
	height:285px;
}
/**
 * Slideshow controls style rules.
 */
.control {
	display:block;
	width:45px;
	height:263px;
	text-indent:-10000px;
	position:absolute;
	cursor: pointer;
}
#leftControl {
	top:0;
	left:0;
	background:transparent url(../images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
	top:0;
	right:0;
	background:transparent url(../images/control_right.jpg) no-repeat 0 0;
}

/* Portfolio */
#portfolio .threecol,
#portfolio .twocol  {
	padding: 0 0 20px; 
	margin-bottom: 25px;
	position: relative;
	height: auto;
}
#portfolio .threecol img {
	width:  90%;
	max-width: 310px;
	background-color: #f9f9f9;
	padding: 10px;
	border: 1px solid #eee;
}
#portfolio .twocol img {
	width: 85%;
	background-color: #f9f9f9;
	padding: 10px;
	border: 1px solid #eee;
	max-width: 200px;
}
#portfolio img:hover {
	border-color: #E5E5DD;
}
#portfolio .button {
	display: inline-block;
	float: left;
		border: none;
	clear: both;
}
#portfolio span.button {color: #404040;}
#portfolio a.button {color: #303030; border-bottom: 1px solid #ddd;}
#portfolio .button:hover {
	color: #000; border-bottom-color: #000;
}
span.button {
	text-transform: uppercase;
}


/* Netzwerklinks */
.xing {
	background: transparent url(../images/xing.png) 0 50% no-repeat;
	padding: 10px 0 10px 20px;
}
.linkedin {
	padding: 10px 0 10px 20px;
	background: transparent url(../images/linkedin.png) 0 50% no-repeat;
}
.endorse {
	padding: 10px 0 10px 20px;
	background: transparent url(../images/endorse.png) 0 50% no-repeat;
}

/* Kontakt */
#kontakt label {display: block; font-weight: bold; padding: 3px 2px;}
#kontakt label small {font-weight: normal; color: #F00; font-size: 1em;}

input.medium{width:95%;}
textarea.textarea{width:98%;}
textarea.medium{height:10em;}


input.text, textarea.textarea {margin:0;font-size:100%;color:#333;}
input.text, textarea.textarea{border-top:1px solid #7c7c7c;border-left:1px solid #c3c3c3;border-right:1px solid #c3c3c3;border-bottom:1px solid #ddd;background:#fff url(/img/fieldbg.gif) repeat-x top;}
input.text, textarea.textarea{padding: 3px 2px;}
input.text:focus, textarea.textarea:focus {background: #F3F2F1;}

.antispam {display: none;}
#kontakt .button{
	height: auto;
	border:  0;
	margin:  0;
	font-weight: 700;
	border-radius: 40px;
	-moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	background-color: #ddd;
	padding: .6em 1.1em;
	color: #333;
}
#haftpflicht a img {opacity: 0.2;}
#haftpflicht a:hover img {opacity: 1;}

#header {overflow: visible; position: relative;}
#urlaub {
	position: absolute; top: -30px; right: -10px; width: 286px; height: 192px;
	text-indent: -9999px;
	background: transparent url(../images/bin-im-urlaub.png) no-repeat;
	-webkit-transform: scale(0.9); 
	-moz-transform: scale(0.9);
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out; 
}
#urlaub:hover {
	-webkit-transform: scale(1.0); 
	-moz-transform: scale(1.0); 
}