@CHARSET "UTF-8";

/*
Site:			www.digitale-akademie.de

Author(s):		Aline Deicke, Torsten Schrade
Created:		2010-01-20

Usage:			Main stylesheet

Sections:		01. RESET
				02. VIEWPORT
				03. GRID
				04. LAYOUT
				05. TYPOGRAPHY
				06. BASIC CONTENT
				07. SPECIAL CONTENT
				08. MOBILE
				09. PRINT
				10. FINALLY		
*/

/* ############################## RESET ############################### */

/* html5boilerplate reset + basic styles
see: html5doctor.com/html-5-reset-stylesheet/
*/

/* ELEMENT RESET */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
a,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	border: 0;	
	padding: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

ins { 
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	margin: 1em 0;
	border-top: 1px solid #ccc;	
	padding: 0;
}

input, select {
	vertical-align: middle;
}

/* ############################## VIEWPORT ############################ */

/* always force a scrollbar in non-IE */
html {
	overflow-y: scroll;
}

/* 1em = 10px - http://reeddesign.co.uk/test/points-pixels.html*/
body {
	position: relative;
	font-size: 62.5%;
	color: #222222;
	background: #FFFFFF url(../images/pat1.gif);	
}

/* ############################## GRID ################################ */

/* 960 ELASTIC - based on http://960.gs/ */

.container_12,.container_16{width:96em;margin:0 auto;}.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{position:relative;display:inline;float:left;margin:0 1em;}.container_12 .grid_3,.container_16 .grid_4{width:22em;}.container_12 .grid_6,.container_16 .grid_8{width:46em;}.container_12 .grid_9,.container_16 .grid_12{width:70em;}.container_12 .grid_12,.container_16 .grid_16{width:94em;}.alpha{margin-left:0;}.omega{margin-right:0;}.container_12 .grid_1{width:6em;}.container_12 .grid_2{width:14em;}.container_12 .grid_4{width:30em;}.container_12 .grid_5{width:38em;}.container_12 .grid_7{width:54em;}.container_12 .grid_8{width:62em;}.container_12 .grid_10{width:78em;}.container_12 .grid_11{width:86em;}.container_16 .grid_1{width:4em;}.container_16 .grid_2{width:10em;}.container_16 .grid_3{width:16em;}.container_16 .grid_5{width:28em;}.container_16 .grid_6{width:34em;}.container_16 .grid_7{width:40em;}.container_16 .grid_9{width:52em;}.container_16 .grid_10{width:58em;}.container_16 .grid_11{width:64em;}.container_16 .grid_13{width:76em;}.container_16 .grid_14{width:82em;}.container_16 .grid_15{width:88em;}.container_12 .prefix_3,.container_16 .prefix_4{padding-left:24em;}.container_12 .prefix_6,.container_16 .prefix_8{padding-left:48em;}.container_12 .prefix_9,.container_16 .prefix_12{padding-left:72em;}.container_12 .prefix_1{padding-left:8em;}.container_12 .prefix_2{padding-left:16em;}.container_12 .prefix_4{padding-left:32em;}.container_12 .prefix_5{padding-left:40em;}.container_12 .prefix_7{padding-left:56em;}.container_12 .prefix_8{padding-left:64em;}.container_12 .prefix_10{padding-left:80em;}.container_12 .prefix_11{padding-left:88em;}.container_16 .prefix_1{padding-left:6em;}.container_16 .prefix_2{padding-left:12em;}.container_16 .prefix_3{padding-left:18em;}.container_16 .prefix_5{padding-left:30em;}.container_16 .prefix_6{padding-left:36em;}.container_16 .prefix_7{padding-left:42em;}.container_16 .prefix_9{padding-left:54em;}.container_16 .prefix_10{padding-left:60em;}.container_16 .prefix_11{padding-left:66em;}.container_16 .prefix_13{padding-left:78em;}.container_16 .prefix_14{padding-left:84em;}.container_16 .prefix_15{padding-left:90em;}.container_12 .suffix_3,.container_16 .suffix_4{padding-right:24em;}.container_12 .suffix_6,.container_16 .suffix_8{padding-right:48em;}.container_12 .suffix_9,.container_16 .suffix_12{padding-right:72em;}.container_12 .suffix_1{padding-right:8em;}.container_12 .suffix_2{padding-right:16em;}.container_12 .suffix_4{padding-right:32em;}.container_12 .suffix_5{padding-right:40em;}.container_12 .suffix_7{padding-right:56em;}.container_12 .suffix_8{padding-right:64em;}.container_12 .suffix_10{padding-right:80em;}.container_12 .suffix_11{padding-right:88em;}.container_16 .suffix_1{padding-right:6em;}.container_16 .suffix_2{padding-right:12em;}.container_16 .suffix_3{padding-right:18em;}.container_16 .suffix_5{padding-right:30em;}.container_16 .suffix_6{padding-right:36em;}.container_16 .suffix_7{padding-right:42em;}.container_16 .suffix_9{padding-right:54em;}.container_16 .suffix_10{padding-right:60em;}.container_16 .suffix_11{padding-right:66em;}.container_16 .suffix_13{padding-right:78em;}.container_16 .suffix_14{padding-right:84em;}.container_16 .suffix_15{padding-right:90em;}.container_12 .push_3,.container_16 .push_4{left:24em;}.container_12 .push_6,.container_16 .push_8{left:48em;}.container_12 .push_9,.container_16 .push_12{left:72em;}.container_12 .push_2{left:16em;}.container_12 .push_4{left:32em;}.container_12 .push_5{left:40em;}.container_12 .push_7{left:56em;}.container_12 .push_8{left:64em;}.container_12 .push_11{left:88em;}.container_16 .push_1{left:6em;}.container_16 .push_2{left:12em;}.container_16 .push_3{left:18em;}.container_16 .push_5{left:30em;}.container_16 .push_6{left:36em;}.container_16 .push_7{left:42em;}.container_16 .push_9{left:54em;}.container_16 .push_10{left:60em;}.container_16 .push_11{left:66em;}.container_16 .push_13{left:78em;}.container_16 .push_14{left:84em;}.container_16 .push_15{left:90em;}.container_12 .pull_3,.container_16 .pull_4{left:-24em;}.container_12 .pull_6,.container_16 .pull_8{left:-48em;}.container_12 .pull_9,.container_16 .pull_12{left:-72em;}.container_12 .pull_1{left:-8em;}.container_12 .pull_2{left:-16em;}.container_12 .pull_4{left:-32em;}.container_12 .pull_5{left:-40em;}.container_12 .pull_7{left:-56em;}.container_12 .pull_8{left:-64em;}.container_12 .pull_10{left:-80em;}.container_12 .pull_11{left:-88em;}.container_16 .pull_1{left:-6em;}.container_16 .pull_2{left:-12em;}.container_16 .pull_3{left:-18em;}.container_16 .pull_5{left:-30em;}.container_16 .pull_6{left:-36em;}.container_16 .pull_7{left:-42em;}.container_16 .pull_9{left:-54em;}.container_16 .pull_10{left:-60em;}.container_16 .pull_11{left:-66em;}.container_16 .pull_13{left:-78em;}.container_16 .pull_14{left:-84em;}.container_16 .pull_15{left:-90em;}.container_12 .push_1,.container_12 .push_10{left:80em;}

/* ############################## LAYOUT ############################## */

/* HEADER */

#header {
	position: relative;
	min-height: 22.5em;
	background: transparent url(../images/header_bg.png) 50% 8.5em no-repeat;
}

/* SEARCH */

#sitesearch {
	width: 94em;
	height: 3em;
	margin: 0 auto -3em auto;
	text-align: right;	
}

#sitesearch form {
	position: relative;
	top: 3em;
}
	
#sitesearch  #searchfield {
	position: absolute;
	z-index: 10;
	right: 2.6em;
	width: 12em;
	height: 2.2em;
	border: 1px solid #222;
	color: #a1a1a1;
	text-indent: 0.5em;
}

#sitesearch #searchbutton {
	position: relative;
	z-index: 5;
	top: 0;
	right: 0;
	height: 2.47em;
	width: 2.67em;
	border: 1px solid #222;
	background: #fff url(../images/lupe.jpg) 50% 50% no-repeat;
	text-indent: -999em;
	cursor: pointer;	
}

/* NAVIGATION */

/* 
* li elements are floated left to horizontally align the menu items
* a elements are floated right, pulled to the page top and then pushed down to the li numbers - this makes it possible to have the hover/active state arrows at the page top
* spans are absolutely positioned below the links and right aligned
*/

#navigation {
	background: #ffffff;
	min-height: 7em;
}

#navigation ol {
	position: relative;
	margin: 0 -2.5em -3em 3.3em;
	list-style-type: decimal;
}

#navigation ol li {
	position: relative;
	float: left;
	z-index: 10;	
	margin: 0 2.1em 0 0;
	padding: 1.15em 0 0 0;
	font-variant: small-caps;
}

#navigation a {
	position: relative;
	top: 0;
	padding: 1.4em 0 0 0;
	color: #222;
	border-bottom: 0;
	
	/* vendor */
	-webkit-transition: background .3s ease;
	-moz-transition: background .3s ease;
	-o-transition: background .3s ease;
	
	transition: background .3s ease;	
}

/* 0.65em = 13.65px */
#navigation ol li a span {
	position: absolute;
	right: 0;
	bottom: -1.2em;
	font-variant: normal;
}

#navigation a span,
#navigation li:hover,	
#navigation li:hover *,
#navigation li.act,
#navigation li.act a {
	color: #c42534;
}

#navigation li:hover a,
#navigation a:hover, 
#navigation .act a {	
	background: transparent url(../images/pfeil_hover.png) center top no-repeat;	
}

/* BRANDING */

#branding {
	height: 14.5em;
	background: transparent url(../images/h1.png) 0.9em 4.5em no-repeat;
	text-indent: -999em;
}

#header #logo {
	position: absolute;
	top: 1.65em;
	left: 50%;
	width: 20.1em;
	height: 24.3em;
	margin: 0 0 0 -48em;
	background: transparent url(../images/tempel.png) 0 0 no-repeat;
	text-indent: -999em;
}

/* CONTENT */

#content {
	min-height: 40em;
	margin: 4em auto;
	background: #fff;
}

/* FOOTER */

#footer {
	position: relative;
	min-height: 35em;
	padding: 2.1em 0 4.2em 0;
	background: #515153 url(../images/footer_bg.jpg) 0 0 repeat-x;
}

#footer h2 {
	padding: 1em 0 0.7em 0;
	color: #c42534;
	text-decoration: none;
}

#footer p, #footer a {
	padding: 0;
	color: #fff;	
}

#footer ul {
	padding: 0 0 0 1.5em;
}

#footer li {
	padding: 0 0 0.2em 0.5em;
	color: #c42534;	
}

#footer li span {
	color: #fff;
}

#footer a {
	border-bottom: 1px solid #fff;
}

#footer a:hover, #footer a:focus {
	color: #c42534;
	border-bottom: 1px solid #c42534;	
}
	
#footer .vcard {
	background: transparent url(../images/akademie_logo.png) 0 8em no-repeat;
	margin-bottom: 2em;
}

#footer .vcard h2 a {
	border: 0;
	color: #c42534;	
}

#footer .vcard p {
	margin: 0;
}

#footer .vcard span {
	display: block;
	color: #fff;
}

#footer .vcard .adr,
#footer .vcard .tel {
	padding-left: 9.5em;
}

#footer .vcard span.indent, 
#footer .vcard span.locality,  
#footer .vcard span.tel span {
	display: inline;
}

#footer .vcard .email, 
#footer .vcard .website {
	margin: 0 0 0 9.5em;
}

#feeds {
	position: absolute;
	top: -1.2em;
	right: 50%;
	width: 10em;
	height: 2.5em;
	margin: 0 -47em 0 0;
	padding: 0;
	list-style: none;
}

#feeds a {
	position: relative;
	float: right;
	width: 2.3em;
	height: 1.5em;
	margin: 0;
	padding: 0;
	border: none;
	text-indent: -999em;	
}

#feeds a:active, #feeds a:visited {
	border: none;
}

#feeds a:hover {
	top: -1em;
	height: 2.5em;
	border: none;
}

#feeds .rss {
	background: transparent url(../images/header_rss.png) 0 0 no-repeat;
}

#feeds .newsletter {
	top: -0.275em;
	background: transparent url(../images/header_newsletter.png) 0 0 no-repeat;
}

#feeds .rss:hover {
	background: transparent url(../images/header_rss2.png) 0 0.3em no-repeat;
}

#feeds .newsletter:hover {
	top: -1.05em;
	background: transparent url(../images/header_newsletter2.png) 0 0 no-repeat;
}

/* ############################## TYPOGRAPHY ############################ */

/* FONT FAMILIES */

/* serif */
h2, h3, h4, h5,
blockquote,
#navigation ol li,
#content ol li:before,
#searchfield, #searchbutton {
	font-family: Baskerville, "Book Antiqua", Optima, "Century Schoolbook L", "Times New Roman", serif;
}

/* sans serif */
body, textarea {
	font-family: "Trebuchet MS", "Lucida Sans", Arial, sans-serif;
}

/* FONT SIZES & LINE HEIGHTS */

/* Traditional Scale: 6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72
 * We use: 12,14,16,18,21,24,36,48 
 * Please do not set any font sizes / line-heights outside this section
 */
 
/* basic */

h1 {
	font-size: 4.8em;
	line-height: 1;
}

h2 {
	font-size: 2.1em;
	line-height: 1.3;
}

h3 {
	font-size: 1.8em;
	line-height: 1.3;	
}

h4 {
	font-size: 1.8em;
	line-height: 1.5;
}

h5 {
	font-size: 1.6em;
	line-height: 1.4;
}

p, pre, li, dt, dd,
label, legend, input, select, textarea, 
td, th, caption {
	font-size: 1.4em;
	line-height: 1.7;
}

/* special */

#navigation ol li {
	font-size: 2.1em;
}

#navigation ol li a span {
	font-size: 0.65em;
}

#branding {
	font-size: 1em;
}

li li {
	font-size: inherit;
}

#footer h2 {
	font-size: 1.8em;
}

#footer .grid_6 .csc-firstHeader {
	margin-top: -0.3em;
	padding-top: 0;
}

blockquote p {
	font-size: 1.6em;
}

.csc-textpic-caption,
.csc-caption,
.news-single-imgcaption {
	font-size: 1.2em;
}

/* ############################## CONTENT ############################ */

/* HEADER */

#content h1 {
	font-weight: normal;
	text-transform: uppercase;
}

#content h2 {
	margin: 1em 0;	
}

#content .csc-subheader {
	margin: 0.2em 0 1.5em 0.1em;
}

#content h3 {
	margin: 0.5em 0 1em 0;
	padding: 0 0 0.3em 0;
	border-bottom: 1px solid #222;
	background: transparent url(../images/pfeil_h3.png) 0 0.4em no-repeat;
	text-indent: 1.3em;
}

#content h4 {
	clear: both;
	margin: 0 0 0.8em 0;
}

/* TEXT */

p {
	margin: 0 0 1.5em 0;
}

strong, b {
	font-weight: bold;
}

em, i {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

/* HYPERLINKS */

/* not clicked: solid border; clicked: dashed border */

a {
	text-decoration: none; 
}

a:link, a:active, a:focus {
	color: #c42534;
	border-bottom: 1px solid #c42534;
}

a:visited {
	color: #6F6F6F;
	border-bottom: 1px solid #6F6F6F;
}

a:hover {
	color: #c42534;
	border-bottom: 1px solid #c42534;
}

.csc-textpic-image a {
	border-bottom: none;
}

.button {}
.download {}
.more {}

/* LISTS */

/* To have utmost control over bullets and numbering, generated content and counters are used.
 * see: http://dev.opera.com/articles/view/automatic-numbering-with-css-counters/
 */

#content ol, #content ul {
	margin: 0 0 1.5em 2em;
	counter-reset: section;
}

#content ol ol, #content ul ul {
	margin: 0 0 0 2em;
}

/* padding-left to get straight margins in multiline li elements */

#content li {
	list-style-type: none;
	padding-left: 1em;
	counter-increment: section;
}

#content li li {
	margin-left: -1.5em;
}

#content li li li {
	margin-left: -0.7em;
}

#content ul li li li {
	margin-left: -1.7em;
}

#content ol li:before {
	content: counters(section, ".") ". ";
	margin: 0 0.5em 0 -1em;	
	color: #c42534;
}

#content ul li:before {
	content: "\2022";
	margin: 0 0.5em 0 -1em;	
	color: #c42534;
}

/* DEFINITION & DEFINITION LISTS */

dl {}

dfn {
	cursor: help;
	font-style: normal;
}

/* QUOTES */

q {
	font-style: italic;
}

cite {
	color: #717171;
	font-style: italic;
}

blockquote {
	position: relative;
	padding: 1.5em 0;
	margin: 0 0 1.7em;
	background: #ededed url(../images/quote_right.gif) 57.4em 1em no-repeat;
}

blockquote p {
	padding: 0 6.2em;
	margin: 0;
	background: transparent url(../images/quote_left.gif) 1em bottom no-repeat;
}

blockquote cite {
	display: block;
	text-align: right;
	font-style: italic;
}

#sidecontent blockquote {
	padding: 0;
	background: #ededed;
}

#sidecontent blockquote p {
	padding: 1em;
	background: none;
}

/* TABLES */

.contenttable {
	position: relative;
	margin: 0 0 1.5em 0;
	background: #FFFFFF;
	border: 1px solid #222;
}

.contenttable caption {
	margin: 0.5em 0 1.5em 0;
	text-align: left;
	font-style: italic;
}

.contenttable td, .contenttable th {
	border: 1px solid #222;	
	padding: 0.5em;
	text-align: left;
}

.contenttable th {
	border-right: 1px solid #cfcfcf;
	color: #fff;
	background-color: #717171;
	font-weight: bold;
}

.contenttable th.td-last {
	border-right: none;
}

.contenttable .tr-even {
	background-color: #DFDFDF;
}

.contenttable tr:hover {
	color: #fff;
	background: #c42534;
}

.contenttable tr:hover a,
.contenttable tr:hover a:link,
.contenttable tr:hover a:active,
.contenttable tr:hover a:visited,
.contenttable tr:hover a:hover,
.contenttable tr:hover a:focus {
	color: #fff;
	border-bottom-color: #fff;
}

.contenttable-1 .td-0 {
	width: 30%;
}

.contenttable-1 .td-1 {
	width: 10%;
}

.contenttable-1 .td-2 {
	width: 60%;
}

/* FORMS */

input, textarea, select {
	/* vendor */
	-webkit-transition: background .5s ease;
	-moz-transition: background .5s ease;
	-o-transition: background .5s ease;
	
	transition: background .5s ease;	
}

input:focus, textarea:focus, select:focus {
	color: #fff;
	background: #222;
}

#maincontent form {
	color: #222;
	margin: 0 0 1.5em 0;
}

#maincontent legend {
	padding: 0.4em 0 0.4em;
	font-weight: bold;
}

form label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 0;
	margin: -2px 0 0 -2px;
}

#maincontent fieldset input, 
#maincontent fieldset select,
#maincontent fieldset textarea {
	width: 25em;
	border: 1px solid #222;
	padding: 0.4em;
	margin: 0 3em 1em 0;
	color: #a1a1a1;
}

#maincontent fieldset select {
	width: 26em;
}

#maincontent fieldset textarea {
	width: 45.56em;
	padding: 0.4em;
	margin-bottom: 1em;
}

legend.skip {
	text-indent: -999em;
}

/* IMAGES */

/* sizes with shadow: always -10px */
.csc-textpic-shadow img {
	border: 0.1em solid #efefef;
	padding: 0.3em;
	background: #FFFFFF;
	box-shadow: 0.2em 0.2em 0.2em #BFBFBF;
	
	/* vendors */
	-webkit-box-shadow: 0.2em 0.2em 0.2em #BFBFBF;
	-moz-box-shadow: 0.2em 0.2em 0.2em #BFBFBF;
	-o-box-shadow: 0.2em 0.2em 0.2em #BFBFBF;	
}

/* captions */
.csc-textpic-caption,
.csc-caption,
.news-single-imgcaption {
	margin: 0 0 1.4em 0;
	color: #6f6f6f;    
}

/* rendering method: dl */
.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image {
    float: left;
}

.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image dt {
    float: none;
}

.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image dd {
    float: none;
}

.csc-textpic-image dt {
    margin: 0;
    display: inline;
}

/* rows */
.csc-textpic .csc-textpic-imagerow {
    clear: both;
    margin: 0 0 1.4em 0;
}

.csc-textpic-imagerow .csc-textpic-image {
	margin: 0 2em 1.4em 0 !important;
}

.csc-textpic .csc-textpic-imagewrap .csc-textpic-firstcol {
    margin-left: 0 !important;
}

.csc-textpic .csc-textpic-imagewrap .csc-textpic-lastcol {
    margin-right: 0 !important;
}

/* positioning */
.csc-textpic {
    position: relative;
}

/* Note: Since we're applying a 4px padding and 1px border to each image, the alignment of the imagewraps needs some correction.
 * This is due to the fact that TYPO3 genereates an inline style with the calculated width of the image that will always be 10px short of the real size.
 * Example: Image should be 220px = 210px real size (120 + 5 + 5). But imagewrap will get the 210px inline width. When the imagewrap is floated right for 
 * instance, the image will bleed 10px over the right edge of the float/grid. The solution is to accommodate each position adding a 10px padding to the imagewrap.
 * CSS rule: width + padding = real width of element
 */

/* Above */
.csc-textpic-above .csc-textpic-text {
    clear: both;
}

/* Center (above or below) */
.csc-textpic-center .csc-textpic-imagewrap {
    position: relative;
    margin: 0 auto 0 auto;
    padding: 0;
}

/* Right (above or below) */
.csc-textpic-right .csc-textpic-imagewrap {
    float: right;
    margin: 0;
    padding: 0 1em 0 0;
}

.csc-textpic-right .csc-textpic-text {
    clear: right;
}

/* Left (above or below) */
.csc-textpic-left .csc-textpic-imagewrap {
    float: left;
    padding: 0 1em 0 0;
}

.csc-textpic-left .csc-textpic-text {
    clear: left;
}

/* Left (in text) */
.csc-textpic-intext-left .csc-textpic-imagewrap {
    float: left;
    padding: 0 1em 0 0;
}

/* Left (in text, no wrap around) */
.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap {
    float: left;
    padding: 0 1em 0 0;
}

/* Right (in text) */
.csc-textpic-intext-right .csc-textpic-imagewrap {
    float: right;
    margin: 0 0 0 0;
    padding: 0 1em 0 0;    
}

/* Right (in text, no wrap around) */
.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap {
    float: right;
    margin: 0 0 0 0;
    padding: 0 1em 0 0;
}

/* straight margins for float variants */
.csc-textpic-intext-left-nowrap .csc-textpic-text {
	margin: 0 0 0 3em;
}

.csc-textpic-intext-right-nowrap .csc-textpic-text {
	margin: 0 3em 0 0;
}

.csc-textpic-intext-left .csc-textpic-imagewrap {
	margin: 0 2em 0 0;
}

.csc-textpic-intext-right .csc-textpic-imagewrap {
 	margin: 0 0 0 2em;
}

.csc-textpic .csc-textpic-imagewrap {
	margin-bottom: 1.5em;
}

/* ############################## SPECIAL CONTENT ############################### */

/* CONTENTBOXES */

#maincontent .box {
	float: left;
	width: 11.3em;
	margin-bottom: 2em;
	text-align: center;
}

#content .box a {
	display: inline-block;
	height: 2em;
	padding-top: 9em;
	border-bottom: none;
	text-decoration: underline;
}

#maincontent .box-1 {
	background: #fff url(../images/icon_digitalisierung.png) 50% 0 no-repeat;
}

#maincontent .box-2 {
	background: #fff url(../images/icon_infoarch.png) 50% 0 no-repeat;
}

#maincontent .box-3 {
	background: #fff url(../images/icon_design.png) 50% 0 no-repeat;
}

#maincontent .box-4 {
	background: #fff url(../images/icon_support.png) 50% 0 no-repeat;
}

/* NEWS */

/* listview */
.item {
	margin: 0 0 6em 0;
}

.listview .csc-textpic-imagewrap {
	width: 24em;
	margin-bottom: 1.5em;
}

.listview .csc-textpic-text {
	margin-left: 0;
}

.listview .more {
	display: block;
}

#da-821 .more {
	margin-left: 0.3em;
}

#da-936 .more {
	display: block;
}

/* amenuview */
.amenuview .year:before {
	content: "" !important;
}

.amenuview .year {
	font-weight: bold;
	margin: 2em 0 0 0;
}

/* singleview */
.singleview .csc-textpic-imagewrap {
	width: 28em;
}

.singleview .news-single-additional-info {
	clear: both;
}

.singleview .back {
	clear: both;
	margin: 3em 0;
}

/* PAGEBROWSER */

#content .browse ul {
	list-style: none;
	margin: 1em 0 2em 0;
	padding: 0;
}

#content .browse li:before {
	content: "";
	margin: 0;
	padding: 0;
}

#content .browse li {
	display: inline-block;
	min-width: 2em;
	margin: 0 0.5em 0 0; 
	border: 1px solid #961C1C;
	padding: 0;
	background: #A01112;
	text-align: center;
	color: #961C1C;
	
	/* vendors */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	
	border-radius: 5px;
}

#content .browse li a {
	display: inline-block;
	min-width: 2em;
	padding: 0 0.5em;
	color: #FFF;
	border-bottom: none;
	text-transform: uppercase;
	
	/* vendor */
	background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDIxOCwzNywyOCwxKTsiIC8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDE2MCwxNywxOCwxKTsiIC8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNncmFkaWVudCkiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIC8+PC9zdmc+);
	background: -moz-linear-gradient( top, rgba(218,37,28,1), rgba(160,17,18,1) );	background: -moz-linear-gradient( top, rgba(218,37,28,1), rgba(160,17,18,1) );
	background: -webkit-gradient( linear, left top, left bottom, color-stop( 0, rgba(218,37,28,1) ), color-stop( 1, rgba(160,17,18,1) ) );

	-moz-text-shadow: 1px 1px 1px #333;
	-o-text-shadow: 1px 1px 1px #333;
	-webkit-text-shadow: 1px 1px 1px #333;
	text-shadow: 1px 1px 1px #333;
}

#content .browse .flip {
	background: none;
	font-weight: bold;
}

#content .browse .flip a {
	padding: 0;
}

#content .browse a:hover {
	background: #D7241B;
}

/* ############################## MOBILE ############################### */

/* see: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries */

/* SMARTPHONES (PORTRAIT & LANDSCAPE) */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* SMARTPHONES LANDSCAPE */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* SMARTPHONES PORTRAIT */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPAD (PORTRAIT & LANDSCAPE) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
}

/* iPAD (LANDSCAPE) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
}

/* iPAD (PORTRAIT) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* DESKTOP & LAPTOPS */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* LARGE SCREENS */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPHONE 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* ############################## PRINT ################################ */

@media print {

/* PAGE */

* {
	position: static !important;
	float: none !important;
	width: auto !important;
	height: auto !important;
	color: black !important;
	background: white !important; 
	background-image: none !important;
	text-shadow: none !important;
	text-align: left !important;
	line-height: 1.5em !important;
}

@page { margin-top: 1.5cm; margin-right: 3cm; margin-bottom: 1.5cm; margin-left: 1.5cm; }

/* specials for book/article layout - sometimes needed
@page :first { margin-top: 10cm; }
@page :left { margin-left: 4cm; margin-right: 3cm; }
@page :right { margin-left: 3cm; margin-right: 4cm; }
*/

/* pagebreaks, widows, orphans */
h1, h2, h3 { page-break-after: avoid; widows: 4; orphans 4; }
p { widows: 4; orphans 4; }
table, tbody, tr, img { page-break-inside: avoid; }

/* TYPOOGRAPHY */

/* font families */
body { font-family: "Times New Roman", Times, serif; }
h1, h2, h3, h4, h5 { font-family: Arial, Helvetica, sans-serif; }
code, pre { font-family: monospace; }

/* font sizes */
body { font-size: 12pt; }
h1 { font-size: 21pt; }
h2 { font-size: 18pt; }
h3 { font-size: 16pt; }
h4 { font-size: 14pt; }
h5 { font-size: 12pt; }
p, blockquote, pre, address, cite, code,
dl, dt, dd, ol, ul, li, label, legend,
table, caption, tr, th, td,
input, select, textarea, .caption { font-size: 12pt; }

/* ELEMENTS */

/* text */
p { margin: 0 0 1em 0 !important; }
em, i { font-style: oblique; }
strong, b { font-weight: bold; }
.underline { text-decoration: underline; }
.nowrap { white-space: nowrap; }
.tab { margin-left: 2.5em; }

/* hyperlinks */
a, a:visited { text-decoration: underline; border: none; }
h2 a, h2 a:visited, 
h3 a, h3 a:visited,
h4 a, h4 a:visited,
.csc-textpic-image a,
.csc-textpic-image a:visited { text-decoration: none; }
a[href]:after { content: " <URL: "attr(href)"> "; color: #000; font-style: italic; }
h1 a:after, h2 a:after, h3 a:after, h4 a:after,
.csc-textpic-image a:after { content: "" !important; }
.button a { padding: 0; text-decoration: underline; }

/* tables */
thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
th, col, colgroup, tr, td { vertical-align: top; }
th, td { padding: 0 20pt 5pt 10pt; }
caption { caption-side: top; margin-bottom: 1em; border: none; font-weight: bold; font-style: oblique; }

/* lists */
ul, ol, dl { margin: 0 0 1em 1em; padding: 0; }
ol li { list-style-type: decimal; }
ol ol li { list-style-type: lower-alpha; }
ol ol ol li	{ list-style-type: lower-roman; }
li { margin: 0 0 0 2em; }
dt, dd { margin: 0 0 0 1em; }

/* other elements */
abr, acronym, dfn { font-style: oblique; }
abbr:after { content: " (" attr(title) ")"; }
blockquote { border: 1px solid black; }
cite, q { border: none; }
code, pre { display: block; margin: 0 0 1em 0; padding: 0.5em; }
fieldset { border: 1px solid black; }
hr {  height: 0px; color: inherit; margin-bottom: 1em; border-bottom: 1px solid black; }

/* HIDDEN */

#branding, #header, #footer { display: none; }

/* SPECIAL */

} /* END OF PRINTSTYLES */

/* ############################## FINALLY ############################## */

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* class for hiding elements */
.skip {
	display: none;
    position: absolute;
    overflow: hidden;
    z-index: 0;
    width: 1px;
    height: 1px;
    margin: -2px 0 0 -2px;
    background: transparent;
}