/* CSS Document */

/* Allgemein */

* {
	margin: 0;
	padding: 0;
}
img {
	border: 0;
}

body {
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 12px;
	color: #333;
	background: url('../images/bg_body.png') repeat-x;
}

h1 {
	font-size: 20px;
	padding: 0 0 15px 0;
}

h2 {
	font-size: 16px;
	padding: 0 0 15px 0;
}

h3 {
	font-size: 14px;
	padding: 0 0 15px 0;
}

h4 {
	font-size: 13px;
	padding: 0 0 15px 0;
}

    h4 span { font-weight: normal; }

.breaker {
	clear: both;
	line-height: 0px;
}

/* Inhalt */

#wrapper {
	width: 740px;
	margin: 0 auto;
	padding: 20px 0 0 0;
}

/* Header */

#header {
	position: relative;
	width: 740px;
	height: 173px;
	background: #fff url('../images/sprite.png') 0px -241px no-repeat;
	margin: 0 auto;
}

#karteikarten-logo {
	position: absolute;
	left: 50px;
	top: 50px;
    width: 250px;
    height: 74px;
    background: url('../images/sprite.png') -720px -160px no-repeat;
}

    #karteikarten-logo span {
        display: none;
    }

#slogan {
	position: absolute;
	left: 320px;
	top: 105px;
	font-size: 20px;
}

/* User Navigation */
#navigation-user {
	position: absolute;
	right: 0;
	top: 15px;
	width: 300px;
	padding: 0 40px 0 0;
	text-align: left;
}

	#navigation-user a {
		color: #333;
		font-weight: bold;
	}

	#navigation-user a:hover {
		background: #FEEFDE;
	}

	#navigation-user p.cookie {
		padding: 5px 0 0 0;
	}

	#navigation-user .watchout {
		background: #3399ff;
		font-weight: bold;
		color: #fff;
		padding: 0 2px;
	}

		#navigation-user .watchout a {
			color: #fff;
		}

		#navigation-user .watchout a:hover {
			background: #3399ff;
		}

/* Input Felder */

.text-small {
	width: 96px;
	border: 1px solid #ccc;
	padding: 0;
	margin: 0;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 12px;
	line-height: 15px;
	color: #333;
	padding: 1px 2px;
}

.submit-small {
	border: none;
	background: none;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 12px;
	color: #333;
	font-weight: bold;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.text {
	width: 250px;
	line-height: 15px;
	border: 0;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 12px;
	line-height: 15px;
	border: 1px solid #ccc;
	color: #333;
	margin: 0;
	padding: 2px 2px;
}

	.text:focus {
		background: #FEEFDE;
		border: 1px solid #ccc;
	}

.submit {
	display: inline;
	border: 0;
	background: none;
	font-weight: bold;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 16px;
	height: 22px;
	line-height: 20px;
	color: #333;
	cursor: pointer;
	padding: 0 2px;
	margin: 0;
	text-decoration: none;
	text-align: center;
	white-space: pre;
	background: #FEEFDE;
	margin: 0 5px 0 0;
}

label {
	display: block;
	width: 130px;
	float: left;
	clear: left;
	font-weight: bold;
}

label.checkbox {
	width: auto;
	display: inline;
	float: none;
	clear: none;
	font-weight: normal;
}

	.small {
		color: #888;
		font-size: 11px;
	}

textarea {
	width: 528px;
	height: 100px;
	line-height: 15px;
	border: 0;
	font-family: Arial, Verdana, Sans-Serif;
	font-size: 12px;
	line-height: 15px;
	border: 1px solid #ccc;
	color: #333;
	margin: 0;
	padding: 4px 4px;
}

	textarea:focus {
		background: #FEEFDE;
	}

/* Navigation */

#navigation {
	padding: 10px 30px;
}

	#navigation li {
		display: inline;
		padding: 0 5px;
	}

		#navigation li a {
			color: #333;
			font-weight: bold;
			font-size: 14px;
		}

		#navigation li a.watchout {
			background: #3399ff;
			font-weight: bold;
			color: #fff;
			padding: 0 2px;
		}

			#navigation li a.watchout:hover {
				background: #3399ff;
			}

		#navigation li a:hover, #navigation li a.hit {
			background: #FEEFDE;
		}

/* Suchbox */

#searchbox {
	width: 709px;
	height: 208px;
	margin: 0 auto;
    margin-bottom: 22px;
	background: #fff url('../images/sprite.png') 0px -32px no-repeat;
}

#searcharrows {
	float: left;
	width: 132px;
	height: 148px;
	margin: 27px 0 0 0;
	background: url('../images/sprite.png') -716px -1px no-repeat;
}

ul#searchfields {
	margin: 38px 0 0 0;
}
	ul#searchfields li {
		width: 324px;
		height: 52px;
		margin: 0 0 26px 0;
		background: url('../images/sprite.png') -311px -415px no-repeat;
		list-style: none;
	}

input.searchfield {
	width: 295px;
	height: 32px;
	background: #fff;
	border: 0;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Lucida Grande', Arial, Verdana, Sans-Serif;
	color: #666;
	padding: 8px 0 0 5px;
	margin: 6px 0 0 12px;
}

input#searchbutton {
	display: block;
	float: left;
	text-align: center;
	margin-top: 38px;
	cursor: pointer;
}

.button-small {
	display: block;
	width: 131px;
	height: 131px;
	text-align: center;
	font-size: 20px;
	color: #C5BD99 !important;
	font-weight: bold;
	background: url('../images/sprite.png') -852px -2px no-repeat;
	margin: 0 5px;
}

	.button-small span {
		color: #333;
		line-height: 131px;
	}

.button-big {
	display: block;
	width: 310px;
	height: 91px;
	text-align: center;
	font-size: 20px;
	color: #C5BD99 !important;
	font-weight: bold;
	background: url('../images/sprite.png') 0px -415px no-repeat;
	margin: 0 5px;
}

	.button-big span {
		color: #333;
		line-height: 91px;
	}

	.button-big:hover {
		background: url('../images/sprite.png') 0px -415px no-repeat !important;
	}

/* Content */

	.content {
		width: 709px;
		min-height: 300px;
		padding: 5px 0 0 0;
		margin: auto;
		background: url('../images/content.png') repeat-y;
	}

	.content p {
		padding: 0 0 15px 0;
		line-height: 15px;
	}

	.content a {
		color: #333;
		font-weight: bold;
	}

	.content a:hover {
		background: #FEEFDE;
	}

	.content-top {
		width: 709px;
		background: url('../images/sprite.png') 0px 0px no-repeat;
		height: 15px;
		line-height: 15px;
		margin: auto;
	}

	.content-bottom {
		width: 709px;
		background: url('../images/sprite.png') 0px -16px no-repeat;
		height: 15px;
		line-height: 15px;
		margin: auto;
	}

	.box-100 {
		width: 668px;
		padding: 0 20px 20px 20px;
	}

	.box-75 {
		width: 501px;
		float: left;
	}

	.box-50 {
		width: 324px;
		float: left;
	}

	.box-25 {
		width: 147px;
		float: left;
	}

	.left {
		padding: 0 10px 20px 20px;
	}

	.right {
		padding: 0 20px 20px 10px;
	}

	.center {
		padding: 0 15px 20px 15px;
	}

	.grey {
		color: #aaa !important;
	}

	.blue {
		color: #fff !important;
		background: #3399FF;
	}

	.blue:hover {
		color: #333 !important;
	}

	.error {
		display: block;
		border: 1px solid #cc0000;
		padding: 5px !important;
		color: #cc0000;
		margin: 0 0 15px 0;
		background: #FFEAEA;
		line-height: 20px !important;
	}

	.success {
		display: block;
		border: 1px solid #006600;
		padding: 5px !important;
		color: #006600;
		margin: 0 0 15px 0;
		background: #D7FFD7;
		line-height: 20px !important;
	}

	.list {
		padding: 0 0 15px 15px;
	}
    
    .content ul {
        padding: 0 0 15px 15px;
        list-style: square;
    }

/* Footer */

#footer {
	padding: 10px 10px;
	text-align: center;
}

	#footer li {
		display: inline;
		padding: 0 5px 0 0;
	}

	#footer .hot {
		padding: 0 0 10px 0;
	}

		#footer .hot li {
			padding: 0 5px 0 0;
			color: #333;
		}

			#footer .hot li a {
				color: #333;
			}

	#footer .terms {
		font-size: 11px;
		color: #888;
	}

		#footer .terms li a {
			color: #888;
		}

/* Fächer Liste (Cloud) */

.subject-list {
	padding: 0 0 15px 0 !important;
}

	.subject-list li {
		list-style: none;
		padding: 0 0 15px 0;
	}

	.subject-list li a {
		font-size: 14px;
	}

	.subject-list li span.description {
		display: block;
		padding: 5px;
		background: #eee;
		margin: 5px 0 0 0;
		overflow: hidden;
        font-size: 11px;
        color: #999;
        line-height: 17px;
	}
    
        .subject-list li span.description a {
            font-weight: normal;
            color: #999;
            font-size: 11px;
        }

/* Lektionen Liste, Karteikarten Liste */

.description {
    overflow: hidden;
	background: #FEEFDE;
	padding: 8px;
	margin: 0 0 15px 0;
}

.lesson-list {
	padding: 0 0 15px 0 !important;
}

	.lesson-list li {
		list-style: none;
		padding: 0 0 15px 0;
	}

	.lesson-list li a {
		font-size: 14px;
	}

	.lesson-list span.description {
		display: block;
		padding: 5px;
		background: #eee;
		margin: 5px 0 0 0;
		overflow: hidden;
	}

/* Karteikarte Frontend */

.card_wrapper {

}

.card_action {
	text-align: center;
	padding: 0 10px 15px 10px;
}

	.turn {
		padding: 10px 0 0 0 !important;
	}

	.turn a {
		display: block;
		width: 200px;
		padding: 10px;
		margin: 0 auto;
		font-size: 16px;
	}

.card_navigation {
	text-align: center;
	padding: 0 0 15px 0;
}

.ad_box {
	background: #FEEFDE;
	padding: 20px 20px;
	margin: 0 0 5px 0;
	text-align: center;
}

.card_front {
	position: relative;
	background: #FEEFDE;
	text-align: center;
	font-size: 16px;
	padding: 40px 20px;
	margin: 0 0 5px 0;
	min-height: 120px;
}

	.card_front h1 {
		font-size: 16px;
		padding: 0;
		font-weight: normal;
	}

	.card_wrapper .card_front {
		min-height: 0;
	}

.card_back {
	position: relative;
	background: #FEEFDE;
	padding: 40px 20px;
	font-size: 16px;
	min-height: 120px;
	margin: 0 0 5px 0;
}

.card {
	position: relative;
	min-height: 220px;
}

	.card span.info, .card_wrapper span.info {
		position: absolute;
		display: block;
		padding: 5px 10px;
		right: 0;
		top: 0;
		font-size: 12px;
		color: #aaa;
	}

	.card p, .card_wrapper p {
		padding: 0 0 15px 0;
		line-height: 22px !important;
	}

	.card ul, .card_wrapper ul {
		padding: 0 0 10px 15px;
	}

	.card ol, .card_wrapper ol {
		padding: 0 0 10px 19px;
	}

	.card ul li, .card_wrapper ul li  {
		padding: 0 0 5px 0;
		list-style: square;
		text-align: left;
	}

	.card ol li, .card_wrapper ol li {
		padding: 0 0 5px 0;
		list-style: decimal;
	}

	.card ul ul, .card_wrapper ul ul {
		padding: 0 0 0 15px;
	}

	.card ul ul li, .card_wrapper ul ul li {
		padding: 5px 0 0 0;
		list-style: circle;
	}

/* Drucken */

#print_wrapper {
	background: #fff;
	width: 100%;
	padding: 20px 0 0 0;
}

	#print_wrapper a {
		color: #333;
	}

.print {
	width: 400px;
}

	.print .front {
		padding: 20px;
		text-align: center;
		border: 1px solid #ccc;
		font-weight: bold;
		margin: 50px 0 0 0;
	}

	.print .back {
		padding: 20px;

		border: 1px solid #ccc;
		border-top: none;
		margin: 0 0 50px 0;
	}

.ads {
	position: absolute;
	right: 15px;
	top: 80px;
	width: 468px;
	height: 60px;
}