/* --------------------------------------------------------------

	main.css

	All CSS for the public landingpage
	
 	* Common
	* Structure
	* Sites

-------------------------------------------------------------- */



/* Common
----------------------------------------------------------------------------------------------------*/

body { background: url('../img/bg.png') #333; color: #fff; font-size: 12px; height: auto; padding-bottom: 20px; }
h3 { line-height: 1.3em; }
a { text-decoration: underline; color: #333; }
a:hover { text-decoration: none; }
a.underlined { text-decoration: underline; }
a.underlined:hover { text-decoration: none; }
a.underlined-inverse { text-decoration: none; }
a.underlined-inverse:hover { text-decoration: underline; }

a.linklight { text-decoration: underline; color: #fff; }


[class^="icon-"], [class*=" icon-"] {
    background-image: url("../../img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-top: 1px;
    vertical-align: text-top;
    width: 14px;
}
.icon-circle-arrow-right {
    background-position: -240px -144px;
}
.icon-info-sign {
    background-position: -120px -96px;
}

.transparent { background: url('../img/shadow.png'); }
.box {border: 2px solid #eee; padding: 20px; }
	.box > h3 { margin-top: 0 }
.box-white {border: 2px solid #ddd; padding: 20px; background-color: #fff;}
.round {border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; }
.round-bottom {border-bottom-left-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius: 4px; -webkit-border-bottom-right-radius: 4px;}
.topdistance { padding-top: 20px; }
.topdistance-small {padding-top: 10px; }
.doubledistance { padding-top: 40px; }

.left { text-align:left }
.center { text-align:center }
.bold { font-weight: bold; }

.green { color: #1EA83F; }
.grey { color: #999; }
.darkgrey { color: #555; }
.red { color: #A81111 }

.thin { font-weight: 400 }
.extrathin { font-weight: 200 }

.float-left { float:left; margin-right: 7px; margin-bottom: 7px}
.float-right { float:right; margin-left: 7px; margin-bottom: 7px}

.gradient-blue {
	background-color: #2b90cc; 
	background-image: -moz-linear-gradient(top, #5ac6f4, #2b90cc); 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5ac6f4),color-stop(1, #2b90cc)); 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#5ac6f4', EndColorStr='#2b90cc '); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5ac6f4', EndColorStr='#2b90cc')"; 
}
.gradient-grey {
	background-color: #e0e0e0; 
	background-image: -moz-linear-gradient(top, #f7f8f7, #e0e0e0); 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f7f8f7),color-stop(1, #e0e0e0)); 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#f7f8f7', EndColorStr='#e0e0e0'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f7f8f7', EndColorStr='#e0e0e0')"; 
}
.shadow {
	-moz-box-shadow: 0px 0px 1px #999; -webkit-box-shadow: 0px 0px 1px #999; box-shadow: 0px 0px 1px #999; 
}
.shadow-light {
	-moz-box-shadow: 0px 0px 1px #ddd; -webkit-box-shadow: 0px 0px 1px #ddd; box-shadow: 0px 0px 1px #ddd; 
}
.shadow-medium {
	-moz-box-shadow: 0px 0px 4px #777; -webkit-box-shadow: 0px 0px 4px #777; box-shadow: 0px 0px 4px #777; 
}
.shadow-big {
	-moz-box-shadow: 0px 0px 7px #000; -webkit-box-shadow: 0px 0px 7px #000; box-shadow: 0px 0px 7px #000; 
}

div.headline-special2 { background: url('../img/info/headline_special2.png') no-repeat; }
div.headline-special2 h2 { padding: 40px 0 16px 0; font-weight: 400; font-size: 3em; }
div.headline-special2 a.toplink { float: right; padding-top: 65px; padding-left: 15px; background: url(../img/arrow_top.png) 0 70px no-repeat;}

.detail-headline { font-size: 2.2em; font-weight:300; text-align:left; margin-bottom: 0; }
.detail-subheadline { padding-top: 0px; margin-top:0px; color: #555; font-weight: bold; }

.headline1 { font-size: 2.2em; font-weight:300; text-align:left; margin-bottom: 0; }
.headline2 { font-size: 1.8em; font-weight:400; text-align:left; margin:10px 0px }
.headline3 { font-size: 1.6em; font-weight:400; text-align:left; margin:10px 0px }
.headline4 { font-size: 1.5em; font-weight:400; text-align:left; margin:5px 0px }
.with-subheadline { padding-bottom: 3px; margin-bottom:0px }
.subheadline { padding-top: 0px; margin-top:0px; color: 555; }

/* -- Buttons -- */
/* Button mit icon (mit wrapper <div>) */
.linkbutton { background: url("../../img/button_grey.png") repeat-x center top; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px;  }
.linkbutton a { cursor: pointer; text-decoration: none; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius: 3px; display: block; font-size:12px; padding:4px 8px 4px 31px; border:1px solid; border-color: #CCCCCC #BBBBBB #A0A0A0 #BBBBBB; background:no-repeat 7px 50%; text-shadow: 0 1px 0 #FFFFFF; color: #333; }
.linkbutton a:hover { border-color: #939393; padding:5px 8px 3px 31px;}
.linkbutton-no-icon a { padding-left:10px; }
.linkbutton-no-icon a:hover { padding-left:10px; }
.linkbutton-blue { background-image: url("../../img/button_blue.png");}
.linkbutton-blue a { color: #fff; font-weight:bold; border-color: #329dcf #1e81af #007ab3 #1e81af; text-shadow: none;}
.linkbutton-blue a:hover { border-color: #005f8b;}
.linkbutton-strong { font-weight:bold;}
.linkbutton-right { float:right; margin-left: 6px; }
.linkbutton-left { float:left; margin-right: 6px; }
.linkbutton-small { margin: 0 }
.linkbutton-fieldset { position:absolute;right:20px; top:15px; }
.linkbutton-small a { cursor:pointer; text-decoration: none; padding:1px 5px 1px 32px; display: block; background: no-repeat 10px 50%; height: 16px; }
.linkbutton-small a:hover { text-decoration: underline;}
.linkbutton-notext a:hover { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background-color: #cccccc; }
.linkbutton-top a { text-decoration: none; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; display: block; width:80px; text-align:center; float: right; margin-right: 15px; padding:25px 0 5px 0; border:1px solid #ccc; background: #fff no-repeat 50% 6px; }
.linkbutton-top a:hover { background-color: #FAFAFA;}
.linkbutton-topright a { height: 16px; position: absolute; right: 0; top: 0; padding: 5px; margin: 5px; }
.linkbutton-outside { position: absolute; top: 5px; right: 15px; }
.linkbutton-outside a { text-decoration: none; display: block; padding:5px 0 5px 35px; background:no-repeat 10px 50%;}
.linkbutton-outside a:hover { text-decoration: underline; }
.linkbutton-hide-content { float: right; }
.linkbutton-hide-content a { text-decoration: none; display: block; padding:5px 0 5px 35px; background:no-repeat 10px 50%;}
.linkbutton-hide-content a:hover { text-decoration: underline; }
.linkbutton-for-more-info { }
.linkbutton-width a { width:100px; text-align:center;}

.linkbutton-down a { background-image: url("../../img/icons16/bullet_arrow_down.png") }
.linkbutton-completion a { background-image: url("../../img/icons16/accept.png") }
.linkbutton-cash a { background-image: url("../../img/icons16/money.png") }
.linkbutton-save a { background-image: url("../../img/icons16/disk.png") }
.linkbutton-world-link a { background-image: url("../../img/icons16/world_link.png") }
.linkbutton-magnifier a { background-image: url("../../img/icons16/magnifier.png") }

/* -- Signup Button -- */
.signup {
	text-decoration:none;
	background-color: #2b90cc; 
	border-top: 1px solid #9edef8; 
	-moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; 
	cursor: pointer; 
	text-align: center; 
	float: left; 
	text-shadow: 0px 1px 2px #393939; 
	color: #ffffff; 
	font-family: 'HelveticaNeue-Light','Helvetica Neue Light','Helvetica Neue',sans-serif; 
	font-weight:bold; 
	letter-spacing:1px; 
	line-height: 1.7em; 
	font-size:27px; 
	width:300px;
}

.signup:hover { 
	background-color: #4ab6e5; 
	background-image: -moz-linear-gradient(top, #7edbf8, #4ab6e5); 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7edbf8),color-stop(1, #4ab6e5)); 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#7edbf8', EndColorStr='#4ab6e5'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7edbf8', EndColorStr='#4ab6e5')"; 
}

.signup .small-text { 
	text-transform: uppercase; 
	font-spacing: 2px; 
	color: #363636;  
	display: block; 
	text-shadow: 0px 1px 0px #5ac6f3; 
	line-height: .5em; 
	font-weight: normal; 
	font-family: Arial, sans-serif; 
	margin: 1px 0 19px 0; 
	font-size: 11px;
}
.signup-center { padding: 30px 0 50px 320px; }


/* -- Buttons -- */
.submit input, .submit .input {
	cursor: pointer; 
	font-size: 18px; 
	text-shadow: 0px 1px 2px #333; 
	color: #ffffff; 
	padding: 8px 15px;
	margin-left: 120px; 
	border: solid #9edef8; 
	border-width: 1px 0 0 0;
	-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; 
	background-color: #2b90cc; 
	background-image: -moz-linear-gradient(top, #5ac6f4, #2b90cc); 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #5ac6f4),color-stop(1, #2b90cc)); 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#5ac6f4', EndColorStr='#2b90cc'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#5ac6f4', EndColorStr='#2b90cc')";
	text-decoration: none;
}
.submit input:hover, .submit .input:hover {
	background-color: #4ab6e5; 
	background-image: -moz-linear-gradient(top, #7edbf8, #4ab6e5); 
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7edbf8),color-stop(1, #4ab6e5)); 
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#7edbf8', EndColorStr='#4ab6e5'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7edbf8', EndColorStr='#4ab6e5')"; 
}


/* -- Links -- */

.icon { display:block; padding: 5px 0 5px 25px; background: no-repeat left center; border-bottom: 1px solid #DDD; }
.icon.last { border-bottom: none; }
.icon.eigene-foto-webseite { background-image: url('../img/icons/eigene-foto-webseite.png'); }
.icon.inhalte-selbst-verwalten { background-image: url('../img/icons/inhalte-selbst-verwalten.png'); }
.icon.soziale-netzwerke { background-image: url('../img/icons/soziale-netzwerke.png'); }
.icon.fotografie-blog { background-image: url('../img/icons/fotografie-blog.png'); }
.icon.fotos-online-verwalten { background-image: url('../img/icons/fotos-online-verwalten.png'); }
.icon.fotos-online-publizieren { background-image: url('../img/icons/fotos-online-publizieren.png'); }
.icon.kennwort-geschuetzte-alben { background-image: url('../img/icons/kennwort-geschuetzte-alben.png'); }
.icon.lightroom-ftp { background-image: url('../img/icons/lightroom-ftp.png'); }
.icon.wasserzeichen { background-image: url('../img/icons/wasserzeichen.png'); }
.icon.foto-onlineshop { background-image: url('../img/icons/foto-onlineshop.png'); }
.icon.preislisten-verwalten { background-image: url('../img/icons/preislisten-verwalten.png'); }
.icon.gutscheine { background-image: url('../img/icons/gutscheine.png'); }
.icon.rechnungsstellung { background-image: url('../img/icons/rechnungsstellung.png'); }
.icon.zahlungsabwicklung { background-image: url('../img/icons/zahlungsabwicklung.png'); }
.icon.produktion-versand { background-image: url('../img/icons/produktion-versand.png'); }
.icon.statistiken { background-image: url('../img/icons/statistiken.png'); }
.icon.bestellungsnachverfolgung { background-image: url('../img/icons/bestellungsnachverfolgung.png'); }
.icon.kunden-verwalten { background-image: url('../img/icons/kunden-verwalten.png'); }

.icon.back { background-image: url('../../img/icons16/resultset_previous.png'); }
.icon.rss { background-image: url('../../img/icons16/rss.png'); }

a.icon.pdf { background-image: url('../img/icons/pdf.png'); }

h3.icon{ padding: 8px 0 8px 45px; background: no-repeat left center; border:none; }
h3.icon.kunden-gewinnen { background-image: url('../img/icons/kunden-gewinnen.png'); }
h3.icon.fotoshootings-abwickeln { background-image: url('../img/icons/fotoshootings-abwickeln.png'); }
h3.icon.fotos-verkaufen { background-image: url('../img/icons/fotos-verkaufen.png'); }
h3.icon.aftersales { background-image: url('../img/icons/aftersales.png'); }

h3.icon {border: none; }

/*  formular-line */
.formular-line { margin: 0 -20px; }
p.formular-line-long { font-size: 17px; font-weight: bold; margin-bottom: 10px; }
.formular-line .input-wrapper { float: left; width: 360px; padding: 4px; margin-bottom: 3px; }
.formular-line-active .input-wrapper { background: #ddd; }
.formular-line .input label { display:block; float:left; margin:8px 0; width:125px; text-align: right; font-weight: bold; font-size: 13px; }
.formular-line .input input { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; border:1px solid #ccc; font-size:1em; height:20px; margin-left: 10px; padding:6px; width:210px; }
.formular-line .input select { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; border:1px solid #ccc; font-size:1em; margin-left: 10px; padding:6px; width:215px; }
.formular-line .input select { margin: 9px 10px; }

.formular-line .input-wrapper.textarea-wrapper {width: auto}
.formular-line .input textarea { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; border:1px solid #ccc; font-size:1em; height:200px; margin-left: 10px; padding:6px; width:420px; }

.formular-line .info { display: none; position: relative; width: 230px; height: 30px; float: left; margin: 0 0 10px 5px; background:url("../img/infobox-arrow.png") 0 10px no-repeat; padding-left: 7px; border: none;}
.formular-line .info div { position: absolute; z-index:999; top:0; left: 5px; padding:4px 10px; background: #ddd; }
.formular-line-active .info { display: block; }

.formular-line-error .input-wrapper { border-color: #DDAAAA; background: #FFDDDD; }
.formular-line-error .error-message { clear:both; border: none; background: none; text-align: center; padding: 5px 0; margin: 0; width: 360px; }

.formular-line .choose-username { padding: 7px 0; position: relative; background: url("../../img/inputfield.png") no-repeat 135px 0; }
.formular-line .choose-username label { margin: 0; }
.formular-line .choose-username .input input { border: none; width: 130px; text-align: right;  background: none; padding: 0 3px 0 0; font-size: 13px; }
.formular-line .choose-username span.domain { font-size: 14px; font-weight: bold; color: #333}
.formular-line .choose-username div#validateSubdomain {position: absolute; top:0; left: 375px; padding-top: 7px; width: 200px; }
.formular-line .choose-username div.domain-check {padding-top: 1px; font-weight: bold; }
.formular-line .choose-username .error-message { padding-bottom: 0; padding-top: 12px; margin-bottom: -2px; }

.radio-box { margin: 0 -20px; }
.radio-box .radio-description label { margin-top: 5px; font-weight:bold; width:125px; margin-right:8px 0; float: left; text-align: right; font-size: 13px; }
.radio-box .radio-single { margin-left: 15px; float:left; padding-right:4px; padding-top:2px; cursor:pointer; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px;}
.radio-box .radio-single:hover { background:#cccccc; }
.radio-box .radio-single label { float: left; width:inherit; cursor:pointer; padding:5px 0px; padding-left:15px; margin:0px;}
.radio-box .radio-single input { float: left; margin:7px 0; width:15px; border:0px; }



/* Structure
----------------------------------------------------------------------------------------------------*/

#header { color: #fff; }
#login { color: #333; padding: 20px 0; display:none; border-bottom: 1px solid #fff;  background: url('../img/bg_login.png') repeat-x center bottom; }
#login #login-inner form { float: right; }
#login #login-inner * { float: left; }
#login #login-inner label { margin-top: 4px; }
#login #login-inner span { margin: 4px 20px 0 0; }
#login #login-inner a { color: #333; margin: 5px 0; display:block; float: left; cursor: pointer; }
#login #login-inner a#login-show { float: left; margin-left: 10px; }
#login #login-inner .cookie {margin: 7px 5px 0 0; }
#login #login-inner .login-submit input { padding: 5px 10px; margin:0; font-size: 12px; }
#login #login-inner .input input { margin-left: 10px; margin-right: 20px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; border:1px solid #999; padding: 5px; }
#login #login-inner #login-wrapper { display:block; float: none; }
#login #login-inner #password-wrapper { display:none; float: none; }
#topmenu { font-size: 11px; height: 30px; border-bottom:1px solid #333; background: url('../img/bg_topmenu.jpg') center top;}
#topmenu .wrapper { position: relative; padding-right: 169px; }
#topmenu .element { float: right; color: #AAA; padding: 3px 5px 3px 23px; margin-top: 4px; background: 3px center no-repeat;  text-decoration:none;}
#topmenu .divider { padding: 6px 12px 6px 6px; float: right; color: #AAA; }
#topmenu #topmenu-faq { background-image: url('../img/topmenu_faq.png'); }
#topmenu #topmenu-contact { background-image: url('../img/topmenu_contact.png'); }
#topmenu #topmenu-phone { background-image: url('../img/topmenu_phone.png'); }
#topmenu #topmenu-blog { background-image: url('../img/topmenu_blog.png'); padding-left: 30px; font-weight: bold; }
#topmenu #topmenu-login { position: absolute; top: 0; right: 0; }
#topmenu .topmenu-login-inner { cursor:pointer; display:block; font-size: 12px; background: url('../img/login_key.png') 10px 50% no-repeat; text-decoration:none; color: #333; padding: 9px 15px 9px 30px; font-weight: bold; }
#topmenu a:hover {text-decoration: underline}
#topmenu a.active{background-color: #333;}
#navi { background: #fff; border: none; height:105px;}
#navi #menu-register { color: #70c9f0}
#logo { margin: 40px 0 0 -5px; }
#logo-link {background-image: url("../img/fotograf_de_logo.png"); width: 267px; height: 67px; display:block; margin-top: 9px; }
#logo-link:hover {background-position: 0 68px; }
#menu { margin-top: 38px; }
#menu ul { margin: 0; list-style: none; }
#menu li { display:inline; float: right; margin: 0 0 0 3px;}
#menu a { color: #333; padding: 5px 15px; font-size: 15px; text-decoration: none; }
#menu a.active, #menu a:hover { background: #3fa6e7; color: #fff !important; }

#content { background-color: #fff; color: #333; position: relative; padding-bottom: 50px; }

#footer { font-size: 11px; color: #777; background: url('../img/bg_footer.png') repeat-x center top;}
#footer .topic { color: #AAA; font-size: 1.3em; padding-top: 30px; }
#footer ul li { margin: 0; list-style: none; }
#footer .sitemap { color: #777; display: block; padding: 5px 0; border-top: 1px solid #333; text-decoration:none; }
#footer .sitemap.last { border-bottom: 1px solid #333; }
#footer a.sitemap:hover { background-color: #111111; }
#footer .sublist a.sitemap {padding-left:10px}
#footer ul.sublist {margin-bottom:0}
#footer .newsletterform label { color: #aaaaaa;  } 
#footer .newsletterform div { line-height: 0.5em; color: #aaaaaa;  } 
#footer .newsletterform input[type=email] { margin:0px; width:133px; border: 1px solid #555555; background-color: #333333; color: #aaaaaa;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } 
#footer .newsletterform input[type=submit] { float:right; xwidth:40px; margin:5px  } 
		
.content-shadow { background: url("../img/bg_content_centered.png") top center no-repeat; border-top: 1px solid #fff; padding-top: 35px; }
#edge {position: absolute; top: -11px; left: 50%; width: 35px; height: 30px; background-image: url("../img/edge_white.png");}

/* Segmentinfos
----------------------------------------------------------------------------------------------------*/

a.segment-box { display: block; border: 2px solid #eee; padding: 15px; text-decoration: none;  }
a.segment-box:hover {border-color: #3FA6E7; }
a.segment-box span.headline { font-size: 1.3em; margin-bottom: 10px; display: block; }
a.segment-box span.segment-image { width: 186px;  }
a.segment-box span.text { display:block; margin: 10px 0; font-weight: normal; }

.segment h1 { text-align: left; }

.segment .segment-header-image { position: relative; }
.segment .opener { position: absolute; bottom: 38px; left: 0; background: url('../img/transparent_black.png'); height: 35px; width: 660px; padding: 20px;  }
.segment .opener h2 { color: #fff; margin: 0; padding: 0; margin: 0; font-size: 23px; }
.segment .additional-context { background: #37AAE1; color: #fff; padding: 10px 20px; font-weight: bold; }
.segment .factsheet { display: block; float: right; width: 100px; height: 80px; border: 2px solid #ccc; margin-left: 20px; text-decoration: none; padding: 15px 10px 15px 90px; background: no-repeat 15px 15px; }
.segment .factsheet:hover {border-color: #37AAE1; }
.segment .advantage h4 { margin-top: 0; }
.segment .advantage .highlight { color:#37AAE1; }
.segment .main-advantages { background: #f4f4f4; margin-bottom: 20px; }
.segment .main-advantage { padding: 70px 10px 30px 10px; background-repeat: no-repeat; background-position: 50% 15px; text-align: center; font-weight: bold; }
.segment .study { margin-top: 20px; font-weight: bold; font-size: 1.1em; }
.segment .study p { margin-bottom: 5px; }
.segment .study p.fotograf { font-size: 1.3em; }
.segment .study p.note { font-size: 0.9em; font-weight: normal; }
.segment .functions h4 { border-top: 1px dashed #ccc; font-size: 1.3em; padding-top: 20px; margin-top: 30px; clear: both;}
.segment .functions h4 .number { color: #37AAE1; font-size: 2em; margin-right: 15px;}
.segment .functions .step .headline { font-weight: bold; }


.segment-image {
	display:block;
	height:130px;
	width:220px;
	background: grey;
	background-position:  50% 50%;
	background-repeat: no-repeat;
	text-decoration:none;
}



/* Sites
----------------------------------------------------------------------------------------------------*/

div.headline-special { background: url('../img/headline_special.png') no-repeat; margin-top: 20px;}
div.headline-special .category { float:left; padding: 130px 0 0 80px; background: no-repeat 0 65px; }
div.headline-special h2 { font-family: 'Open Sans',arial,sans-serif; font-weight: 400; float: left; padding: 35px 0 10px 10px; }
div.headline-special a.toplink { float: right; padding-top: 70px; padding-left: 15px; background: url(../img/arrow_top.png) 0 76px no-repeat;}


/* Startseite
----------------------------------------------------------------------------------------------------*/
.banner-landingpage { background: url('../img/bg_banner_landingpage.png') repeat-x top center; }
#landingpage-headline { height: 340px; background: url("../img/landingpage_eyecatcher.jpg") no-repeat 430px 0; position: relative; }
#landingpage-headline h1.mission { text-align: left; line-height: 1.2em; font-size: 30px; margin-bottom: 15px; }
#landingpage-headline p.mission { font-size: 1.2em; margin: 0; padding: 2px 0; background: url('../img/circle.png') 0 50% no-repeat;  }
#landingpage-headline p.mission span { color: #fff; padding: 0 6px; margin-right: 5px; }
#landingpage-headline .signup {position: absolute; left: 0; bottom: 30px; }
.status-quo { font-weight: bold; margin-top: 20px; }
.status-quo .big { color: #3fa6e7; font-size: 2.5em; font-weight: 200; }
h2.blue { color: #3fa6e7; margin-top: 10px; line-height: 1.1em; font-size: 28px; }

.landingpage-vorteile { background: url('../img/bg_pattern.jpg'); padding: 20px; }
.landingpage-vorteile .column { width: 200px; float: left; margin-right: 30px; text-align: center; }
.landingpage-vorteile .column .box-white { padding-top: 100px; background-repeat: no-repeat; background-position: 50% 30px; font-weight: bold; font-size: 1.1em; }

.landingpage-more-info { padding: 10px 0 50px 34px;  background: url('../img/start/landingpage_edge2.jpg') 5px 0 no-repeat; }
.sidebar-headline { margin: 35px 0 15px -28px; background: #aaa; color: #fff; padding: 3px 0 3px 28px; font-weight: bold; }
.sidebar-subheadline {font-size: 1.3em; }
.more-check { padding: 0 0 0 26px;  background: url('../img/check.png') 0 3px no-repeat; font-size: 1.3em }


/* -- Features -- */

#features .feature-overview {  }
#features .feature-overview .separator { height: 3px } 
#features .feature-overview .overview { text-align: center; background: #333; color: #fff; display:block; padding: 10px 0; font-size: 15px; margin-bottom: 10px; }
#features .feature-overview .overview .highlight { font-size: 1.4em; }
#features .feature-overview .icon { padding: 10px 0 10px 40px; }

#features .subcategory { float:left; height: 30px; width: 30px; margin: 15px 15px 0 0; }

#features h3 { margin: 20px 0 20px 0 }
#features h3 a { border-bottom: none; font-size: 18px; }
#features ul { list-style-image: url('../img/list.png');}
#features ul li { margin-left: 24px; padding: 3px 0; }

#features .detail-photo {border: 1px solid #ddd; padding: 2px; margin-bottom: 10px;  }
#features .detail-photo:hover {border-color: #37a9e0  }

/* -- Customers -- */
 #jumpmenu { text-align: center; }
 #jumpmenu a { color: #fff; padding: 8px 30px 8px 15px; text-decoration: none; font-weight: bold; border-bottom: 3px solid #333; background: url('../img/jumpdown.png') no-repeat 90% 50% #333; }
 #jumpmenu a:hover { border-bottom-color: #3FA6E7; }

#customers .customer { display: block; border: 2px solid #fff; text-decoration: none; padding: 230px 0 10px 0; text-align: center; background-repeat: no-repeat; background-position: 50% 0; }
#customers .customer:hover { border-color: #eee; }
#customers .customer .name { font-size: 18px; display: block; padding: 10px 0 0 0; }
#customers .customer .segments { display: block; color: #555; }

#customers .story { display: block; text-decoration: none; padding: 10px; background: #eee;}
#customers .story:hover { background: #ddd; }
#customers .story img { float: left; }
#customers .story .text { float: right; width: 325px; }
#customers .story .headline { font-size: 18px; display: block; padding-bottom: 5px; }
#customers .story .teaser { display: block; padding-bottom: 13px; }
#customers .story .more { background: #3FA6E7; color: #FFFFFF; padding: 4px 10px; font-weight: bold; }

img.customer-portrait {float: left; padding: 0 15px 0 0 ;}

.open-more-elements { text-decoration: none; background: #3FA6E7; color: #FFFFFF; padding: 4px 10px; font-weight: bold; cursor: pointer; }
.open-more-elements:hover { background: #3989ac}

/* -- Examples -- */

#examples div.photographer { margin: 10px 0 3px 0; }
#examples div.photographer { font-weight: bold; }
#examples h2.genre { font-size: 18px; font-weight: normal; margin: 4px 0; }
#examples p.photographer-website { color: #777; margin: 3px 0;}
#examples p.photographer-website a { color: #777; }

.photographer-example { position: relative;  }
.photographer-more { display: none; position: absolute; top: -50px; left: -50px; width: 360px; padding: 20px; background: #fff; z-index:999; }

/* -- Segment-Info -- */
.segment-overview h1 { text-align: left;}
.segment-overview .subheadline { text-align: left;}

.segment-overview h3 { margin-top: 10px;}
.segment-overview p { margin: 5px 0;}
.segment-overview a { font-weight: bold; }

.info-socialmedia {
	float: left;
}

.info-socialmedia .social-bookmark {
	float: right;
	width: 120px;
}

.advantages ul, .use_cases_list ul {
	list-style-image:initial;
	list-style-position:initial;
	list-style-type:none;
	margin-bottom:30px;
}

.advantages li, .use_cases_list li {
	font-size: 1.1em;
	margin:0px;
	padding: 4px 0px 0px 25px;
	background: url(../../img/icons16/star.png) 0 50% no-repeat;
}

.use_cases_list li {
	background: url(../../img/icons16/accept_bw.png) 0 50% no-repeat;
}

.downloadbox-blue {
	background: #e6eff8;
	border: 1px solid #155b8f;
	padding: 5px;
}
.carousel-container { background: url('../img/photographers_shadow_top.png') no-repeat center top #f4f4f4; color: #333; }
.carousel .name { display: block;  padding-top: 12px;}
.carousel .genre { display: block; font-weight: bold; font-size: 1.3em; }
.carousel-bottom { background: url('../img/photographers_shadow_bottom.png') no-repeat center bottom; }


/* -- Pricing -- */

#pricing .package { position: relative; }
#pricing .package .name { font-weight: bold; font-size: 2em; }
#pricing .package .package-highlight { color: #fff; position: absolute; padding: 5px 0 0 20px; width: 108px; height: 29px; top: 24px; right: -8px; background: url('../img/package_highlight.png')}
#pricing .package .price { line-height: 1; }
#pricing .package .price .currency { font-weight: 300; font-size: 18px; padding-top: 7px; float: left; }
#pricing .package .price .amount { font-weight: 200; font-size: 55px; float: left; padding: 0 10px; }
#pricing .package .price .period { font-weight: 300; font-size: 18px; padding-top: 38px; float: left; }
#pricing .package .description { margin: 30px 0 10px 0;}
#pricing .package .feature { border-top: 1px solid #fff; border-bottom: 1px solid #ccc; margin: 0; padding: 7px 0; }
#pricing .package .feature.first { border-top: none; }
#pricing .package .feature.last { border-bottom: none; }
#pricing .signup-area {padding: 20px 0; margin: 40px 0; border: solid #ccc; border-width: 1px 0; }



/* -- Register -- */
.operation{ display:none; margin-left: 122px; padding: 10px 25px; background:url("../img/loading_login.gif") 0 50% no-repeat;}


/* -- FAQ -- */
.faq-link {display:block; padding: 2px 0;}
#faq h3 {padding: 10px 0 10px 25px; margin: 15px 0 0 0; font-size: 14px; background: url("../img/icons/faq_small.png") no-repeat scroll 0 50% transparent; font-weight: bold;}

.next-videos { display:block; width: 166px; float: left; padding: 0 10px 10px 0; text-decoration: none; cursor: pointer; }
.next-videos img {padding: 2px; border: 1px solid #ccc; }
.next-videos:hover img {border-color: #38AAE0;}
.next-videos.active img {border-color: #777; background: #777;}

.list-box {border: 1px solid #ccc; margin: 15px 0 40px 0; position: relative}
.list-box .box-1 {display:block; float: left; width: 282px; padding: 50px 15px 15px 15px; border-right: 1px solid #ccc; }
.list-box .box-2 {display:block; float: left; width: 282px; padding: 50px 15px 15px 15px; border-right: 1px solid #ccc; }
.list-box .box-3 {display:block; float: left; width: 282px; padding: 50px 15px 15px 15px;  }

.list-box .box-a {display:block; float: left; width: 438px; padding: 50px 15px 15px 15px; border-right: 1px solid #ccc; }
.list-box .box-b {display:block; float: left; width: 438px; padding: 50px 15px 15px 15px; }
.list-box .active {background-color: #f4f4f4; font-weight:bold; text-decoration: none;}
.list-box a {background: no-repeat 50% 10px; text-align: center; position: relative;}
.list-box #videos-subnavi {background-image: url("../img/icons/screencast.png")}
.list-box #faq-subnavi {background-image: url("../img/icons/faq.png")}
.list-box #support-subnavi {background-image: url("../img/icons/kundenservice.png")}
.list-box img {position: absolute; bottom: -1px; left: 50%; text-decoration: none;}



/* Team */
.highlight-box { cursor:pointer; font-weight: bold; padding:10px 20px 10px 10px; margin-bottom: 10px; background: url('../img/open_element.png') no-repeat right 50% #38AAE0; color: #fff; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.highlight-box:hover {background-color: #333;}
.highlight-content {  padding:10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.show-me {display:none;}

/* Blog */
#blog h2 { margin: 0; font-weight: 200; font-size: 2.4em; }
#blog.blog-entry h1 { margin: 0; text-align: left; font-weight: 200}
#blog h2 a { text-decoration: none; color: #333; font-size: 0.9em; }
#blog h2 a:hover { text-decoration: underline; }
#blog .blog-entry-header {position: relative; background: #eee;  padding: 10px 15px 10px 47px}
#blog .blog-entry {margin-bottom: 20px}
#blog .blog-entry-date {background: url('../img/blog_date_bg.png'); line-height: 1.2; font-weight: bold; color:#fff; padding: 9px 0 0 15px; width: 45px; height: 52px; position: absolute; top: 20px; left: -26px;  }
#blog.blog-entry .blog-entry-date { top: 5px; }
#blog .blog-entry-date .year { font-weight: normal; font-size: 1.3em;}
#blog .blog-entry-text {font-size:13px; padding: 38px; border: solid #eee; border-width: 0 2px 2px 2px; margin-bottom: 10px; }
#blog .blog-entry-social-bookmarks {float:right;}
#blog .blog-entry-social-bookmarks .social-bookmark {float:right;}
#blog.blog-entry .blog-entry-social-bookmarks .social-bookmark,
#blog.blog-entry .blog-entry-social-bookmarks { float: none; }
#blog .blog-entry-comment-link {color:#777; margin-bottom: 40px; }
#blog .blog-entry-comment-link a {color:#777; text-decoration:underline; }
#blog .blog-entry-comment-link a:hover {text-decoration:none; }
#blog .about-the-author img { float: left; margin-right: 20px; }
#blog .about-the-author .info { float: left; width: 535px; }
#blog .blog-categories ul li {list-style-type:none; margin-left:10px; font-size:1.1em;}
#blog .blog-categories h4 {margin-bottom:0px;}

/* Submenu */
.submenu-wrapper {
	xbackground: url(../img/menu_left.png) bottom right no-repeat;
	margin-right:10px;
}

.submenu, .headline-menu {
	list-style-image:initial;
	list-style-position:initial;
	list-style-type:none;
}

.submenu li {
	padding: 0;
	margin: 0;
}

.submenu li.active a {
	background: url(../../img/small-arrow-right.png) 0 50% no-repeat;
	font-weight:500;
}

.submenu a {
	font-size: 1.3em;
	font-weight:300;
	color:#333;
  	text-decoration:none;
  	display: block;
  	padding: 4px 0  4px 12px;
  	border-bottom: 1px dashed #ddd;
}
.submenu li:last-child a {
	xborder-bottom: 1px dashed #ddd;
}

.submenu a:hover {
	font-weight:500;
	color:#006DAC;
	background: url(../../img/infobox-arrow-left.png) 0 50% no-repeat;
}
.submenu a:visited {
	color:#333;
}

.submenu .headline-menu {
	padding: 5px 0px;
	margin: 0px;
}

.submenu .headline-menu li {
	margin: 0px 3px 0px 10px;
}

.submenu .headline-menu li a {
	background: none;
	font-weight:300;
	font-size: 1.2em;
	border: none;
}
.submenu .headline-menu li a:hover {
	background: none;
	font-weight:500;
	color:#006DAC;
}
.submenu .overview a { padding: 10px 0; border-bottom: none; font-weight: bold;}
.submenu .overview a:hover { background: #f4f4f4; }

/* Nachrichten ähnlich wie Growl */
#alert-messages {position:fixed; top:5px; left:50%; width:450px; z-index:100000; margin-left:-225px;}
#messages {position:fixed; top:-10px; left:50%; margin-left:-225px; width:450px; z-index:100000;}
.message {position:relative;border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../../img/icons16/information.png") 10px 15px no-repeat #e6eff8; color: #155baf; border:1px solid #155baf; margin:5px 0 5px 0; padding:10px 10px 10px 40px;  }
.message_info {position:relative;  border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../../img/icons16/information.png") 10px 15px no-repeat #e6eff8; color: #155baf; border:1px solid #155baf; margin:5px 0 5px 0; padding:10px 10px 10px 40px;  }
.message_error {position:relative; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../../img/icons16/cancel.png") 10px 50% no-repeat #Faa; color: red; border:1px solid #DDAAAA; margin:5px 0 5px 0; padding:10px 10px 10px 40px;  }
.message_ok {position:relative; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; background:url("../../img/icons16/accept.png") 10px 50% no-repeat #9DFA63; color: green; border:1px solid #7BAD51;  margin:5px 0 5px 0; padding:10px 10px 10px 40px; }
.message-close { border-radius:2px; -moz-border-radius:2px; -webkit-border-radius: 2px;position:absolute; right:10px; top:12px;}
.error-message { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px; padding:6px 35px 4px; background:url("../../img/icons16/exclamation.png") 10px 50% no-repeat #FFDDDD; border: 1px solid #DDAAAA; color: red; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius: 4px;}
#messages div {font-size:14px; margin-top: 18px; line-height:20px;}



/* Tooltip */
.tip { cursor:pointer; }
.tooltip {display:none; width: 300px; z-index:100}
.tooltip.small {width: 160px; }
.tooltip.big {width: 450px; }
.tooltip .tip-inner {padding: 10px; background: #fff; color: #333; text-align: left;}
.tooltip .tip-top {position: relative; background: url('../../img/tooltip/top.png') no-repeat top center; padding-top: 17px; margin: 0 9px;}
.tooltip .tip-top-l {position: absolute; top: 0; left: -9px; height: 17px; width: 9px; background: url('../../img/tooltip/top_left.png') no-repeat bottom right;}
.tooltip .tip-top-r {position: absolute; top: 0; right: -9px; height: 17px; width: 9px; background: url('../../img/tooltip/top_right.png') no-repeat bottom left;}
.tooltip .tip-left {background: url('../../img/tooltip/left.png') repeat-y left; padding-left: 9px;}
.tooltip .tip-right {background: url('../../img/tooltip/right.png') repeat-y right; padding-right: 9px;}
.tooltip .tip-bottom {position: relative; background: url('../../img/tooltip/bottom.png') repeat-x bottom center; padding-bottom: 9px; margin: 0 9px;}
.tooltip .tip-bottom-l {position: absolute; top: 0; left: -9px; height: 9px; width: 9px; background: url('../../img/tooltip/bottom_left.png') no-repeat top right;}
.tooltip .tip-bottom-r {position: absolute; top: 0; right: -9px; height: 9px; width: 9px; background: url('../../img/tooltip/bottom_right.png') no-repeat top left;}
.tooltip h3 {padding: 5px 0 10px 0; }
.tooltip img {float: left; padding: 0 15px 5px 0;}


.alert .close{ display:none; }
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #c09853;
}
.alert-heading {
  color: inherit;
}
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.alert-danger,
.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}
.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
  margin-bottom: 18px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: #c09853;
}
.alert-heading {
  color: inherit;
}
.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 18px;
}
.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #468847;
}
.alert-danger,
.alert-error {
  background-color: #f2dede;
  border-color: #eed3d7;
  color: #b94a48;
}
.alert-info {
  background-color: #d9edf7;
  border-color: #bce8f1;
  color: #3a87ad;
}
.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.alert-block > p,
.alert-block > ul {
  margin-bottom: 0;
}
.alert-block p + p {
  margin-top: 5px;
}


/* Pagination from Bootstrap */

.pagination {
  height: 40px;
  margin: 20px 0;
}

.pagination ul {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  margin-left: 0;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  *zoom: 1;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pagination ul > li {
  display: inline;
  margin-left: 0;
}

.pagination ul > li > a,
.pagination ul > li > span {
  float: left;
  padding: 0 14px;
  line-height: 38px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}

.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: #f5f5f5;
}

.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #999999;
  cursor: default;
}

.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
  color: #999999;
  cursor: default;
  background-color: transparent;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
     -moz-border-radius: 3px 0 0 3px;
          border-radius: 3px 0 0 3px;
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  -webkit-border-radius: 0 3px 3px 0;
     -moz-border-radius: 0 3px 3px 0;
          border-radius: 0 3px 3px 0;
}

.pagination-centered {
  text-align: center;
}

.pagination-right {
  text-align: right;
}


.pagination li.current {
    background-color: #F5F5F5;
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    color: #999999;
    float: left;
    line-height: 38px;
    padding: 0 14px;
    text-decoration: none;
    margin-left: 0;
}

/* segment use cases */
.usecase-container h3 {font-family: 'Open Sans',arial,sans-serif; font-size: 18px; font-weight: normal; margin-top: 0; margin-bottom: 5px;}
.usecase-container .headline-special {height: 50px;}
.usecase-container ul {
	list-style-type: none;
	padding: 0px;
	margin: 0 0 10px;
}
.usecase-container ul li {
	font-size: 1.3em;
	list-style-image: url('../../img/icons16/tick.png');
	background-repeat: no-repeat;
	background-position: 2px 5px;
	padding-left: 5px;
	line-height: 34px;
}
.usecase-form .formular-line {margin: 0}
.usecase-form .formular-line .input label {text-align: left; width: 85px; line-height: 16px;}
.usecase-form .formular-line .input input {height: 16px;}
.usecase-form .submit input, .usecase-form .submit .input {margin-left: 0; width: 324px;}
.usecase-form .small-text {line-height: 16px; font-size: 0.9em;}