/*
	--------------------------------------------------------
	sucht-hamburg.de
	Hamburische Landesstelle für Suchtfragen e.V.
	Büro für Suchtprävention
	Structure and layout only
	See schemes 0... n.css for colour-schemes
	--------------------------------------------------------
*/



/*
	--------------------------------------------------------
	default and common elements
	--------------------------------------------------------
*/

* {
	margin: 0;
	padding: 0;
	}
a {
text-decoration: none;
}

body {
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/* font-size: 12px; */	/* set dynamically */
	line-height: 1.5em;
	min-height: 200em; 	/* force firefox to have a vertical scroll bar even if the content is short */
	}

img {
	border:none;
	}

.hidden {
	display: none;
}

.clearit {
	clear: both;
	height: 0;
	line-height: 0;
	padding: 0;
	margin: 0;
	}

.colclear {
height: 0;
clear: both;
margin-bottom: 1em;
}
h3 {
font-size: 1em;
line-height: 2.5em;
/* border-bottom: 1px solid; */
}

#ttbox {
	border-bottom: 1px solid;
	position: relative;
	z-index: 10;
}
#page_title {
	text-align: left;
	margin-left: 19em;
	/* width: 43em; */

}
#page_title h3 {
font-size: 1.5em;

}
h4 {
font-size: 1em;
line-height: 2em;
}

/*
	--------------------------------------------------------
	structural layout
	--------------------------------------------------------
*/


#headblock {
	padding: .25em 0 .25em 0;

margin-top: -4em;
	}

#bgcont {

	height: 50em;
	position: relative;
	z-index: 3;
	top: -4em;
	padding-top: 4em;
}
.container {
	width:82em;	/* sometimes wise to have this .5em wider than column total to deal with msie idiosyncracy on borders */
	margin-right:auto;
	margin-left:auto;
	clear: both;
	}


#left_column {
	width:17em;
	float:left;
	line-height: 2em;
	min-height: 34em;
	/* overflow: visible; */

margin-top: -.5em;
	}

#centre_column {
	width:43em;
	margin: 0 2em 0 2em;
	float:left;
	text-align: left;
	}

#right_column {
	width:17em;
	float:left;
	text-align: left;

	}

#full_column {
	width:50em;
	margin: 0 2em 0 2em;
	float:left;
	text-align: left;
}

#centre_column h2 {
	font-size: 1.5em;
	margin-bottom: 1em;
}
#mainblock {
	}
#breadbox {
	/* border-bottom: 1px solid; */
}
#breadcrumb {
text-align: left;
font-style: italic;
line-height: 2em;
/* margin-bottom: 1em; */
padding-left: 19em;

}

#breadcrumb a:hover {
text-decoration: underline;
}
/*
	--------------------------------------------------------
	navigation
	--------------------------------------------------------
*/

/* ------------------------ top-bar [rubriken] and footbar [permalinks] very similar ------------------------ */
#topbar, #footbar {
border-bottom: 1px solid;
border-top: 1px solid;
}

#topbar {line-height: 2.5em;}


#topbar ul, #footbar ul {
list-style: none outside none;
white-space: nowrap;
}

#topbar li, #footbar li {
display: inline;
padding: 0;
margin: 0;
}

#topbar li a, #topbar li span.active {
text-align:left;
/* width: 10em; */
width: auto;
/* border: 1px solid; */
display: inline-block;
line-height: 2.5em;
font-weight: bold;
padding-left: 1.25em;
padding-right: 2em;
text-decoration: none;
}

#footbar li a, #footbar li span.active {
text-align:center;
width: 11em;
display: inline-block;
line-height: 2em;

/* font-weight: bold; */
text-decoration: none;
}

#footbar {
/* margin-bottom: .5em; */
/* margin-top: 2em; */

}
/* ------------------------  left column (and sitemap) ------------------------ */



#left_column ul, #sitemap ul {
	list-style: none outside none;
	/* list-style-position: inside; */
	/* list-style-image: url(/sysimg/icons/0/dokument.png); 	 *//* um this will have to change if explorer-type is decided on */
	border-bottom: 1px solid;
	line-height: 2em;
	margin: 0;
	text-align: left;
	}
#left_column li ul, #sitemap li ul {	/* !!!!!NEED MORE LEVELS!!!!! */
	border-bottom: none;
	}
#left_column  li ul li ul, #sitemap li ul li ul {	/* !!!!!NEED MORE LEVELS!!!!! */
	border-bottom: none;
	}
#left_column li li, #sitemap li {
	border-top: 1px solid;
	}



#left_column li a,  #sitemap li a {
display: inline-block;
padding-left: 2.25em;
background-repeat: no-repeat;
background-position: .5em center;
}

#left_column li li a, #sitemap li li a {
display: inline-block;
padding-left: 3.25em;
background-position: 1.5em center;
}

#left_column li li li a, #sitemap li li li a {
display: inline-block;
padding-left: 4.25em;
background-position: 2.5em center;
}

/* edit ul v. similar but not the same */
#edit ul {
	list-style: none outside none;
	border-top: 1px solid;
	line-height: 2em;
	margin: 0;
	text-align: left;
	}
#edit li {
border-bottom: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-top: none;
}

#edit li a, #edit li .current {
display: block;
border: none;
}

/*
	--------------------------------------------------------
	messages
	--------------------------------------------------------
*/

.message {
border: 1px solid;
margin-bottom: 2em;
}

.message h4 {
padding-left: .5em;
border-bottom: 1px solid;
margin: .25em .25em .5em .25em;
}
.msgwrap {
padding: 0 .75em .75em .75em;
}

.message ul {
list-style: square outside none;
margin-left: 2em;
margin-bottom: .5em;
}

.message p {
margin-bottom: .5em;
}
p.mslink {
line-height: 1em;
padding-top: .5em;
}
.mslink img {
display: block;
float: left;
margin-right: .5em;
margin-top: 1px;
}
/*
	--------------------------------------------------------
	block specifics
	--------------------------------------------------------
*/

.block {
padding-bottom: 1em;
}


#centre_column .block {
line-height: 1.75em;
 }

 .edit_bar {
 margin-top: -1em;
height: 1em;
line-height: 1em;

 }

.edit_bar img {
line-height: 1em;
margin: 0;
padding: 0;
opacity: 0.5;
-moz-opacity:0.5;
}
.edit_bar img:hover {
opacity: 1;
-moz-opacity:1;
}
#centre_column .block ul  {
list-style: square outside none;
margin-left: 2em;
}
#right_column .block ul {
list-style: none outside none;
}
#right_column .block ul li {
margin-bottom: 1em;
}
.twinleft {
width: 20.75em;
float: left;
}

.twinright {
width: 20.75em;
margin-left: 22.25em;
}

.block a:hover {
text-decoration: underline;
}
/* ------------------------ delete/confirm buttons in message-box ------------------------ */
/* ------------------------ this is the only case with colours in the structure style-sheet ------------------------ */
/* ------------------------ as these colours are used with all styles ------------------------ */
#confirm_box {
margin-top: 1em;
height: 4em;
font-weight: bold;
}

#confirm_box p {
width: 14em;
float: left;
margin: 0 3em  0 3em;
text-align: center;
line-height: 2em;
}

#delete_button {
border: 1px solid #FF8040;
padding: 1px;
}

#cancel_button {
border: 1px solid #00BB00;
padding: 1px;
}

#delete_button a {
display: block;
background-color: #FF8040;
color: #ffffff;
text-decoration: none;
}

#cancel_button a {
display: block;
background-color: #00BB00;
color: #ffffff;
text-decoration: none;
}

#delete_button a:hover {
background-color: #CE0000;
}

#cancel_button a:hover {
background-color: #009500;
}

#landing .edit_bar {
text-align: center;
}

/*
	--------------------------------------------------------
	forms: standard forms
	--------------------------------------------------------
*/

form {
	border: 1px solid;
	padding: 1em;
}

.row {
margin-bottom: .5em;
/* text-align: right; */
clear: both;
}

fieldset {
	border: none;
}

input,  textarea, select, .forminfo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
border: 1px solid;
padding: .25em .25em .5em .5em;
width: 30em;
}

/* there is nothing you can do to influence this on firefox; even width can only be set by the attribute size in the form */
/* unusually: msie get's it right */
#file {
width: 31em;
}
select {
width: 31em;
}

option {
margin: .25em 0 .5em 0;
padding: 0 .25em 0 .5em;
}

label {
float: left;
width: 9em;
padding: .25em .25em .5em .5em;
text-align: left;
}

textarea {
height: 25em;
line-height: 1.5em;
}
textarea.small {
height: 15em;
}

textarea.vsmall {
height: 9em;
}
input#submit {
height: auto;
padding-top: .5em;
width: 100%;
}

.row_cancel {
border-top: 1px solid;
padding-top: .5em;
margin-top: 1em;
}

#cancel {
width: 20em;
float: left;
/* line-height: 2em; */
border: 1px solid;
margin-right: .5em;
padding-top: .5em;
padding-bottom: .5em;
}

#cancel a {	/* and this height doesn't and you can only use it by using pixel-height*/
display: block;
text-align: center;
text-decoration: none;
margin-top: -1px;	/* the button draws its borders within, this div draws them outside; msie seems to draw only one button border inside */
margin-bottom: -1px;
}

.row_cancel input#submit {
width: 20em;
}
.radiosimple {
margin-bottom: .5em;
}

.radiosimple fieldset {
display: inline-block;
border: 1px solid;
padding: .25em .25em .5em .5em;
width: 30em;
}

.radiosimple fieldset input {
border: none;
height: 1em;
width: 1em;
float: left;
margin-top: .5em;
}

.radiosimple fieldset .twinset {
	width: 14em;
	float: left;
}
.radiosimple fieldset label {
float: none;
line-height: 2em;
}

.radiosimple fieldset .twinset label {
	width: 10em;
	float: left;
	line-height: 1.5em;
}
.row_fnarrow {
width: 15em;
float: left;
}
input.fnarrow {
width: 4em;
}
.row_fmid {
width: 24em;
margin-bottom: .5em;
margin-left: 16.5em;
padding-left: 2px;
}



.row_fmid label {
width: 4.25em;
float: left;
text-align: left;
margin: 0;
}

input.fmid {
width: 18em;

}

.forminfo {
margin-left: 9.75em;
}

/* trailer bg in aktuelles block form, see also:  feature boxes */
#formbgpic {
width: 200px;
height: 200px;
border: 1px solid;
margin-bottom: 1.5em;
margin-left: 9.75em;
background-position: center center;
background-repeat: no-repeat;
/* image url is set dynamically */
}

.switchedon {display: block;}
.switchedoff {display: none;}
.pseudo {font-weight: bold;}

#botobx {
margin-bottom: 1em;
margin-top: 1em;
}
#bclabel {
width: 35em;
border-top: 1px solid;
border-bottom: 1px solid;
margin-right: 1em;
padding: 0 0 0 .5em;
line-height: 2em;
}

#bcdat {
width: 3em;
}

em.mailhigh {
display: block;
margin: 2em;
padding: 1em;
line-height: 2em;
font-style: normal;
}

/* ------------------------ searchbox ------------------------ */

#whonk {
width: 82em;
text-align: right;
margin: 0 auto 0 auto;
padding-top: 2em;
padding-right: 4em;
}

#whonk form {
padding: 0;
margin: 0;
display: inline;
position: relative;
z-index: 2;
border: none;
}

#whonk fieldset {
display: inline-block;
width: 12em;
line-height: 2em;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 1px solid #b4d3ef;
background-color: #8E8FCA;
}

#whonk input, #whonk submit  {
width: 5em;
border: none;
background-color: #8E8FCA;
color: #ffffff;
padding: 0;
}
/* ------------------------ form: termine, cal. picker ------------------------ */
.row_w8em {
	width: 20em;
	float: left;
	margin-bottom: .5em;
	}

.w8em {
	width: 9em;
	padding-top: .25em;
	height: 1.5em;
	}

.row_tinx {
	width: 5em;
	float: left;
	}

.tinx {
	width: 5em;
	}

.tpick_posit {
margin-left: 9.5em;
}

.row_five {
width: 16em;
float: left;
}

.row_five input {
width: 5em;
}

.row_tel {
width: 23.75em;
margin-left: 17em;
text-align: right;
margin-bottom: .5em;
}

.row_tel input {
width: 14em;
}

.row_tel label {
width: 7em;
}
/*
	--------------------------------------------------------
	record
	--------------------------------------------------------
*/

#record {
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
line-height: 2em;
}

#record .field {
clear: both;
margin: 1px;
border-bottom: 1px solid;
}

#record .label {
width: 12em;
display: block;
float: left;
text-align: right;
/* border: 1px solid; */

padding-left: .5em;
}

#record .val {
/* border: 1px solid; */
display: block;
margin-left: 13em;
padding-left: .5em;
}
#record .val ul {
list-style: square inside none;
margin-left: .25em;
}

#record .val ul a:hover {
text-decoration: underline;
}
/*
	--------------------------------------------------------
	table simple
	--------------------------------------------------------
*/

table.simple {
line-height: 2em;
margin-top: -2px;
width: 100%;
}
.simple th, .simple td {
border: 1px solid;
padding-left: .5em;
padding-right: .5em;
margin: 5px;
vertical-align: top;
}

.simple th a, #currsort {
padding-left: 2em;
background-position: left 2px;
background-repeat: no-repeat;
}

.simple .tright {
text-align: right;
}
/*
	--------------------------------------------------------
	edit-box, page_bar
	--------------------------------------------------------
*/

/* cant you rationalise this into one thing, fukkit? */
#edit, #page_bar{
margin-top: 2em;
line-height: 2em;
}

#edit p {
border: 1px solid;
}

#edit h4, #page_bar h4, .edlist h4 {
padding-left: .75em;
font-size: 1em;
line-height: 2em;
border: 1px solid;
/* margin: 1px; */
margin-bottom: 1px;
}

#edit a {
padding-left: .5em;
}

#right_column #edit a {	/* this is a trouble-maker */
display: block;
border-top: 1px solid;
margin-left: 0;
margin-top: .5em;
padding-left: 0;
padding-top: .5em;
}
#right_column #edit, #page_bar { 		/* grrr */
margin-top: 0;
margin-bottom: 2em;
}

#page_bar p {
border: 1px solid;
/* margin: 1px; */
padding: 1px;
}
#right_column #edit p {
line-height: 1.5em;
padding: .5em;
border: 1px solid;
}
#page_bar a, #page_bar .current {
display: inline-block;
line-height: 2em;
border: 1px solid;
width: 2em;
text-align: center;
margin: 1px;
}

#centre_column .edlist {
margin-top: 2em;
}
/* edit list v. similar to left-col list but not the same */
.edlist ul {
	list-style: none outside none;
	border: none;
	line-height: 2em;
	margin: 0 0 2em 0;
	text-align: left;
	}

.edlist li {
border-bottom: 1px solid;
border-right: none;
border-top: none;
border-left: none;
}

#right_column .edlist li a, .edlist li .showing {
display: block;
border: none;
margin: 1px 0 0 0;
padding: 0 0 0 .5em;
}

.edlist p {
padding: 0 0 .5em .5em;
border-bottom: 1px solid;
}
/*
	--------------------------------------------------------
	landing-page
	--------------------------------------------------------
*/
#landing {
height: 35em;
width: 83.5em;
margin:3em auto 0 auto;
/* background-color: yellow; */
/* padding-left: 1.75em; */
}

.feature_3 .blurb {	/* intro */
text-align: left;
padding: 0 .75em 0 1.5em;
margin-bottom: 1.5em;
}

.feature_4, .feature_5 {
text-align: left;
width: 207px;
height: 265px;
float: left;
margin: 2em 1em 2em 1em;
/* background-color: pink; */
}

.feature_4 h3, .feature_5 h3 {
font-size: 1em;
font-style: italic;
text-align: left;
font-weight: normal;
padding-left: .5em;
}

.feature_4 .blurb, .feature_5 .blurb {	/* feature boxes */
width: 204px;
height: 204px;
margin-bottom: 1.5em;
background-position: center center;
background-repeat: no-repeat;
border: 1px solid;
/* image url is set dynamically */
}

#landing #mode {
text-align: right;
margin-top: -1.5em;
margin-right: 1em;
}


.blurb ul {
list-style: none outside none;
border-top: 1px solid;
}

.blurb li {
border-right: 1px solid;
border-bottom: 1px solid;
border-left: 1px solid;
border-top: none;
line-height: 28px;
height: 28px;
font-weight: bold;
/* border: none; */
}

/* ok for standards confrom browsers only */
.feature_4 .blurb li a {
display: block;
padding-left: 1em;
background-position: .125em center;
background-repeat: no-repeat;
height: 28px;
overflow: hidden;
}

/* note: alpha channels work only in standards conform browsers, that is no msie up to and including 8 */
.feature_4 .blurb li a:link, .feature_4 .blurb li a:visited {
background-color:  rgba(255, 255, 255, 0.66);	/* this is for transparency, not a colour, hence universal and here in structure and not in themes */

}

.feature_4 .blurb li a:hover {
background-color:  rgba(255, 255, 255, 0);
}

.zonk {	/* which is why we have this useless div, uses a hack to get msie to more or less properly work */
display: none;
}

/* middle two feature boxes */
.feature_5 .blurb a {
display: block;
width: 202px;
height: 202px;
border: 1px solid;
}
.feature_5 .blurb a:link, .feature_5 .blurb a:visited {
background-color:  rgba(255, 255, 255, 0.20);
display:block;
}
.feature_5 .blurb a:hover {
background-color:  rgba(255, 255, 255, 0);
display:block;
}
/*
	--------------------------------------------------------
	images
	--------------------------------------------------------
*/

.bigpic {
text-align: center;
margin-bottom: 1em;
margin-top: .5em;
}

.bigpic img {
display: block;
float: none;
margin: 0 auto 1em auto;
}
.caption {
font-style: italic;
text-align: center;
line-height: 1em;
margin-top: .25em;
}

.thumb_2 {		/* Kleinbild links im Text */
float: left;
margin-right: 1em;
margin-top: .5em;
}

.thumb_3 {		/* Kleinbild rechts im Text */
float: right;
margin-left: 1em;
margin-top: .5em;
}

.Xthumb_4 {		/* Kleinbild freistehend links */
text-align: left;
margin-top: .5em;
}

.thumb_5 {		/* Kleinbild freistehend mitte */
text-align: center;
margin-top: .5em;
}

.Xthumb_6 {		/* Kleinbild freistehend rechts */
text-align: right;
margin-top: .5em;
}

#right_column .thumb_2 {
text-align: left;
float: none;
display: block;
width: 100%;
}

#right_column .thumb_2 img {


}

.tbox {
display: inline-block;
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
margin: 0 1em 2em 1em;
float: left;

}
.tcaption {
margin-top: 0;
}

.gallery {
padding-left: 3em;
padding-right: 3em;
line-height: 0;
}
#right_column .gallery {
padding: 0;
}
.gallery img {
margin: .5em;
}

#linkhighlight {
border: 1px solid;
padding: .5em;
margin-bottom: 1em;
}

#linkhighlight img {
vertical-align: middle;
}

#updated {
/* text-align: right; */
/* margin-right: 2em; */
font-style: italic;
margin-top: 2em;
padding-top: 2em;
/* border-top: 1px solid; */
font-size: 10px;
clear: both;

}



/*
	--------------------------------------------------------
	termin-specific
	--------------------------------------------------------
*/



.itembox {
margin-bottom: 1em;
margin-left: -.5em;
}

.bigdate {
font-size: 6em;
line-height: 1em;
color: #fff8ea; 	/* same as bg-bracket */
font-weight: bold;
text-align: center;
position: relative;
z-index: 1;
}

.itembox a {
display: block;
border: 1px solid;
line-height: 2em;
margin-top: -6em;
padding-left: .5em;
padding-right: .5em;
/* padding-bottom: 1em; */
/* padding-top: 1em; */
position: relative;
z-index: 2;
}

 .itemdate {
display: block;
border-bottom: 1px solid;
}

.itembox em {
display: block;
font-style: normal;
font-weight: bold;


}

h5 {
font-size: 1em;
line-height: 2em;
/* border-bottom: 1px solid; */
}

.addrsub {
border-top: 1px solid;
margin-bottom: 1em;
padding-top: .5em;
}

#termin {
line-height: 2em;
}

#termin h4 {
border-bottom: 1px solid;
}

#termin  .itemdate {
border: none;
}
.subtitle {
font-style: italic;
margin-bottom: 2em;
}
/*
	--------------------------------------------------------
	calender
	--------------------------------------------------------
*/
#calender {
margin-bottom: 1em;
}

#calhead {
border: 1px solid;
height: 2em;
line-height: 2em;
}

#calhead h4 {
text-align: center;
display: inline-block;
width: 10em;
}

.back, .forward {
width: 3em;
height: 2em;
line-height: 2em;
display: inline-block;
text-align: center;
}

#calhead img {
vertical-align: text-bottom;
}

#calweeks {
text-align: center;
border: 1px solid;
margin-top: 1px;
}
.week {
clear: both;
}

.wday {
width: 2em;
height: 2em;
display: inline-block;
/* float: left; */
border: 1px solid;
margin: 1px;
text-align: center;
line-height: 2em;
}

.wday a {
display: block;
}




/*
	--------------------------------------------------------
	kursbuch temporary
	--------------------------------------------------------
*/
#kbuch h3 {
font-size: 1em;
line-height: 2em;
}

.kbitem {
margin-bottom: 2em;
height: 5em;

}

.kbitem em {
display: block;
font-weight: bold;
font-style: normal;
}
.kbitem a {
display: block;
border: 1px solid;
height: 5em;
overflow: hidden;
}
#kbmenu ul {
list-style: none outside none;
line-height: 1.75em;
}
#kbmenu ul ul {
list-style: disc inside none;
padding-left: 1em;
}
#kbmenu ul ul a:hover {
text-decoration: underline;
}

#kbmenu ul li ul {
border-top: 1px solid;
}

#footer {
 margin: 1em 0 5em 0;
 border-top: 1px solid;
 padding-top: .5em;
 }
#footer img {
vertical-align: text-bottom;
}


img.icon {
vertical-align:text-bottom;
border: 1px solid white;
}


/*
	--------------------------------------------------------
	medien
	--------------------------------------------------------
*/
.mediatrailer {
	border: 1px solid;
	width: 200px;
	height: 200px;
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}