/* Reset-Stylesheet (http://meyerweb.com/eric/tools/css/reset/) */

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}/* Icons und die Gestaltung des Texts daneben */

.icon {
	width: 48px;
	height: 48px;
	background-image: url(../img/icons.png);
	float:left;
}

.icon_with_text .icon { 
	margin-right: 20px;
	margin-top:10px; 
}
.icon_with_text { margin-bottom: 40px; }
.icon_with_text_2_lines .spacer_line { height: 10px;}	

.icon_coffee {}
.icon_clipboard{background-position:-48px 0px;}
.icon_pdf{background-position:-96px 0px;}
.icon_wallet{background-position:-144px 0px;} 
.icon_letter {background-position:0px -48px;}
.icon_adress{background-position:-48px -48px;}
.icon_save{background-position:-96px -48px;}
.icon_time{background-position:-144px -48px;} 
.icon_card{background-position:-0px -96px;} 
.icon_account{background-position:-48px -96px;} 
.icon_design{background-position:-96px -96px;} 
.icon_social{background-position:-144px -96px;} 
.icon_1{background-position:-0px -144px;} 
.icon_2{background-position:-48px -144px;} 
.icon_3{background-position:-96px -144px;} 
.icon_post{background-position:-144px -144px;} 

a.icon_button {
	display: block; 
	float: left;
	background-color: #abdaea;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #2c84a2 solid;
	padding: 2px 5px;
	padding-right: 10px;
	font-size: 14px; 
	margin-right: 10px;
	margin-bottom: 5px;
	text-decoration: none;
	line-height: 22px;
	padding-left: 5px;
	
}

input.icon_button {
	display: block; 
	float: left;
	background-color: #abdaea;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #2c84a2 solid;
	padding: 2px 5px;
	padding-right: 10px;
	font-size: 14px; 
	margin-right: 10px;
	margin-bottom: 5px;
	text-decoration: none;
	line-height: 22px;
	padding-left: 5px;
	cursor: pointer;
	
}

.icon_button_spacer {
	background-image: url(../img/icon_button.png);
	background-position-y:0px;
	width: 24px;
	height: 24px;
	float: left;
	margin-right: 10px;
}
a.icon_button:hover { background-color: #dcf2f9; }
input.icon_button:hover { background-color: #dcf2f9; }
a.icon_button:hover .icon_button_spacer { background-position-y:-24px; }

.icon_button_template .icon_button_spacer { background-position-x: 0px; }
.icon_button_textblock .icon_button_spacer { background-position-x: -24px; }

/* Ein orangener Button mit (fast nur) CSS3 */

input.login_submit, input.register_submit, .orange_button {
	border: none; 
	background: #222 url(/img/button_overlay.png) repeat-x; 
	display: inline-block; 
	padding: 3px 8px 3px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	background-color: #ff5c00;
	font-weight: bold;
	font-size: 0.9em;
	font-family: Arial;
}

/* Hover-Status */
input.login_submit:hover, input.register_submit:hover, .orange_button:hover { 
	background-color: #d45500; 
}/* Die Definition der Standartelemente einer Webseite */

body, html {
	background: #3fb3da;
	font-family: 'Nobile', arial, serif; /* Schriftart wird via CSS3 @font-face eingebunden */
	line-height: 1.3em;
	height: 100%;
	color: #333333;
}

a {
	color: #333333;
}

textarea, input, select {
	font-family: 'Molengo', arial, serif; 
	font-size: 14px;
	border: #c9c9c9 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	
}

hr {
	margin: 25px 0px;
	border-top: 1px solid #c9c9c9;
}

.clear_both {
	clear: both;
}

/* Wrapper */
#wrapper {
	width: 950px; 
	margin: 0px auto;
	background: url(/img/logo.png) no-repeat ;
}

/* Header */
#header {
	height: 125px;
}

#logo {
	display: block;
	width: 280px;
	height: 120px;
	float:left;
}

#logo_text {
	color: #ffffff;
	text-shadow: 0px 1px 1px #144e61;
	margin-left: 300px;
	padding-top: 20px;	
	font-size: 16px;
	line-height: 1.5em;
}

#login, #logout {
	float:right;
	display: block;
	background: #ffffff;
	
	border-bottom-right-radius	: 7px;
	-moz-border-radius-bottomright	: 7px;
	-webkit-border-bottom-right-radius: 7px;
	
	border-bottom-left-radius	: 7px;
	-moz-border-radius-bottomleft	: 7px;
	-webkit-border-bottom-left-radius: 7px;
	
	
	padding: 0px 10px 5px 10px;
	position: relative;
	top: 0px;
	text-decoration: none;
	border: 1px #2c84a2 solid;
	border-top: none;
}

#login:hover, #logout:hover {
	padding-top: 10px;	
}



#navigation li{
	float:right;
	margin-left: 10px;
	top: 200px;
}

#navigation {
	float:right;
	padding-top: 10px;
	padding-right: 5px;
	font-size: 14px;

}

#navigation a {
	color: #ffffff;
	text-shadow: 0px 1px 1px #144e61;
	text-decoration: none;
}

/* Footer */
#footer {
	color: #ffffff;
	text-shadow: 0px 1px 1px #144e61;
	font-size: 12px;
}

#footer a{
	color: #ffffff;
}
/* Die Haupt-Inhalt-Box */
#content {
	background: #ffffff;
	
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #2c84a2 solid;
	
	padding: 20px 20px;
	font-size: 13px; 
}

/* Standartklasse für grauen Text */
.gray {	color: #7a7a7a; }

/* Fieldset stylen */
fieldset {
	background: #ffffff;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #2c84a2 solid;
	padding: 10px 10px;
	font-size: 14px; 
	margin: 10px 0px;
}

legend {
	font-size: 1.1em;
	padding: 0px 5px;
}

/* Design der Überschriften wird geregelt */
h1, h2, h3 {
	font-family: 'Molengo', arial, serif; 
}

h1 {
	margin: 30px 0 30px 0;
	margin-top: 15px;
	font-size: 1.8em;
	font-weight: normal;
}

h2 {
	margin: 0px 0 30px 0;
	font-size: 1.3em;
	font-weight: normal;
}

h3 {
	margin: 20px 0 10px 0;
	font-size: 1em;
}

/* universeller Clear-Left */
.clear_left {
	clear: left;
	height: 0px;
}

/* Absatz */
p {
	margin-bottom: 10px;
}

/* Für 2-spaltige Inhalte */
.half_left {
	width: 425px;
	float: left;
}

.half_right {
	width: 425px;
	float:left;
	margin-left: 50px;
}

.half_clear {
	clear: left;
	height: 0;
}

/* nummerierte Listen */
.numbered_list {
	list-style-type: decimal;
	list-style-position: inside;
	line-height: 1.7em;
}

/* horizontaler Abstand */
.hspace10 {	height: 10px; }
.hspace20 {	height: 20px; }

/* Startseite */


#button_start {
	font-size: 1.3em;
	float: right;
	margin-top: 10px;
	margin-bottom: 30px;
}

#index_info_box {
	clear: both;
	border: 
	margin-top: 20px;
	
	background: #bbedfe;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #2c84a2 solid;
	padding: 10px 10px;
}

#index_info_box p{
	margin: 10px 0px;
}
#index_info_box p strong{
	color: #ea650d;
	font-weight: normal;
}
#index_info_box_first {
	margin-top: 20px;
}
#letter_small {
	float: left;
}
.price_tag {
	margin-top: 10px;
	color: #ea650d;
}
.price_tag .price {
	font-size: 2em;
	float: left;
	font-weight: bold;
	line-height: 0.9em;
	margin-right: 4px;
}
.price_tag .info {
	margin-top: 4px;
	font-size: 0.8em;
	line-height: 1.1em;
	
}

/* FAQ */
.faq_list li {
	margin-bottom: 20px; 
}
 
/* Profil - Saved */
.letter_list li {
	display: block;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #cccccc solid;
	
	padding: 2px;
	margin: 5px 0px;
}

.letter_list_line {
	padding-left: 10px;
	width: 350px;
	height: 1.5em;
	overflow: hidden;
}

.account_error {
	color: red;
}

.account_success {
	color: green;
}

/* "Öffentlichen Link einrichten" */

.publiclink_title {
	width: 490px;
}
.publiclink_desc {
	width: 490px;
	height: 100px;
}

/* Brief-Preview */
.link_preview {
	border: #c9c9c9 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	margin: 5px 0px;
	padding: 2px;
	text-align: justify;
}

.link_preview strong {
	margin-bottom: 5px;	
	display: block;
}

/* Musterbriefe */
.rounded_grey_border {
	border: #c9c9c9 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	margin: 5px 0px;
	padding: 2px;
	text-align: justify;
}

/* Postbrief */

.numbered_list_big {
	line-height: 1.7em;
}

.numbered_list_big li {
	clear: left;
	margin-bottom: 20px;
}

.price_tag_headline {
	float:right;
}

 /* Linke und rechte Spalte im Designer definieren */
.designer_left {
	width: 320px;
	float:left;
	margin-right: 60px;
}
.designer_right {
	width: 500px;
	float:left;
	padding-top: 5px;
}
.designer_clear {
	clear: left;	
}

/* Die Brief-Voransicht */
.letter_preview_297 {
	width: 297px;
	height: 420px;
	padding: 10px;
	background: url(../img/letter_shadow.gif);
}

.letter_preview_button {
	margin-left: 10px;
}

/* Die Weiter/Zurück-Buttons */
.button_next {
	font-size: 1.3em;
	margin-top: 40px;
	float: right;
	cursor:pointer;
}
.button_prev {
	font-size: 1.3em;
	margin-top: 40px;
	float: left;
	cursor:pointer;
}

/* Eine Zeile der Formulare mit Label, Input und Tooltip*/
.designer_form_row {
	position: relative;
	sline-height: 30px;
	height: 30px;
	text-decoration: none;
}

.designer_form_row label, .designer_form_row .label {
	display: block;
	width: 150px;
	float: left;
	padding-right: 10px;
}

.designer_form_row input, .designer_form_row select  {
	width: 150px;	
	text-align: left;
}

.designer_like_input {
	width: 150px;
	margin-left:0px;
	padding-left: 0px;
	float: left;
}

.designer_form_row_tall {
	height: 100px;
}

.designer_form_row_tall textarea {
	width: 150px;	
	height: 90px;
	text-align: left;	
}

.designer_form_tooltip {
	position: absolute;
	top: 0px;
	left: 320px;
	width: 205px;
	background: #d1e4fb;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border: 1px #2c84a2 solid;
	padding: 5px;
	visibility: hidden;
	line-height: 1.3em;
	z-index:100;
}

.designer_form_row:hover .designer_form_tooltip,.designer_form_row.hover .designer_form_tooltip {
	visibility: visible;
}

/* Textareas mit voller Breite */
textarea.full_width {
	width: 305px;
}

/* Design 1 */
/* Die kleinen Thumbnails für die Designs */
.letter_preview_150 {
	position: relative;
	display: block;
	width: 150px;
	height: 208px;
	margin-right: 20px;
	float:left; 
	text-decoration: none;
}

.letter_preview_150 img {
	width: 140px;
	height: 198px;
	padding: 5px;
	background: url(../img/letter_shadow_small.png);
	
}

.design_choose_inner {
	width: 550px;
	height: auto;
	
}
.design_choose {
	height: auto;
	width: auto;
	overflow:visible;
}

.design_choose:hover {
	overflow-x:visible;
	overflow-y:visible;
	overflow:visible;
}

.letter_preview_150_active img {
	background-position: -150px 0px;
}

.letter_preview_150 .letter_preview_hover {
	position: absolute; 
	top: 155px; 
	height: 48px; 
	left: 5px;
	background: url(../img/opacity_black_60.png);
	color: #ffffff;
	width: 140px;
	visibility: hidden;
}

.letter_preview_150 .letter_preview_hover .inner {
	padding: 3px;
}

.design_choose a.use_hover:hover .letter_preview_hover, 
.letter_preview_150_active .letter_preview_hover { visibility: visible; }
.letter_preview_clear {
	clear: left;
	height: 20px;
}



input.refresh_button {
	padding-left: 38px;
	background-image: url(/img/icon_refresh.png); 
	background-repeat: no-repeat;
	background-position-x:10px;
}

input.refresh_button:hover {
	background-position-y:-26px;
}


/* Designer 1 */
#logo_preview {
	border: 1px solid #333333;
}

/* Designer 3*/
#designer3_swap {
	font-size: 12px;
	margin: 15px 0px;
	display: block;
}

/* Designer 4 */
#betreff, #text, #ortdatum {
	display: block;
	width: 500px;
	margin-bottom: 10px;
}

#betreff {
	margin-bottom: 20px;
}
#text {
	height: 400px;
	clear: left;
}

#text_label, #betreff_label, ortdatun_label {
	margin-top: 20px;
	clear: left;
	display: block;
}

#adressbuch_content {
	height: 300px;
	overflow-y: auto;
	margin-top: 10px;
}
/*In dieser Datei wird festgelegt, wie das Design des Adressbuchs (für die registrierten User) 
 * aussehen soll (bspw. Abstände zum Rahmen, Anzeige in Blockform,...) */

/* Zeile im Adressbuch */
.addressbuch_line{
	margin-bottom: 5px;
}

/* Eintrag im Adressbuch */

.adressbuch_eintrag_form {
	margin-top: 10px;
	display: block;
}

/* Link zur Löschbestätigung */

a.delete_confirm { 
	color: #ffaaaa;
}

/* Link zur Adressverwendung */

a.use_adress {
	color: green;
}

/*
    ColorBox Core Style
    The following rules are the styles that are consistant between themes.
    Avoid changing this area to maintain compatability with future versions of ColorBox.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

/* 
    Example user style
    The following rules are ordered and tabbed in a way that represents the
    order/nesting of the generated HTML, so that the structure easier to understand.
*/
#cboxOverlay{background:url(/img/colorbox/overlay.png) 0 0 repeat;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(/img/colorbox/controls.png) -100px 0 no-repeat;}
    #cboxTopRight{width:21px; height:21px; background:url(/img/colorbox/controls.png) -129px 0 no-repeat;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/img/colorbox/controls.png) -100px -29px no-repeat;}
    #cboxBottomRight{width:21px; height:21px; background:url(/img/colorbox/controls.png) -129px -29px no-repeat;}
    #cboxMiddleLeft{width:21px; background:url(/img/colorbox/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/img/colorbox/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/img/colorbox/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/img/colorbox/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0px; background:url(/img/colorbox/controls.png) -75px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/img/colorbox/controls.png) -50px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(/img/colorbox/loading_background.png) center center no-repeat;}
        #cboxLoadingGraphic{background:url(/img/colorbox/loading.gif) center center no-repeat;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/img/colorbox/controls.png) -25px 0px no-repeat; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
    The following fixes png-transparency for IE6.  
    It is also necessary for png-transparency in IE7 & IE8 to avoid 'black halos' with the fade transition
    
    Since this method does not support CSS background-positioning, it is incompatible with CSS sprites.
    Colorbox preloads navigation hover classes to account for this.
    
    !! Important Note: AlphaImageLoader src paths are relative to the HTML document,
    while regular CSS background /img/colorbox are relative to the CSS document.
*/
.cboxIE #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderTopLeft.png, sizingMethod='scale');}
.cboxIE #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderTopCenter.png, sizingMethod='scale');}
.cboxIE #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderTopRight.png, sizingMethod='scale');}
.cboxIE #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderBottomLeft.png, sizingMethod='scale');}
.cboxIE #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderBottomCenter.png, sizingMethod='scale');}
.cboxIE #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderBottomRight.png, sizingMethod='scale');}
.cboxIE #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderMiddleLeft.png, sizingMethod='scale');}
.cboxIE #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/colorbox/internet_explorer/borderMiddleRight.png, sizingMethod='scale');}