/* Website Dr. Keller und Kollegen 
   v1.0 | 2014-12-17 |  Sandra Ruettgers / pixakt.de
*/

body {
	font-family: Verdana, sans-serif;
	font-size: 13px;
	line-height: 160%;
}

.main {
	margin: 0 auto 50px;
	width: 1010px;
}

a:link,
a:visited {
	color: #05a535;
	text-decoration: none;
}

a:hover,
a:active {
	text-decoration: underline;
}

h1#logo {
	background: url(../img/logo_kellerzahnaerzte.gif) 0 0 no-repeat;
	float: right;
	text-indent: -9999px;
	height: 154px;
	margin: 20px 0;
	width: 300px;
}

h2 {
	font-size: 16px;
	line-height: 140%;
	margin: 0 0 15px 0;
}

h3 {
	color: #05a535;
	font-size: 16px;
	line-height: 140%;
	margin: 0 0 5px 0;
}

h4 {
	font-size: 14px;
	margin: 0 0 10px 0; 
}

h4.bold {
	font-weight: bold;
}

.line {
	background: url(../img/punkte.gif) 0 0 repeat-x;
	height: 3px;
	width: 100%;
}

.navi_wrapper {
	line-height: 0;
	width: 100%;
}
ul#navi {width: 100%;}

ul#navi > li {
	float: left;
	height: 44px;
	line-height: 44px;
}

ul#navi > li > a {
	color: #000;
	display: block;
	font-size: 15px;
	margin: 0 2px;
	padding: 0 49px;
	text-decoration: none;
}

ul#navi > li > a.first {padding: 0 49px 0 20px;}
ul#navi > li > a.last {padding: 0 20px 0 49px;}

ul#navi > li > a.active, 
ul#navi > li > a:hover {color: #05a535;}

.image_wrapper {
	background: url(../img/gradient.png) 0 0 repeat-y;
	line-height: 0;
	font-size: 0;
	margin: 20px 0 30px;
	padding: 2px 0;
}

ul#menu {
	float: left;
    clear: both;
	width: 155px;
}

ul#menu li {
	margin: 0 0 16px 0;
}

ul#menu li.active {
    position: relative;
    z-index: 5;
}

ul#menu .active a {
    color: #000;
    text-decoration: none;
}

.tab,
.content {width: 471px;}

ul#menu, 
.tab, 
.content {
	float: left;
	padding: 25px 23px 25px 20px;
}

.tab .intro,
.content .intro {padding: 0 0 30px 0;}
.tab .section > img {margin: 0 0 20px 0;}

.tab p,
.content p,
.aside p {margin: 0 0 20px 0;}

.aside .section p {margin:0;}

.content .paragraph > a > img,
.tab .paragraph > a > img {
	float: left;
	margin: 0 20px 0 0;
}

.content .section {margin-bottom: 20px;}

.content .paragraph > p,
.tab .paragraph > p {
	height: 65px;
	margin: 0;
	overflow: hidden;              
}

.section span {white-space: nowrap;}

.colm {
	float: left;
	width: 210px;
}

.colm > h4 {margin: 8px 0 3px 0;}
.colm.left {margin-right: 50px;}

ul.list {margin: 0 0 20px 0;}

ul.list > li {
	list-style-type: disc;
	list-style-position: inside;
	margin: 0 0 10px 0;
}

.more {
	background: url(../img/punkte.gif) 0 11px repeat-x;
	margin: 5px 0 15px 0;
	text-align: right;
}

.more > a {
	background: #fff;
	color: #05a535; 
	padding: 0 0 0 15px;
}

.aside {float: left;}

.aside .section {
    background: url(../img/punkte_grey.gif) 0 2px;
    min-height: 194px;
    position: relative;
    padding: 20px 10px 9px 30px;
    width: 258px;
}

.aside .section:last-child {
	min-height: 100px;
}

dl {
	margin: 0 0 15px 0;
	width: 255px;
}

dl > dt {width: 75px;}
dl > dd {width: 170px;}
dl > dt, 
dl > dd {
	float: left;
}

/* FOOTER */

ul#footerNavi {
	color: #05a535;
	margin-left: 20px;
}

ul#footerNavi > li {
	display: inline-block;
	padding: 0 1px;
}

/* HELPER */

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

.nomargin {margin: 0!important;}

/* SLIDER */

a {color:white;}
.pikachoose {width: 520px; margin: 0 auto;}

/* Style the thumbnails */
.pika-thumbs { 
/*	padding: 0 16px; */
	margin: 0;
	height: 97px; 
}

.pika-thumbs li {  
	cursor: pointer;
	height:97px; 
	margin: 10px 0 0 17px; 
	padding: 0; 
	overflow: hidden;
	float: left; 
	list-style-type: none; 
	margin: 0 5px; 
	width: 144px; 
}

.pika-thumbs li .clip {
	height:100%;
	position:relative;
	overflow: hidden;
	text-align: center; 
	vertical-align: middle; 
}
	
/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage, 
.pika-textnav {width: 470px;}

.pika-stage {
	height: 316px;
	padding: 0 0 40px 0; 
	position: relative; 
	text-align:center; 
}

.pika-stage img {
	height: 316px;
	width: 470px;
}

.pika-stage .caption { 
	bottom: 50px; 
	border: 1px solid #141414; 
	color: #fafafa; 
	font-size: 11px; 
	position: absolute; 
	right: 10px;
	text-align: right; 
}
	
.pika-stage .caption p {
	line-height: 14px;
	margin: 0; 
	padding: 0; 
}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {
	position: absolute; 
	text-indent: -5000px; 
	display: block;
	z-index:3;
}

.pika-imgnav a.previous,
.pika-imgnav a.next {
	cursor:pointer;
	height: 100%; 
	top: 0; 
	width: 50px; 
}

.pika-imgnav a.previous {
	background: url(../img/galerie/prev.png) no-repeat left 45%; 
	left: 0;
}

.pika-imgnav a.next {
	background: url(../img/galerie/next.png) no-repeat right 45%; 
	right: 0;
}

.pika-imgnav a.play,
.pika-imgnav a.pause {
	display: none;
	height: 100px; 
	left:50%;
	top:0;
	width: 44px;
}

.pika-imgnav a.play {background: url(../img/galerie/play.png) no-repeat 0% 50%; }
.pika-imgnav a.pause {background: url(../img/galerie/pause.png) no-repeat 0% 50%; }

/* The previous and next textual buttons */
.pika-textnav {
	overflow: hidden; 
	margin: 10px 0 0 0;
	bottom:10px; 
	position:absolute;
}

.pika-textnav a {
	font-size: 12px; 
	text-decoration: none; 
	color: #333; 
	padding: 4px;
}

.pika-textnav a.previous,
.pika-textnav a.next {
	display: block; 
	width: auto; 
}

.pika-textnav a.previous {float: left;}
.pika-textnav a.next {float: right;}

/*for the tool tips*/
.pika-tooltip {
	background-color: rgba(0,0,0,0.7);
	border:3px solid black;
	color:white;
	font-size:12px;
	padding:3px; 
	position:absolute;
}
.pika-counter {
	background:rgba(0,0,0,0.7);
	position: absolute;
	bottom: 45px;
	left:15px;
	color:white;
	font-size:11px;
	padding:3px;
}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader { 
	background:url(../img/galerie/loading.gif) 3px 3px no-repeat #000; 
	background-color:rgba(0,0,0,0.9); 
	color:white; 
	font-size:11px; 
	padding:5px 3px; 
	position:absolute; 
	right:0px; 
	text-align:right; 
	top:15px; 
	width:60px; 
}

.jcarousel-skin-pika .jcarousel-container-horizontal { 
	overflow:hidden;
	padding: 0;
	margin: 0 0 30px 0; 
	width: 470px;
}
.jcarousel-skin-pika .jcarousel-clip-horizontal {
	height: 92px; 
	width: 144px;
}
.jcarousel-skin-pika .jcarousel-item-horizontal { margin-right: 10px;}