/**
 * 
 * (de) Stylesheet für  (http://www.)  
 *
 * @creator       Hans Siersleben (http://www.schoenundneu.de)
 * @file          carolin-weise/style.css
 */
 
/**
 *  
 * ***************************************
 * Global Reset
 * --------------------------------------
 * Layout
 * Links  
 * Hauptnavigation
 * Überschriften
 * Allgemeine Textauszeichnung
 * Bilder im Content
 * Galerie
 * Clearing
 * Ausblenden
 * --------------------------------------
 * Responsive Structure
 * --------------------------------------
 * +++ knulo
 * ***************************************
 */

@media screen, projection
{

/* @section Global Reset */	
  /** 
   * (de) Erzwingen vertikaler Scrollbalken in IE8, Firefox, Webkit & Opera 
   *
   * @workaround
   * @affected IE8, FF, Webkit, Opera
   * @css-for all
   * @valid CSS3
   */

body { 
  	overflow-y: scroll; 
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.4;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}


html {
	-ms-text-size-adjust: none;
	-webkit-text-size-adjust: none;
    //overflow-y: scroll;
    font-size: 62.5%;
}

/* * { border: 1px solid orange !important; } */

/* @section Layout */



body {   	 
  	background: white;
	color: #2c2c2c;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
    font-size: 1.4rem;
}

body.zeichnungen {
	background: #e8e8e8;
}

img {
	width: 100%;
	max-width: 100%;
	width: auto; /* Prevent stretching of full-size and large-size images with height and width attributes in IE8 */
	height: auto; 
}

#wrapper {
	max-width: 1147px;
	margin: 12px 0 3em 20px;
	position: relative;
	padding-left: 12px;
}

#menu {
	/* width: 276px;  
	max-width: 24.06277244986%;*/
	width: 24.06277244986%;
	width: 220px;
	margin-top: 0px;
}

#events {
	/* max-width: 24.06277244986%; */
	width: 24.06277244986%;
	margin-top: 103px;
}
	
.info {
	margin: 0 0 2em;
}

/**
 * body.startseite {
 * 	width: 800px;
 * }
 */
 
#content {
	width: 72.9372255014%;	
	float: right;
	margin-top: 22px;
	background: transparent;
} 


body.startseite #content {
	margin-top: 26px;
}

body.kontakt #content,
body.ausstellungen #content {
	margin-top: 89px;
}

#footer {
	margin-top: 7em;
	font-size: 11px;
	font-size: 1.1rem;
	color: #8a8a8a;
}

/* --- logo */

a.logo-text { 
	display: inline-block;
	width: 220px;
	height: 50px; 
}

h1#logo { 
	background: url(../images/carolin-weise.png) no-repeat 0 24px;
	max-width: 100%; 
	}
body.zeichnungen h1#logo { 
	background: url(../images/carolin-weise-zeichnungen.png) no-repeat 0 24px; 
	}

/*
body #info-block { visibility: hidden; }
body.startseite #info-block { visibility: visible; }
*/

/*--- @section Links ------------------------------------------------------------------------*/

a { text-decoration: none; color: #8a8a8a; }
a:hover { color: #2c2c2c; }
a img { border: none; }


/* --- @section Hauptnavigation ------------------------------------------ */ 

#nav ul { 
	padding: 0; 
	margin: 0; 
	list-style: none; 
	position: relative; 
	width: 100%;
}

#nav { 
	margin: 1.8em auto; 
}

#nav ul li a { 
	display: block;  
	width: auto;
	margin-right: 1em; 
	text-decoration: none;
	font-size: 14px; 
	font-size: 1.4rem;
	color: #8a8a8a !important; 
	text-rendering: optimizeLegibility;
}

#nav li li a {
	font-size: 14px !important ;
	font-size: 1.4rem !important;
}

#nav ul li  { 
	float: left; 
}

#nav ul ul  { 
	position: absolute; 
	padding-top: 0.5em;
	width: auto;                      
	left: -999em;  
	 
}

#nav ul li.parent0 ul,
#nav ul li.current ul { 
	left: auto !important ; 
}

#nav ul li a:hover,
a:hover {
	color: #2c2c2c !important; 
}

#nav  li.parent0 > a,
#nav  li.current a,
#nav li a:hover {
	color: #2C2C2C !important; 
}

#nav ul li ul li {
	float: none;
	line-height: 1.95em; 
}

#nav ul ul a {
	color: #8a8a8a ;
	font-size: 12px;
	font-size: 1.2rem;
}

/*--- @section Überschriften ------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0 0 0.25em 0;
	text-rendering: optimizeLegibility;
}

/**/
h1#logo {
	font-size: 28px;
	font-size: 2.8rem; 
	height: 57px;
	min-width: 207px;
	line-height: 70px;
	padding: 0;
}

h1#logo a { color: #2c2c2c; }

#content h1 {
	text-transform: uppercase;
	margin: 10px 0 2.5em;
}



.info h2 {
	text-transform: uppercase;
	font-size: 14px;
	font-size: 1.4rem;
}

body.zeichnungen h2 {
	margin-bottom: 0.6em;
	font-size: 14px;
	font-size: 1.4rem;
}

#content h2 {
	margin: 2.5em 0 10px;
	text-transform: uppercase;
}

/* --- @section Allgemeine Textauszeichnung ------------------------------------------ */

p { 
	font-size: 14px !important;
	font-size: 1.4rem !important;
	margin-bottom: 0.4em;
	text-rendering: optimizeLegibility;
}
                        
p span { color: #8b8b8b; }

#footer p, #footer p a { color: #8A8A8A; }
#footer p a:hover { color: #2c2c2c; }

hr.trenner {
	border: none;
	border-top: 1px solid #2c2c2c;
	margin: 1.2em 0;
	height: 0px;
}

body.cv p img {
	padding-bottom: 20px;
}

/* --- @section Bilder im Content ------------------------------------------ */

p > img {
	display: block;
	/*margin: 1.4em auto; */
	margin: 0 0 1.4em;
}

/* --- @section Ausstellungen ---------------------------------------------- */


body.ausstellungen table td:first-of-type {
	padding-right: 3em;
}

td, td p {
	font-size: 14px !important;
	font-size: 1.4rem !important;
}

td {
	padding-bottom: 0.3em;
}


/* --- @section Galerie ------------------------------------------ */

img.gallery_pic {
	position: relative;
	margin-bottom: 1em;
	max-width: 100% !important;
	height: auto;
}

#gallery_pic_frame {
	float: left;
}

#gallery_pic_title {
	position: relative;
	font-size: 11px;
	font-size: 1.1rem;
	color: #999;
}

#gallery_thumbs {
	float: right !important;
}

#gallery_thumbs table, #gallery_thumbs tr, #gallery_thumbs td {
	border-collapse: separate;
}

#gallery_thumbs td {
	width: 49px;
	height: 49px;
	border: 4px solid #e8e8e8;
}

body.work #gallery_thumbs td,
body.malerei #gallery_thumbs td {
	border: 4px solid white;
}	

#gallery_thumbs td:hover {
	border: 4px solid #00281d !important;
}

/* +++ knulo 2012-06-14 */
.curr_thumb {
	border: 4px solid #003d31 !important;
}
/* --- knulo 2012-06-14 */

#gallery_pic_title {
	width: 310px;
	max-width: 310px;
}

/**
 * table,
 * table tr, 
 * table td,
 * #gallery_pic {
 * 	width: 100% !important;
 * 	max-width: 100%;
 * 	border: 1px solid orange;
 * }

 * #gallery_pic img {
 * 	width: 100% !important;
 * 	max-width: 100% !important;
 * 	width: auto !important; 
 * 	height: auto !important; 
 * }
 */


/* --- @section Clearing ------------------------------------------ */

.gallery_pic_frame:after,
.gallery_pic_title:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */


/* --- @section Ausblenden ----------------------------------------------- */

h2.logo,
body.menulevel1 #content > h2,
.skiplinks {
	position: absolute;
	left: -9999em;
	visibility: hidden;
}  
}


/* @section Responsive Structure
----------------------------------------------- */

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	


}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {



}

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

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

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

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

/* Desktops and laptops ----------- */
@media only screen
and (max-width : 1082px) {
	
body.startseite #content {
		float: none !important;
		position: relative;
		width: 100%;
		margin-top: 10px;
}

#events {
	width: 100% !important;
	margin-top: 31px;
}
}

/* 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 */
}



@media screen and (max-width: 849px) {
	
h1#logo { 
	background: url(../images/carolin-weise.png) no-repeat 5px 0;
	max-width: 100%; 
	}
body.zeichnungen h1#logo { 
	background: url(../images/carolin-weise-zeichnungen.png) no-repeat 5px 0; 
	}	

#menu {  
	padding-top: 0.5em;
	width: 100% !important;                      
	left: auto; 
}

#nav { 
	margin: 0 auto !important; 
}

#nav ul li a { 
	padding-left: 0.4em;
}

#nav ul li { 
	padding: 0;	 
	margin: 0; 
	list-style: none; 
	width: 100% !important;
	float: none;
}

#nav ul ul  { 
	position: inherit; 
	padding-top: 0.5em;
	width: auto;                      
	left: 0; 
}

#nav ul li a {
	color: #8a8a8a !important;
	font-size: 2.5rem;
}

#nav ul li ul li a {
	color: #8a8a8a !important;
	font-size: 2.2rem;
}

#nav ul li {
	margin-bottom: 1em;
}

#nav ul li ul li {
	margin-bottom: 0.3em;
}

#nav ul ul  { 
	position: absolute; 
	padding-top: 0.5em;
	width: auto;                      
	left: -999em;  
	 
}

#nav ul li.parent0 ul,
#nav ul li.current ul { 
	position:  relative !important;
	left: auto !important ; 
}

/* --- Navi --- */
#nav { 
	margin-top: 0 !important; 
	width: 98%;
}

#nav ul, #nav li { 
	width: 100%; 
	line-height: 2em;	
}

#nav ul li {
	border-bottom: 1px solid black;
}

#nav li li {
	border-bottom: 0px solid black;
}

#nav ul li a {
	color: #8a8a8a;
	font-size: 2rem;
	line-height: 2em;
	height: 2em;
	display: block;
	width: 100%;
}

#nav ul li ul li a {
	color: #8a8a8a;
	font-size: 2rem !important;
	line-height: 1.6em;
	height: 1.6em;
}

#nav li.current a,
#nav li.current a:hover {
	background: #341c12;
	color: white !important;
}

#nav ul li {
	margin-bottom: 0;
}

#nav ul li ul li {
	margin-bottom: 0.3em;
}

/* --- Navi --- */


/* ------------------------------------- */

#content {
		float: none !important;
		position: relative;
		width: 100%;
		margin-top: 10px !important;
}

#events {
	width: 100% !important;
	margin-top: 31px;
}

body.zeichnungen h2,
.info h2 {
	font-size: 2.2rem;
}

.info p {
	font-size: 2rem;
}

p {
	font-size: 2rem;
}

h1 {
	font-size: 2.4rem;
	margin-bottom: 1em;
}
#footer, #footer a {
	font-size: 1.6rem;
	line-height: 1.8;
}
}	


@media screen 
and (min-width: 320px) 
and (max-width: 696px) {


#wrapper {
	padding-left: 5px !important;
	padding-right: 5px !important;
	margin-left: 3px;
}	

h1#logo {
	line-height: 32px;
	height: 32px;
	margin: 0;
	margin-bottom: 1em;
	padding: 0 !important;
}

h1#logo a {
	display: block;
	font-size: 28px;
	font-size: 2.8rem;
	min-width: 207px;
	line-height: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid black;
	margin-bottom: 0 !important;
}

h1#logo a { 
	font-size: 34px;
	font-size: 3.4rem; 
}




.info h2 {
	font-size: 2.4rem;
}

.info p {
	font-size: 2rem;
}

p {
	font-size: 2rem;
}

h1 {
	font-size: 2.4rem;
	margin-bottom: 1em;
}
#footer, #footer a {
	font-size: 1.6rem;
	line-height: 1.8;
}


img.gallery_pic {
	position: relative;
	margin-bottom: 1em;
	max-width: 100% !important;
	width: 100%;
	height: auto;
}

#gallery_thumbs {
	float: left !important;
	margin-top: 2em;
}

}

























/* +++ knulo 2012-05-17 */
#sitemap ul {
	list-style: disc;
}
#sitemap ul ul {
	list-style: circle;
}
#sitemap ul ul ul {
	list-style: square;
}
#sitemap li {
	margin-left: 1.5em;
}
/*
#gallery_pic_frame {
	border: 1px solid red;
}
#gallery_pic_title {
	border: 1px dotted blue;
}

#gallery_pic {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}
#gallery_pic img {
	text-align: center;
	vertical-align: middle;
}
*/
#gallery_thumbs {
	position: relative;
	float: left;
	padding-left: 20px;
}
#gallery_thumbs td {
	padding: 5px;
	text-align: center;
	vertical-align: middle;
}
#noscript {
	margin-top:200px;
}
/* --- knulo 2012-05-20 */
/* +++ knulo 2012-06-03: externe Links */
a[href ^="http://"], a[href ^="https://"], a[href ^="www."] {
    background: url(../images/lnk_ext.gif) center left no-repeat;
    padding-left: 15px;
}
#footer a[href ^="http://"], #footer a[href ^="https://"], #footer a[href ^="www."] {
    background: none;
    padding-left: 0;
}
/* --- knulo 2012-06-03