﻿/* Kunde: www.annemarie-carpendale.de */
/* Webdesign: www.tie-media.de */


#main-container{ background-color:#fff; 
}


.fadehover {
	position: relative;
	height: 100px;
	}

.fadehover90 {
	position: relative;
	height: 90px;
	}

.fadehover130 {
	position: relative;
	height: 130px;
	}

 
img.vorher {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
        }
 
img.nachher {
	position: absolute;
	left: 0;
	top: 0;
	}

.mb10 {
padding-bottom: 10px;
}

.text{
font-family: 'Droid Sans', sans-serif;
font-size: 13px;
line-height: 26px;
color: #121212;
padding: 10px 0px;
} 

.hgtext span {
	background-color: #aaaaaa;	
	padding: 10px;
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 1px;
}

.hgtextpink span {
	background-color:#FF1493;	
	padding: 10px;
	color: #ffffff;
	font-size: 16px;
	letter-spacing: 1px;
}



/*
.scrollup{
			width:40px;
			height:40px;			
			text-indent:-9999px;
			opacity:0.3;
			position:fixed;
			bottom:30px;
			right:100px;
			display:none;			
			background: url('../images/icon_top.png') no-repeat;
		}
*/

*/

.imptext{
color: #ffffff; 
font-family: 'Droid Sans', sans-serif;
font-size: 12px;
line-height: 20px;
}

.goldhell {color: #B7985E;}
.golddunkel {color:#855B27;}
.lichtgrau {color:#C4CACA;}
.mittelgrau {color:#9AA0A7;}
.tuerkis {color:#016D79;}
.helltuerkis {color:#a6d3d8;}
.pink {color:#FF1493;}

a:{outline-width:0px;}

.hbs{
font-size: 13px; 
font-weight: bold;
color: #eee;
}

.f14{
font-size: 14px; 
font-weight: bold;
}


#main-nav{ position:fixed; top:5px; z-index:9999;}
#main-nav ul { margin-left:-1px}
#main-nav ul li{float:left; margin-left:1px;}
#main-nav ul li a{ display:block; outline: none; height:25px; text-decoration:none;  color:#ffffff; font-size:30px; text-align: center; font-family: 'GothamCondensedMedium'; font-weight:400;  padding:10px 24px 10px 15px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;   }
#main-nav ul li a em{ display:block; font-size:11px; font-weight:normal;  margin-top:0px; outline: none;}

#main-nav ul li a#one{}
#main-nav ul li a#one:hover, #main-nav ul li a#one.selected{color: #C4CACA;}
#main-nav ul li a#two{}
#main-nav ul li a#two:hover, #main-nav ul li a#two.selected{color: #C4CACA;}
#main-nav ul li a#three{}
#main-nav ul li a#three:hover, #main-nav ul li a#three.selected{color: #C4CACA;}
#main-nav ul li a#tfour{}
#main-nav ul li a#four:hover, #main-nav ul li a#four.selected{color: #C4CACA;}
#main-nav ul li a#five{}
#main-nav ul li a#five:hover, #main-nav ul li a#five.selected{color: #C4CACA;}
#main-nav ul li a#six{}
#main-nav ul li a#six:hover, #main-nav ul li a#six.selected{color: #C4CACA;}
#main-nav ul li a#seven{}
#main-nav ul li a#seven:hover, #main-nav ul li a#seven.selected{color: #C4CACA;}
#main-nav ul li a#eight{}
#main-nav ul li a#eight:hover, #main-nav ul li a#eight.selected{color: #C4CACA;}
#main-nav ul li a#tnine{}
#main-nav ul li a#nine:hover, #main-nav ul li a#nine.selected{color: #C4CACA;}




article{ background-image:url('../images/85schwarz.png'); 
background-repeat:repeat;
/*opacity: 0.9;
-moz-opacity: 0.9;
filter: Alpha(opacity=90);*/
border:0px solid #fff;
-webkit-border-radius: 6px; 
-moz-border-radius: 6px; 
-o-border-radius: 6px; 
border-radius: 6px; 
/*
box-shadow: 0px 1px 3px 1px rgba(0,0,0,.5); 
-webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.5); 
-moz-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.5); 
-o-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.5); 
*/
}

a.trigger{display:none;} /* #Menu button responsive */
#slidecaption { height:80px; padding-top:500px; }
#slidecaption h3 { color:#FF1493; letter-spacing:2px;}
#slidecaption h3 {font-size:82px; display: inline; padding:0 10px; font-family: 'Parisienne', cursive; }
#slidecaption span{ color: #ffffff; font-size:13px; display: inline-block; margin-left: 110px; margin-top:0px; padding: 0px 5px; font-family: 'Droid Sans', sans-serif; background-image:url('../images/85schwarz.png'); background-repeat:repeat; -webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
-o-border-radius: 4px; 
border-radius: 4px; 
}


header{background-color: #016D79; height:50px; width:100%;position:fixed; left:0; top:0; z-index:999; padding-top:0px; 
border-bottom:0px solid #cccccc;
-webkit-border-radius: 0px; 
-moz-border-radius: 0px; 
-o-border-radius: 0px; 
border-radius: 0px; 
box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
-webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
-moz-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
-o-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
}


#logo a{display:none;}
.ie7 #logo a{display:none;}
#logo a span {color:#fff}
#top-nav ul{ float:right; font-size:11px;  font-weight:600; margin-top:10px; height:12px; margin-right:-10px}
#top-nav ul a{ color:#7d7d7d; text-decoration:none;}
#top-nav ul a:hover{ color:#fff;}
#top-nav ul li{ background:url(../img/menu_footer_divider.png) left center no-repeat; float:left; padding-left:10px; margin-right:10px }
#top-nav ul li:first-child{ background:none;}

footer{ margin: 0px 20px 20px 5px; border-top: 0px solid #fff; padding-top: 0px; font-size:13px; padding-bottom:30px; font-family: 'Oswald', sans-serif; color: #222222;}
ul#nav-footer li{ background:url(../img/menu_footer_divider.png) left center no-repeat; float:left; margin-right:10px; padding-left:10px;}
ul#nav-footer li:first-child{ background:none; padding-left:0;}
.copy{ text-align:right;}

.poiret{
font-family: 'Poiret One', cursive;
font-size:16px; 
}


h1{
font-family: 'Poiret One', cursive;
font-size:64px; 
color: #a4a0a0;
/*text-shadow: 0  2px 2px rgba(000,000,000,0.7);*/
}


/*
h1{ font-family: 'GothamCondensedMedium'; 
color:#fff; 
font-size:34px; 
background:url(../img/lichtgrau50.png) repeat; 
display:inline-block; 
padding:15px 20px 15px 65px; 
float:right; 
margin: 0 15px 10px 0px;
-moz-border-radius: 2px; 
-webkit-border-radius: 2px; 
border-radius: 2px;

box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
-webkit-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
-moz-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
-o-box-shadow: 0px 1px 3px 1px rgba(0,0,0,.2); 
*/
}






#home #slidecaption { padding-top:0;}

ul.extra-links { margin-top:20px; margin-left:10px;}
.extra-links li { float:left; margin:0 20px 20px 0;  line-height:27px; }
.extra-links li a { height:27px; display:block; text-decoration:none; }
.extra-links li a.time { background: url(../img/icon-4-small.png) no-repeat left center;  padding-left:35px; }
.extra-links li a.gallery { background: url(../img/gallery.png) no-repeat left center; padding-left:40px;  }
.extra-links li a.join { background:  url(../img/icon-3-small.png) no-repeat left center; padding-left:33px;  }

#content article h3 em{ font-size:13px; font-style:italic; padding: 0 2px;}

#content article h3{
color:#fff; 
font-size: 13px; 
line-height: 22px;
font-family: 'Oswald', sans-serif;
}

#about-content article.numbers a, #join-content article.plan a{ font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; }

.number { color:#fff; font-weight:700; font-size:46px; text-align:center; height:40px; background:url(../img/bg-number.png) no-repeat center top; padding-top:28px; margin-bottom:20px;}
#about-content article.numbers{ text-align:center; }
#about-content article.numbers h2 em{ margin-top:5px; font-size:16px; color:#ccc;}

#highlight  h2 { font-size:36px; color:#000;}
#highlight  p { font-size:20px;}
#highlight{ background:#ffcc00 url(../img/option.png) no-repeat center center;}
#highlight .eight {text-align:center; padding:50px 0 25px 0;  color:#111; font-family: 'GothamCondensedMedium'; text-shadow: 0 1px 0 rgba(255,255,255,0.9); }

.msg { background:#016D79 url(../images/edelstahlmacro.jpg) no-repeat right bottom; color:#000; font-size:18px; line-height:24px; height:550px;}
.msg h2 {font-family: 'GothamCondensedMedium'; font-size:34px; color:#fff; margin-bottom:30px; line-height:40px;}

.msg2 h2 {font-family: 'GothamCondensedMedium'; font-size:34px; color:#fff; margin-bottom:30px; line-height:40px;}

.badge{ text-align:center; margin-top:50px;}
.plan {background:#000 url(../img/pattern.png) repeat}

.plan {background:#000 url(../img/pattern.png) repeat; border-top:3px solid #ffcc00;}
.plan h2{ font-size:28px; color:#ffcc00; font-weight:500; }
.plan h2 em{ font-size:18px; color:#fff; display:block; margin-top:7px}

.plan-stick { margin-bottom:15px;}

.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,.6); z-index: 100; display: none; top: 0; left: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  filter: alpha(opacity=60);}
.reveal-modal {visibility: hidden; top: 160px;  left: 50%; width: 820px; margin-left: -410px; background: #ededed url(../img/pattern_2.jpg) repeat; position: absolute;z-index: 101;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4);}
.reveal-modal label { color:#fff;}
.reveal-modal hr{ border:solid #dddddd; border-width:1px 0 0; clear:both; height:0; margin:30px 0 30px;}
.reveal-modal .close-reveal-modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa;text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold;cursor: pointer;} 


.msg-modal { background:#ffcc00 url(../img/bg-modal.png) no-repeat right bottom; color:#000; font-size:18px; line-height:24px; -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; height:390px; text-shadow: 0 -1px 0 rgba(255,255,255,0.9); }
.msg-modal h2 { font-size:24px; margin-bottom:15px; color:#000; font-weight:600}
#message-newsletter, #message-join, #message-contact { margin: 20px 0; padding: 0;}

ul.list_3, ul.list_4, ul.list_5, ul.list_6 { margin-left:10px; margin-bottom:20px;}
ul.list_3 li{background:url(../img/tick_1.png) no-repeat left 3px;line-height:18px;padding-left:20px;}
ul.list_4 li{background:url(../img/arrow_2.png) no-repeat 3px 5px;line-height:18px;padding-left:20px;}
ul.list_5 li{background:url(../img/arrow_3.png) no-repeat 5px 7px;line-height:18px;padding-left:20px;}
ul.list_6 li{background:url(../img/arrow_4.png) no-repeat 4px 6px;line-height:18px;padding-left:20px;}

.line{background: url(../img/line.png) repeat-y 20px top;}
.wrapper{ margin:25px;}
.wrapper.extra{ margin:60px;}
.map_canvas{height:750px;width:100%; }
.add-top-news{ margin-top:50px;}
#shadow{background:url(../img/shadow_0.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}

ul.timetable { margin-bottom:20px;}
ul.timetable li {display: inline-block;border-bottom: 1px dotted #222;padding-bottom:5px;width:100%;}
ul.timetable li span {float:left; width:40%;color:#a0cfe2;}
ul.timetable li em {float:left; font-style:normal; width:60%; text-align:right;}

ul.bars { margin-bottom:20px;}
.bars li {overflow:hidden; margin:0; padding:0;width:100%}
ul.bars li span {float:left; width:40%;margin:0; padding:0; color:#a0cfe2; font-weight:600; }
ul.bars  li em {float:left;width:60%; height:9px; background:#333; margin-top:3px;text-indent:-9999px; }

ul.bars  li em span {background: #ff8a03 url(../img/bar.png) repeat-x  left -3px;  height:9px; }
ul.bars  li span.full {width:100%;}
ul.bars  li em span.high {width:75%;}
ul.bars  li em span.medium {width:50%;}
ul.bars  li em span.low {width:25%;}

.pic-trainer {float:right; margin: 0 0 5px 5px; border:2px solid #333;}
.magnify{ background:url(../img/zoom_1.png) no-repeat 55% 52%; display:none; height:92%; left:0; position:absolute; top:0; width:100%; z-index:999;}
.pictures div{ position:relative}


/* #Tablet (Portrait) Note: Design for a width of 768px
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	
#home-nav ul li a{ display:block; height:32px; width: 182px;  text-decoration:none;  color:#ffffff; font-size:24px; font-weight:500; text-transform:lowercase; padding:25px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;  }
#home-nav ul li a em{ display:block; font-size:14px; font-weight:normal;  margin-top:4px; }

a.trigger{position: fixed;text-decoration: none;top: 15px; right: 10px;background: url(../img/trigger.png) no-repeat;display: block;z-index:1300; width:20px; height:20px;}
a.active.trigger {background: url(../img/trigger-close.png) no-repeat;}

#main-nav{display:none;  position:relative; top:60px;position:fixed;}
#main-nav ul{ margin-top:0;  display:block;}
#main-nav ul li{margin-bottom:1px;}
#main-nav ul li a{ display:block; height:25px; width: 235px;  text-decoration:none;  color:#ffffff; font-size:18px; font-weight:500; text-transform:lowercase; padding:15px 10px  20px 10px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;   }

#slidecaption { height:80px; padding-top:400px; }
#slidecaption span{ color: #fff; font-size:13px; display: inline-block; margin-left: 110px; margin-top:0px; font-family: 'Droid Sans', sans-serif;}



.reveal-modal {visibility: hidden; top: 100px;  left: 50%; width: 660px; margin-left: -330px; }
#newsletter-modal .wrapper.extra{ margin:30px;}

#highlight  h2 { font-size:30px; }
#highlight  p { font-size:16px;}

}
/*  #Mobile (Portrait) Design for a width of 320px 
================================================== */

@media only screen and (max-width: 767px) {
	
.wrapper{ margin:15px;}

header{background: url(../img/header_bg_mobile.png) repeat-x 0 0; height:44px; width:100%;position:relative; left:0; top:0; z-index:999; padding-top:15px}
#logo a{text-decoration:none; color:#fff; font-size:24px; padding-top:15px;  font-family: 'GothamCondensedMedium';  text-shadow: 0  2px 2px rgba(000,000,000,0.9); }		

a.trigger{position: absolute;text-decoration: none;top: 0px; right: 0;background: url(../img/trigger.png) no-repeat;display: block;z-index:1300; width:20px; height:20px;}
a.active.trigger {background:#18181a  url(../img/minus.png) 85% 55% no-repeat;}

#main-nav{display:none; background: url(../img/bg-black-80.png) repeat; position:relative; top:0px; margin-top:12px;  }
#main-nav ul{ margin-top:0; position:relative; display:block;}
#main-nav ul li{float:none; margin:0; border-bottom:1px solid #fff; margin-left:1px;  }
#main-nav ul li a{ display:block; height:25px; width: 280px;  text-decoration:none;  color:#ffffff; font-size:18px; font-weight:500; ext-transform:uppercase; padding:15px 8px  20px 8px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out; }

.container .twelve.columns#top-nav{ background:url(../img/bg-black-80.png) repeat; padding:3px 0 8px 0; width:300px}
#top-nav ul{float:right; font-size:11px;  font-weight: 600; margin-right:5px;}

#slidecaption { padding-top:220px; height:50px;}
#slidecaption h3 { font-size:34px; display: inline; padding:0 10px; font-family: 'Parisienne', cursive; }
#slidecaption span{ color: #fff; font-size:12px; display: inline-block; margin-left: 50px; margin-top:0px; font-family: 'Droid Sans', sans-serif;}

h1{ color:#ffffff; font-size:24px; background:url(../img/lichtgrau50.png) repeat; display:inline-block; padding:15px; margin-bottom:10px; text-align:right; width:270px; margin-right:0;}
h1 em { font-size:18px;}

#highlight{ background:#111111 url(../img/option_2.png) no-repeat center center; }
#highlight .eight {text-align:center; padding:30px 0 30px 10px; }

ul#nav-footer{ text-align:center; }
ul#nav-footer li{ background:none;  float:none; margin-right:0; padding-left:0;}

.reveal-modal {visibility: hidden; top: 100px;  left: 50%; width: 300px; margin-left: -150px; position: absolute;z-index: 101;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4);}
.msg-modal { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px; border-top-left-radius: 5px;border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 0px;-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; height:140px; font-size:16px; line-height:18px;}
.msg .wrapper.extra { margin:30px;}
.msg {height:500px;font-size:16px;}
#newsletter-modal .wrapper.extra{ margin:20px 0;}
.msg-modal h2 { font-size:20px; margin-bottom:10px; }

.msg h2 {font-family: 'GothamCondensedMedium'; color:#fff; font-size:34px; font-size:20px; line-height:22px; margin-bottom:20px; }

#shadow{background: url(../img/shadow-mobile0.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}
.remove-bottom { margin-bottom:20px !important;}
.map_canvas{height:300px;width:100%; }
.columns.line{ background:none }
.plan-stick { text-align:center;}
input[type=text], input[type=password], input[type=email], textarea, select{ width:230px; }
input.verify_form {width: 30px; float:left; padding:8px; }
	
}

/* #Mobile (Landscape) Design for a width of 480px
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.wrapper{ margin:15px;}

header{background: url(../img/header_bg_mobile.png) repeat-x 0 0; height:34px; width:100%;position:relative;z-index:999; top:0; left:0; display:block;}
#logo a{text-decoration:none; color:#fff; font-size:24px; padding-top:15px;  font-family: 'GothamCondensedMedium'; text-shadow: 0  2px 2px rgba(000,000,000,0.9); }

a.trigger{position: absolute;text-decoration: none;top: 5px; right: 0;background: url(../img/trigger.png) no-repeat;display: block;z-index:1300; width:20px; height:20px;}
a.active.trigger {background:#18181a  url(../img/minus.png) 85% 55% no-repeat;}

#main-nav{display:none; position:relative; top:-12px; margin-right:0;}
#main-nav ul li{float:none; margin:0; border-bottom:1px solid #fff; margin-left:1px; }
#main-nav ul li a{ display:block; height:25px; width: 400px;  text-decoration:none;  color:#ffffff; font-size:18px; font-weight:500;  padding:15px 8px  20px 8px; -webkit-transition: background-color  0.5s ease-in-out;-o-transition: background-color  0.5s ease-in-out;-moz-transition: background-color  0.5s ease-in-out;transition: background-color  0.5s ease-in-out;}

#slidecaption { padding-top:220px; height:70px;}
#slidecaption h3 {font-size:40px; display: inline; padding:0 10px; font-family: 'Parisienne', cursive; }
#slidecaption span{ color: #fff; font-size:12px; display: inline-block; margin-left: 50px; margin-top:0px; font-family: 'Droid Sans', sans-serif;}

.container .twelve.columns#top-nav{ width:200px; position:absolute; top:-10px; right:30px; background:none;}

h1{ color:#ffffff; font-size:28px; background:url(../img/lichtgrau50.png) repeat; display:inline-block; padding:15px; float:right; margin-bottom:10px; margin-right:0;}

#highlight{ background:#111111 url(../img/option_2.png) no-repeat center center; }
#highlight .eight {text-align:center; padding:30px 0 35px 0; }

.reveal-modal-bg {position: fixed; height: 100%; width: 100%; background: rgba(00,00,000,0.8); z-index: 100; display: none; top: 0; left: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  filter: alpha(opacity=60);}
.reveal-modal {visibility: hidden; top: 70px;  left: 50%; width: 420px; margin-left: -210px;position: absolute;z-index: 101;-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);-box-shadow: 0 0 10px rgba(0,0,0,.4); }
.msg-modal { -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px;-moz-border-radius-topright: 5px; border-top-left-radius: 5px;border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 0px;-moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; height:125px}
#newsletter-modal .wrapper.extra{ margin:20px 0 0 0;}
.msg {height:415px}
.msg .wrapper.extra { margin:30px;}

input[type=text], input[type=password], input[type=email], textarea, select{ width:260px;}

.columns.line{ background:none }
#shadow{background: url(../img/shadow-mobile0.png) repeat-x  left bottom; position:fixed; left:0; top:0; z-index:-100; height:100%; width:100%;}
.remove-bottom { margin-bottom:20px !important;}
#highlight .eight { margin-left:20px;}
.map_canvas{height:300px;width:100%; }
.plan-stick { text-align:center;}

input.verify_form {width: 30px; float:left; padding:8px; }

}	