/*!
 * Bootstrap v1.2.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 * Date: @DATE
 */

// CSS Reset
@import "reset.less";

// Core
@import "preboot.less";
@import "scaffolding.less";

// Styled patterns and elements
@import "type.less";
@import "forms.less";
@import "tables.less";
@import "patterns.less";

//	-----------------------------------------------
//	
//	Tiergesundheitszentrum.com
//
//	-----------------------------------------------

@rss: #F89E40;

//	Generell Settings
//	-----------------
html {
	background: none;
}

body {
//	background: url(../css/img/bg.jpg) center 0 repeat-y #e8e4e5;
	background: #e8e4e5;
	height: 100%;
	position: relative;
}

a {
	color: @red;
	font-weight: bold;
	&:hover {
		color: @green;
		text-decoration: none;
	}
	&.fb {
		color: #3B5998;
		&:hover { color: @red}
		&:focus { outline-color: none }
		.facebookLinkWrap {
			position: relative;
			width: 16px;
			height: 16px;
			padding: 0 17px 0 3px;
			margin-right: 4px;
			.facebookLink {
				position: absolute;
				top: -1px;
			}
		}
	}
	&.tw {
		color: @green;
		&:hover { color: @red}
		&:focus { outline-color: none }
		.twitterLinkWrap {
			position: relative;
			width: 16px;
			height: 16px;
			margin-right: 4px;
			padding: 0 17px 0 3px;
			.twitterLink {
				position: absolute;
				top: -1px;
			}
		}
	}
	&.rss {
		color: @rss;
		&:hover { color: @red}
		&:focus { outline-color: none }
		.rssLinkWrap {
			position: relative;
			width: 0;
			height: 16px;
			margin-right: 4px;
			padding: 0 17px 0 3px;
			overflow: hidden;
			display: block;
			float: left;
			.rssLink {
				position: absolute;
			}
		}
	}
}

h2 {
	color: @red;
	font-size: 140%;
}

li { line-height: @lineHeightStandard; }

.wrap {
	background: white;
	width: 960px;
/* 	height: 100%; */
	margin: 0 auto;
	position: relative;
}

.clearfix { margin-bottom: 0; }

//	Header
//	------

.headerWrap {
	margin-bottom: 0;
	background: url(../css/img/bg_header.jpg) 20px 0 no-repeat;
	.header {
		position: relative;
		height: 305px;
		width: 961px;
		margin-left: 21px;
		.logoLink {
			position: absolute;
			left: 0;
			top: 0;
			width : 350px;
			height: 135px;
		}
		ul#metaNavi {
			position: absolute;
			right: 20px;
			top: 15px;
			z-index: 800;
			margin: 0;
			li {
				list-style-type: none;
				float: left;
				margin: 0 0 0 10px;
				a {
					color: white;
					font-size: 90%;
					&:hover { text-decoration: underline }
					&:focus { outline-color: #12231D }
				}
			}
		}
		.headerTitle {
			position: absolute;
			left: 240px;
			top: 186px;
			font-family: oswald;
			span {
				display: block;
				text-transform: uppercase;
				font-size: 190%;
				&.cat {
					color: @red;
					margin-bottom: 25px;
				}
				&.act {
					color: @green;
					display: block;
					height: 60px;
					line-height: 29px;
					overflow: hidden;
					width: 380px;
				}
			}
		}
		.headerPic {
			position: absolute;
			right: 0;
			top: 0;
			width: 471px;
			height: 366px;
			z-index: 700;
			overflow: hidden;
			.csc-default {
				margin-top: 0;
				&.blinking { margin-top: -366px }
			}
		}
	}
}

//	Left Bar
//	--------

.left {
	// Main Navi
	#mainNavi {
		list-style-type: none;
		margin-left: 15px;
		
		//	Level 1
		//	-------
		li {
			margin-bottom: 2px;
			padding: 0;
			span {
				display: block;
				float: left;
				width: 7px;
				height: 42px;
				background: url(../css/img/mainNavi.jpg) 0 -84px repeat-x;
				margin: 0;
				padding: 0;
			}
			a {
				width: 190px;
				display: block;
		    	height: 30px;
		    	background: url(../css/img/mainNavi.jpg) 0 0 repeat-x;
		    	color: @gray;
		    	font-weight: bold;
		    	font-size: 140%;
		    	padding: 12px 0 0 15px;
		    	margin: 0;
				&:focus { outline-color: white }
		    	&:after {
					content: "";
					clear: both;
					display: block;
				}
			}
			&.active span,
			&:hover span { background: url(../css/img/mainNavi.jpg) 0 -42px repeat-x }
			&.active {
				a { 
					.naviActive;
					background: url(../css/img/mainNavi.jpg) 0 -84px repeat-x;
				}
			}
			
			//	Level 2
			//	-------
			&.active ul.sec { display: block }
			&.active ul.sec li a { .naviNormal }
			ul.sec {
				list-style-type: none;
				display: none;
				margin: 5px 0 10px 15px;
				li {
					a {
						background: none;
						font-size: 120%;
						padding: 3px 0 0 0;
						height: auto;
						&:focus { outline: white }
					}
					&:hover {
						a { .naviActive }
						ul a { .naviNormal }
					}
					&.active a { .naviActive }
					
					//	Level 3
					//	-------
					&.active ul.thi li a { .naviNormal }
					ul.thi {
		    			list-style-type: none;
		    			margin: 5px 0 5px 15px;
		    			li {
		    				a {
		    					background: none;
		    					font-size: 100%;
		    					padding: 0;
		    					height: auto;
		    					font-weight: normal;
		    				}
		    				&:hover a,
		    				&.active a { .naviActive  }
		    				&.active {
		    					list-style-type: disc;
		    					.naviActive
		    				}
		    			}
		    		}
				}
			}
		}
	}
}

//	Right Bar
//	---------

.right {
	border-top: 1px solid #eaeaea;
	border-bottom: 1px solid #eaeaea;
	padding: 25px 0 30px;
	margin-bottom: 40px;
	&.hasHeaderPic { padding-top: 0px }
	p { font-size: 100%; }
	.csc-default {
		h3 { margin-bottom: 8px }
		.divider {
			border-top: 1px solid #eaeaea;
			margin-bottom: 18px;
			hr { display: none; }
		}
		.imageWithCaption { margin-right: 20px }
		.textboxBelowLeft {
			.csc-textpic-imagewrap { margin-top: 20px; }
		}
		// Gästebuch 
		.tx-veguestbook-pi1 {
			fieldset {
				background: lighten(@gray,65%);
				border: 2px solid lighten(@gray,60%);
				legend {
					display: block;
					background: lighten(@gray,65%);
					border: 2px solid lighten(@gray,55%);
					padding: 8px 17px;
					margin-left: 120px + 15;
				}
				.tx-guestbook-field {
					textarea,
					input {
						height: auto;
						margin-left: 17px;
						width: 220px;
						&[type="submit"] {
							width: auto;
							margin-left: 120px + 17 + 17;
						}
						&#capture {
							margin-left: 120px + 17 + 17;
						}
					}
					.captcha {
						float: left;
						margin: 0 200px 5px 17px;
					}
					label {
						width: 120px + 17;
						font-weight: bold;
					}
				}
			}
			h2.tx-guestbook-header {
				color: @red;
				font-size: 140%;
				background: url(../css/img/mainNavi.jpg) 0 -8px transparent;
				width: auto;
				padding: 0px 17px;
			}
			.tx-guestbook-right {
				width: auto;
				padding: 16px;
			}
		}
		// Galerie
		.tx-chgallery-pi1 {
			.single {
				width: 220px;
				height: 147px;
				margin-right: 20px;
				&:nth-child(3n + 1){ margin-right: 0 }
				.align {
					width: 220px;
					height: 147px;
					overflow: hidden;
					a { display: block; }
				}
				span { display: none; }
			}
		}
		// Download-Boxes
		div.csc-downloadBox {
			margin: 15px 0 20px;
			padding: 18px;
			background-color: #fcfcfc;
			border: 2px solid #eee;
			span.download {
				position: relative;
				height: 16px;
				overflow: visible;
				display: block;
				padding: 5px 5px 6px 5px;
				margin-bottom: 3px;
				&:hover	{ box-shadow: 0 0 2px @green }
				&.odd	{ background: url(../css/img/mainNavi.jpg) repeat-x scroll 0 2px #e5e5e5 }
				&.even	{ background: #f4f4f4 }
				a {
					padding: 0px 3px 2px 23px;
					background: url(../css/img/pdf_icon.gif) left no-repeat;
					height: 16px;
					overflow: visible;
					display: block;
					float: left;
					font-weight: bold;
					color: @red;
				}
				.fileSize {
					display: block;
					float: right;
					padding-top: 0;
				}
				//	Speech-Bubbles
				.bubble {
					display: block;
				    font-size: 11px;
				    padding: 5px;
				    position: absolute;
				    visibility: visible;
				    z-index: 1000;
				    top: 23px;
				    left: 13px;
				    .bArrowWrap {
						position: relative;
						height: 4px;
					}
					.bArrow {
						position: absolute;
						border-bottom: 5px solid #ccc;
					    border-left: 5px solid transparent;
					    border-right: 5px solid transparent;
					    left: 50%;
					    margin-left: -7px;
					    top: 0;
					    display: block;
					    width: 0;
					}
					.bContent {
					    background-color: #fff;
					    //border-radius: 4px 4px 4px 4px;
					    border: 1px solid #ccc;
					    color: white;
					    max-width: 170px;
					    padding: 0;
					    text-align: center;
					    text-decoration: none;
					    //box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2) inset;
					    overflow: hidden;
					    .clearfix { margin: 0 }
					}
					a {
						background-image: none;
						float: left;
						padding: 3px 10px 3px 12px;
						font-size: 110%;
						font-weight: bold;
						color: @gray;
						&.download {
							padding: 3px 12px 3px 10px;
							border-left: 1px solid #ddd;
						}
						&:hover {
							background: #efefef;
							color: @red;
						}
					}
				}
			}			
		}
	}
	.theAccordion {
		display: block;
		padding: 18px;
		background-color: #fcfcfc;
		border: 2px solid #eee;
		clear: both;
		color: darken(@gray,10);
		.textboxBelowLeft {
			.csc-textpic-imagewrap	{ margin-top: 20px }
			.imageWithCaption		{ margin-right: 20px }
		}
		h3 {
			font-size: 120%;
			line-height: 100%;
			height: 18px;
			background: url(../css/img/mainNavi.jpg) repeat-x scroll 0 2px #e5e5e5;
			padding: 4px 6px 4px 0;
			margin: 0 0 7px 0;
			&.ui-state-default {
				span.ui-icon {
					display: block;
					float: left;
					width: 16px;
					height: 16px;
					margin: 0 0px 0 11px;
					background: url(../css/img/accordionDefault.png) no-repeat 0 2px transparent;
				}
			}
			&.ui-state-active {
				color: @red;
				margin-bottom: 0;
				border-bottom: 0;
				span.ui-icon {
					display: block;
					float: left;
					width: 20px;
					height: 18px;
					margin: 4px 2px 0 5px;
					background: url(../css/img/accordionActive.png) no-repeat 0 0 transparent;
				}
			}
			&:focus { outline: 1px dotted #fff }
			&:hover {
				color: @red;
				background-color: #bbb;
			}
		}
		.ui-accordion-content { padding: 10px 0 0 20px }
		// Ratgeber-Accordion
		.accordion {
			margin-bottom: 20px;
			.ratgeber {
				margin: 0 0 8px 0;
				h4 {
					font-size: 100%;
					line-height: 20px;
					a {
						color: darken(@gray,5);
						&:hover {
							color: @red;
							text-decoration: underline;
						}
					}
				}
				.text { display: none; }
			}
		}
	}
	.team {
		width: 720px;
		margin: 15px 0;
		.imageWithCaption { height: 170px }
	}
	.teamWrap {
		margin-left: -20px;
		.csc-default {
			float: left;
//			overflow: hidden;
			margin: 0 0 20px 20px;
			height: 178px;
			position: relative;
			background: url(../css/img/bg_avatar.jpg) no-repeat;
			&:hover {
				box-shadow: 0 0 6px -3px @red;
				-webkit-box-shadow: 0 0 6px -3px @red;
				-moz-box-shadow: 0 0 6px -3px @red;
				border-radius: 5px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				cursor: pointer;
			}
			.textboxNowrapLeft .csc-textpic-imagewrap {
				width: auto;
				.imageWithCaption {
					margin-right: 0;
					img { 
						display: block;
						width: @TFotoW;
						height: @TFotoH;
					}
				}
			}
			.csc-textpic-text,
			.textboxNowrapLeft .csc-textpic-text {
				margin-left: 123px;
				height: 26+6*@lineHeightStandard;
				overflow: hidden;
			}
			.textboxNowrapLeft .csc-textpic-text {
				margin-left: 0;
			}
			.tipsy {
				position: absolute;
				top: -30px;
				left: 99px;
				width: 142px;
				height: 30px;
				.text {
					background: #fff;
					box-shadow: 0 0 6px -3px @red;
					-webkit-box-shadow: 0 0 6px -3px @red;
					-moz-box-shadow: 0 0 6px -3px @red;
					-webkit-border-top-left-radius: 6px;
					-webkit-border-top-right-radius: 6px;
					-moz-border-radius-topleft: 6px;
					-moz-border-radius-topright: 6px;
					border-top-left-radius: 6px;
					border-top-right-radius: 6px;
					text-align: center;
					font-weight: bold;
					color: #99001B;
					padding: 6px 0;
				}
				.arrow {
					background: #fff;
					height: 10px;
				}
			}
		}
	}
//	Login-Boxes
	.tx-loginboxmacmade-pi1 {
		TABLE.tx-loginboxmacmade-pi1-loginTable {
			margin: 7px 0 0 0;
			TD.tx-loginboxmacmade-pi1-labelCell {
				background: lighten(@green,65%);
				color: @green;
				border: 1px solid lighten(@green,45%);
			}
		}
		input, textarea, select, .uneditable-input {
			height: auto;
			padding: 7px;
		}
	}
	.tx-thmailformplus-pi1 {
		.formRow {
			margin-bottom: 12px;
			label { margin-right: 10px; }
		}
		.captchaImg { 
			margin: 0 0 10px 140px;
			border: 2px solid #C0C0C0;
			width: 200px;
			img { display: block;}
		}
	}
//	Aktuelles
	.newsList {
		margin-left: 0;
		li {
			&.divider {
				border-top: 0;
				border-bottom: 1px solid #EAEAEA;
	    		padding-bottom: 11px;
	    		margin-bottom: 18px;
	    	}
	    	.newsListImage {
	    		width: 140px;
	    		float: left;
	    		margin-top: 5px;
	    		a {
	    			display: block;
	    			margin: 0;
	    			padding: 0;
	    			img { display: block }
	    		}
	    	}
	    	p {
	    		margin-bottom: 0;
	    		min-height: 95px;
	    	}
	    	.news-list-morelink {
	    		padding-left: 0;
	    		margin-left: 140px;
	    	}
		}
	//	Kollegen - Veranstaltungen
		&.veranstaltungen {
			li {
				padding: 15px 10px;
				border-left: 10px solid white;
				&.header {
					border-left: 10px solid @green;
					background: @green;
					&:hover {
						background: @green;
						border-left: 10px solid @green;
					}
					.newsDate {
						display: block;
						float: left;
						width: 130px;
						line-height: 110%;
						font-weight: bold;
						font-size: 125%;
						line-height: inherit;
						color: #ffffff;
						.vonDatum { float: left; }
						.bisDatum { clear: both; }
					}
					.content h2 { 
						font-size: 125%;
						line-height: 110%;
						color: #ffffff;
					}
				}
				&.divider { margin: 0; }
				&.scnd {
					background: #efefef;
					border-left: 10px solid #efefef;
					&:hover {
						background: darken(#efefef,4%);
						border-left: 10px solid @red;
					}
				}
				&:hover {
					background: darken(#ffffff,4%);
					border-left: 10px solid @red;
				}
				.newsDate {
					display: block;
					float: left;
					width: 130px;
					line-height: 100%;
					font-weight: bold;
					font-size: 110%;
					line-height: inherit;
					.vonDatum {
						float: left;
					}
					.bisDatum {
						clear: both;
					}
				}
				.content {
					float: right;
					width: 540px;
					h2 {
						font-size: 110%;
						line-height: 100%;
						a { line-height: 110%; }
					}
				}
			}
		}
	}
}


//	Startseite
//	----------
.wrap.start {
	.top {
		border-top: 1px solid #eaeaea;
		.csc-downloadBox {
			border: 0;
			padding: 0;
			object {
				outline:0;
				-moz-outline:0;
			}
		}
		.slider {
			.pics {
				height: 263px;
				.imageWithCaption {
					display: block;
					width: auto;
					float: none;
					margin-right: 0;
					img { display: block }
				}
			}
		}
		.qInfo {
			margin-top: 2px;
			position: relative;
			.headline {
				background: url(../css/img/mainNavi.jpg) repeat-x scroll 0 0 transparent;
				height: 30px;
				&:hover,
				&.active {
					cursor: pointer;
					background: url(../css/img/mainNavi.jpg) 0 -84px repeat-x;
					span {
						background: url(../css/img/mainNavi.jpg) repeat-x scroll 0 -45px transparent;
					    &.arrow {
							background: url(../css/img/qInfo.png) no-repeat scroll 0 10px transparent;
							width: 21px;
						}
						&.open {
							display:none;
						}
						&.close {
						    background: none;
						    display: inline;
						    float: none;
						}
					}
				}
				span {
					background: url(../css/img/mainNavi.jpg) repeat-x scroll 0 -84px transparent;
				    display: block;
				    float: left;
				    height: 30px;
				    width: 7px;
				    &.arrow {
						background: url(../css/img/qInfo.png) no-repeat scroll 0 -23px transparent;
						display: block;
						float: right;
						height: 26px;
						width: 15px;
						margin: 0 7px 0 0;
					}
					&.open {
					    background: none;
					    display: inline;
					    float: none;
					}
					&.close {
						display: none;
					}

				}
				h2 {
					line-height: 31px;
					margin-left: 10px;
					float: left;
				}
			}
			.content {
				border: 0;
				position: absolute;
				left: 0;
				bottom: 30px;
				z-index: 777;
				width: 699px;
				overflow: hidden;
				background: #eaeaea;
				&.active {
					border-bottom: 1px solid #919191;
					border-right: 1px solid #919191;
				}
				.qVideo {
					padding-top: 10px;
					width: 219px;
					height: 100%;
					float: right;
					background: #d3d3d3;
					#qPlayer:hover { cursor: pointer }
				}
				.info {
					width: 453px;
					float: left;
					padding: 10px 0 0 0;
					margin: 0;
					border-left: 7px solid #919191;
					&:hover {
						border-left: 7px solid @red;
						background: #d3d3d3;
						cursor: pointer;
					}
					&.bordered p {
						border-bottom: 1px solid #cfcfcf;
						padding-bottom: 10px;
						margin-bottom: 0;
					}
					h2 {
						display: block;
						float: left;
						color: @gray;
						font-size: 110%;
						line-height: 100%;
						padding: 2px 0 0 10px; 
						margin-right: 10px;
					}
					p {
						padding-left: 10px;
						a { margin-left: 6px }
					}
				}
			}
		}
	}
	.left {
		.csc-default { 
			margin: 0 0 20px 15px;
			p { margin-bottom: 5px }
		}
		// Terminanfrage
		.tButton {
			display: block;
			height: 41px;
			position: relative;
			span {
				background: url("../css/img/mainNavi.jpg") repeat-x scroll 0 -84px transparent;
				display: block;
				float: left;
				height: 42px;
				margin: 0;
				padding: 0;
				width: 7px;
				&.arrow {
					position: absolute;
					background: url("../css/img/qInfo.png") no-repeat scroll 0 -50px transparent;
					display: block;
					float: right;
					top: 3px;
					right: 7px;
					height: 28px;
					width: 15px;
				}
			}
			h2 {
				background: url("../css/img/mainNavi.jpg") repeat-x scroll 0 0 transparent;
				color: #4E4E4E;
				display: block;
				font-size: 140%;
				font-weight: bold;
				height: 30px;
				margin: 0;
				padding: 12px 0 0 15px;
				width: 190px;
				line-height: 18px;
			}
			&:hover {
				span { 
					background: url("../css/img/mainNavi.jpg") repeat-x scroll 0 -42px transparent;
					&.arrow { background: url("../css/img/qInfo.png") no-repeat scroll 0 -50px transparent }
				}
				h2 { background: url("../css/img/mainNavi.jpg") repeat-x scroll 0 -84px transparent }
			}
		}
		#terminAnfrage { display: none }
	}
	.right {
		border-top: 0;
		padding: 12px 0 30px;
		.drei {
			margin-left: 0;
			border-bottom: 1px solid #EAEAEA;
			margin-bottom: 20px;
			.csc-default.span4 {
				float: left;
				margin-left: 20px;
				&:nth-child(1) {
					margin-left: 0;
				}
				
			}
			&:after,
			&:before {
				content: "";
				display: table;
			}
		}
		.zwei {
			margin-left: -20px;
			.csc-default.span6 {
				float: left;
				margin-left: 20px;
			}
			.simpleNewsList {
				margin-left: 0;
				margin-bottom: 0;
				.simpleNewsListImage {
					width: 120px;
					float: left;
				}
				.simpleNewsListText { 
					margin-left: 120px;
					.simpleNewsListTitle { line-height: 100% }
				}
			}
			.csc-textpic-intext-left .csc-textpic-imagewrap { margin: 0 }
		}
	}
}

#terminAnfrage fieldset {
	legend {
		margin-left: 90px;
		font-size: 16px;
		background: #fff;
		padding: 0 10px;
		color: #bbb;
		font-weight: bold;
	}
	.captchaImg { padding-left: 140px }
	.formRow { margin: 4px 0; }
	input,select {margin-left: 7px; }
	label { cursor: pointer; }
}
#fancybox-inner .teamMember a.fancyTeam { display: none; }
#fancybox-inner .teamMember h3 { color: @red }
#fancybox-inner .teamMember .tipsy { opacity: 0 }



//	Hintergrund
//	-----------

.shadow {
	background: url(../css/img/bgGradiant.jpg) 2px 0 repeat-y;
	width: 28px;
	position: absolute;
	top: 0;
	&.sLeft	{ left: -28px;}
	&.sRight	{
		right: -28px;
		background-position: -28px 0;
	}
}



//	Footer
//	------

#footerWrap {
	width: 100%;
	background: url(../css/img/bg_endOfPage.jpg) no-repeat center top #E8E4E5;
	padding-bottom: 100px;
	clear: both;
	#footer {
		margin: 0 auto;
		width: 961px;
		.span12 {
			float: left;
			padding-left: 20px;
			p {
				color: white;
				font-size: 90% !important;
				margin: 4px 0 0 0;
				a {
					color: white;
					text-decoration: underline;
				}
			}
		}
		.sWrap {
			float: right;
			padding: 4px 19px 0 0;
			.socials {
				float: right;
				margin-left: 4px;
				width: 16px;
				height: 16px;
				background: url(../css/img/socials.png) no-repeat;
				&.rss { background-position: 0 0 }
				&.fb  { background-position: -19px 0 }
				&.tw  { background-position: -58px 0 }
				&.yt  { background-position: -39px 0 }
			}
		}
	}
}

#foot {
	width: 100%;
	height: 100px;
	background: #E8E4E5;
	position: absolute;
	bottom: 0;
}