/* stylesheet stefaniekrueger.de  - created 01/2015 - by KEY22goodkingWORK http://king22.com */

/*** the dynamic admin aaaddition ***/
#aaa-preview, #aaa-preview a { margin: 0 auto; padding: 5px; color: #030; text-align: center; background: #f00; font: normal bold 12px Verdana, "luxi sans", Fortuna, Arial, Arial, sans-serif; border-bottom: 3px solid #666;}
/*** endof the dynamic admin aaaddition ***/

/*--------------------
the main selectors
----------------------*/
html { /* Force Vertical Scrollbar */
	/* IE */
	overflow-y: scroll;
	/* Moz */
	height: 100%;
	margin-bottom: 0.1em;
}

* { margin: 0; padding: 0; border: 0; color: #707070; font-size: 1em; }

body { margin: 0 auto; padding: 0 10%; 
			font-family: Verdana, 'luxi sans', Fortuna, sans-serif; 
			color: #707070; background: #f4f4ec; }
@media screen and (max-width: 1024px) { body { padding: 0 5%; } }
@media screen and (max-width: 760px) { body { padding: 0 2%; } }

h1, h2, h3 { color: #707070; font-weight: 200; text-transform: uppercase; text-decoration: none; }
h1 { /*font-size: 1.6em;*/ line-height: 96%; margin: 0; padding: 0 0 1.6em; letter-spacing: 0.05cm; }
h2, h3 { /*font-size: 1.2em;*/ margin: 0; padding: 0 0 1em; }
h3 { margin: 0; padding: 0 0 0; font-weight: bold; }
h1.eventheader, h2.eventheader, h3.cat { font-size: 1.8em; margin: 0; padding: 0; }
h1.eventheader { padding: 0.2em 0 0; }

h4, h5, h6, p, ul { font-weight: 200; }

a { outline: none !important; border: none; }
input::-moz-focus-inner { border: 0; }

#container { margin: 0 auto; padding: 0; width: 100%; max-width: 800px; }
#canvas { width: 100%; padding: 0; margin: 0 auto 1em; text-align: center; font-size: 0.9em; }
@media screen and (max-width: 760px) { #canvas { font-size: 0.9em; } }

/*--------------------
the top section
----------------------*/

#accessibility { position: absolute; top: -10000px; }
#top { clear: both; height: 0; line-height: 0; margin: 0; padding: 0; }

header { width: 100%; clear: both; margin: 7em 0 0; padding: 0; border: 0; text-align: left; }

#artist { width: 90%; margin: 24px auto 6px; padding: 0 0 6px; font-size: 1.6em; 
			letter-spacing: 0.02cm; border-bottom: 1px solid #aaa; }

/*--------------------
the navigation
----------------------*/

#topnav { clear: both; width: 100%; height: 26px; padding: 0; text-align: center; }
#topnav p.menu { display: none; }
#topnav ul.mainnav { list-style: none outside; width: 90%; margin: 0 auto; padding: 0; background: transparent; text-align: left; }
#topnav ul.mainnav li, #topnav ul.mainnav li.active { float: left; display: inline; margin: 0 1.6% 0 0; padding: 0; }
#topnav ul.mainnav li a { color: #707070; text-decoration: none; text-transform: uppercase; }
#topnav ul.mainnav li a.active, ul.mainnav li a.hilite { color: #707070; font-weight: bold; text-decoration: none; }
#topnav ul.mainnav li a:hover { color: #555; }

@media screen and (max-width: 760px) { 
#topnav { position: absolute; top: 0; left: 0; z-index: 99; padding: 0; }
#topnav p.menu { display: block; text-align: center; margin: 0; padding: 6px 0;
			cursor: pointer; background: #333; color: #f4f4ec; opacity: 0.9; }
#topnav ul.mainnav { width: 100%; padding: 4px 0 0; background: #f4f4ec; }
ul.mainnav li { width: 100% !important; display: block; margin: 2px auto; padding: 8px 0 !important; 
			text-align: center; background: #f4f4ec; }
ul.mainnav li a { text-transform: uppercase; margin: 2% auto; color: #707070; line-height: 100%; }
ul.mainnav li a:hover  { text-transform: uppercase; margin: 2% auto; color: #555; }
ul.mainnav li a.active, ul.mainnav li a.hilite { color: #555; }
ul.mainnav li:hover  { background: #ccc; opacity: 1; }
}

/*--------------------
the main content area
----------------------*/

#content { clear: both; width: 100%; position: relative; margin: 3.6em auto 0; padding: 0; }

.maintext { width: 90%; margin: 0 auto 12px; text-align: left; }
@media screen and (max-width: 760px) { .maintext { padding-top: 1em; margin-left: 3%; font-size: 80%; } }
@media screen and (max-width: 480px) { .maintext { padding-top: 1em; margin-left: 3%; font-size: 85%; } }

img.frontimg { width: 90%; margin: 0 auto; }

.intro { display: inline; }
.trigger { cursor: pointer; display: inline; clear: right; margin-left: 12px; text-decoration: underline; }
p.dist { margin: 36px 0; }
p.galdist { margin: 48px 0; }

div.unit { padding: 24px 0 24px; }
a.showitem { margin: 0 0 12px 0; color: #f60; }

#notification { display: none; clear: both; width: 100%; height: 26px; padding: 0 5%; margin: 36px 0 12px; text-align: right; }

h3.years { /*display: none;*/ margin: 0 0 12px; letter-spacing: 0.2cm; font-weight: normal; }
h3.years span { /*display: none;*/ }
div.imgbox { display: inline; float: left; margin: 6px 36px 30px 0; }
img.gallery { height: 9em; }
@media screen and (max-width: 760px) { img.gallery { height: 8em; } }
@media screen and (max-width: 480px) { img.gallery { height: 5em; } }
span.note { display: none; font-size: 80%; }
p.indexnote { text-align: center; font-size: 70%; margin-top: 9px; }

/*--------------------
the footer section
----------------------*/

#footer { width: 100%; clear: both; color: #707070; margin: 0; padding: 0; }
#infooter { width: 90%; margin: 0 auto; padding: 0.2% 0 1.2%; background: transparent; text-align: left; }

/*--------------------
the general settings
----------------------*/

hr { margin: 1em 0 1.2em; width: 90%; height: 1px; color: #707070; background-color: transparent; border-top: 1px solid #666; }

acronym { padding: 0 2px; border-bottom: 1px solid #707070; }

.c { text-align: center; }
.l { text-align: left; }
.r { text-align: right; }
.j { text-align: justify; }


/*--------------------
the table section
----------------------*/

/*--------------------
the form section
----------------------*/


form {  margin: 1em 0 0 0; padding: 0; }
fieldset { width: 60%; padding: 0; margin: 0; background: transparent; }

fieldset p, fieldset label { display: block; padding: 0; margin: 0; text-align: left; font-size: 80%; color: #707070; }
fieldset div.required { float: right; width: 16%; padding: 0; margin: 0.4em 0 0; text-align: right; }
input, select, textarea { display: block; width: 80%; margin: 0 0 1% 0; padding: 0.2em 0 0.2em 0.05em; background: transparent; color: #707070; border: 1px solid #707070; }
input.last {  }

select, option { width: 80.5%; background: transparent; color: #707070; padding: 0.1em 0 0.1em 0.05em; }
option { width: 100%; padding-left: 3px; background: transparent; text-align: left; margin: 0 0 4px 0; }

div.checkboxes { display: block; width: 100%; padding: 0; margin: 0; }

fieldset label.box1, fieldset label.box2 { float: none; display: inline; padding: 0; margin: 0 0 3% 0; text-align: right; font-size: 80%; color: #707070; }
fieldset label.box2 { padding: 0; margin: 0 0 3% 0; }
input.box { display: inline; width: 15px; margin: 1em 1em 1em 0.5%; border: none; vertical-align: middle; }
input.button { display: block; width: 36%; margin: 4% 0 1% 44.2%; padding: 1em 2em; color: #fff; background: #707070; text-transform: uppercase; text-decoration: none; box-shadow: 0.05em 0.05em 0.1em #707070; border: none; cursor: pointer; }

@media screen and (max-width: 760px) { 
form {  margin: 1em 0 0 0; }
fieldset { width: 90%; }
fieldset p, fieldset label { font-size: 110%; }
fieldset label.box1 { margin: 0 0 1% 0; }
fieldset label.box2 { margin: 0 0 1% 8%; }
input, select, textarea { width: 70%; margin: 0 0 1% 0; padding: 0.5em 0 0.5em 0.05em; }
select, option { width: 70.5%; padding: 0.2em 0 0.2em 0.05em; }
option { width: 100%; padding-left: 3px; margin: 0 0 4px 0; }
div.checkboxes { font-size: 140%; }
input.button { width: 36%; margin: 4% 0 3% 34%; }
}
@media screen and (max-width: 480px) { 
fieldset { width: 100%; }
fieldset div.required { width: 28%; }
input, select, textarea { width: 68%; }
select, option { width: 68.5%; padding: 0.1em 0 0.1em 0.05em; }
input.button { width: 36%; margin: 0 0 3% 34%; }
}