@charset "UTF-8";


/* Reset (Inspired by E. Meyers)

	Mehr dazu: http://www.elmastudio.de/tipps-und-tools/tipps-und-tricks-zum-css-reset/

====================================================== */

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; }

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

body {line-height: 1; }
ol, ul { list-style: none; }

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

hr {
  	border: 0;
	margin: 10px 0 0 0;
  	width: 100%;
  	color: #CCC;
	background-color: #CCC;
	height: 1px;
	}


/* Basis
====================================================== */


/* =====================================
   Font
   ==================================== */

@font-face {
   font-family: Pontano Sans, Arial, sans-serif;
}


html {
min-height: 100%;
}


body {
margin:0;
padding:0;
color:#656565;
text-align: left;
font-family: Pontano Sans, Arial, sans-serif;
background: #FFF;
}


/* =====================================
   Links
   ==================================== */

.link {
color:#59cec7;
text-decoration:none;

-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

link:hover { color:#025f6d; }


a {
color:#59cec7;
text-decoration:none;

-webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
     -o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
}

a:hover { color:#025f6d; }

header a { outline:none; border:none; }
header a:hover { color:#59cec7; }

p a:after { content:""; }
p a[rel="external"]:after { content:" ↑"; }
.portfoliolink { color:#009999; text-align:right;
}


/* =====================================
   Sonstiges
   ==================================== */

::selection { background: #c5e7e8; }
::-moz-selection { background: #c5e7e8; }



/* Grid 960 / 6
====================================================== */

.container 			{ margin: 0 auto; width: 960px; clear:both; }

.container .column	{ float: left; display: inline; margin-right: 30px; }
.row                { margin-bottom: 20px; }
.rowtwo             { margin-bottom:#e0e0e0 3px solid; }

.column.last    	{ margin-right: 0; }


/* Base Grid */
.container .one.column    { width: 135px; }
.container .two.column    { width: 300px; }
.container .three.column  { width: 465px; }
.container .four.column   { width: 630px; }
.container .five.column   { width: 795px; }
.container .six.column	  { width: 960px; }
.container .six.column.last	  { width: 960px; margin-right: 0; }
.container .one.column.last	  { width: 135px; margin-right: 0; }

#back {
width: 960px;
height: 490px;
margin-right:0;
background-image:url(../img/back.jpg);
align:center; 
}

#backvita {
width: 960px;
height: 490px;
margin-right:0;
background-image:url(../img/backvita1.jpg);
align:center; 
}

#wrapper {
background:#FFF;
align:center;
}



/* Navigation
====================================================== */

nav ul {
list-style: none;
margin: 50px 0 0 0; 
padding: 0;
}

nav li {
float: left;
color:#000000;
margin: 0 5px 0 0;
font: 15px/16px Codystar, Helvetica, sans-serif;
}

nav li a {
padding: 5px 10px;
text-decoration: none;
color: #666;
background: #fff;
-webkit-border-radius: 4px;
   -moz-border-radius: 4px;
	    border-radius: 4px;

-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
	}

/*	:focus für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste
	:hover für Elemente, während der Anwender mit der Maus darüber fährt */
nav li a:hover,
nav li a:focus {
background: #006666;
color:#fff;
border:none;
outline:none;
}

/* :active für gerade angeklickte Elemente */	
nav li a:active {
background: #025f6d;
}
	
.active {
color: #fff;
background: #025f6d;
}								


/* ========================================== Index-Navi ===================================================*/

.box {
float:left;
width:280px;
height:280px;
margin:0 10px 20px 0;
padding:10px;
}

.box last {
float:left;
width:280px;
height:280px;
margin:0 0 10px 0;
padding:10px;
}


#one{
background-image:url(../img/ausw_001.jpg);
}

#two {
background-image:url(../img/ausw_002.jpg);
}

#three {
background-image:url(../img/ausw_003.jpg);
}



#one:hover {
background:#317265;
color:#FFF;
}


#two:hover {
background:#317265;
color:#FFF;
}

#three:hover {
background:#317265;
color:#FFF;
}

.box:hover {
background:#003333;
color:#FFF;
}

figure a {
color:#FFFFFF;
}

figure a:hover {
color:#FFFFFF;
}


.index{ 
font: normal 24px/48px Codystar, Arial, sans-serif;
font-color: #FFF; 
text-align: center;
position: relative;
float: left;
margin-left: -310px; 
opacity: 0;
width: 300px;
height: 300px;
background: #317265;
visibility: hidden;
-webkit-transition: all 0.2s ease;
-moz-transition:    all 0.2s ease;
-o-transition:      all 0.2s ease;
}

figure:hover figcaption{
opacity: 1;
visibility: visible;
-webkit-animation: cssAnimation 0.2s 1 ease-in;
-moz-animation: cssAnimation 0.2s 1 ease-in;
-o-animation: cssAnimation 0.2s 1 ease-in;
}

	



/*========================================== Portfolio div-box =======================================*/
.bild {
line-height:30px;
}

.portbox {
float:left;
width:280px;
height:180px;
margin:0 10px 10px 0;
padding:10px;
border:#333333;
border-collapse:collapse;
background:#c1f9e5;

-moz-transition: all 0.8s; 
-webkit-transition: all 0.8s;  
-ms-transition: all 0.8s;  
-o-transition: all 0.8s;  
transition: all 0.8s; 
opacity:1;
filter:alpha(opacity=100);
}


.portbox:hover {
opacity:0.5;
filter:alpha(opacity=50);
}​		


.portbox last {
float:left;
width:280px;
height:180px;
margin:0 10px 10px 0;
padding:10px;
border:#333333;
border-collapse:collapse;
}



#malerei {
background-image:url(../img/nav/malerei.jpg);
}

#radierung {
background-image:url(../img/nav/radierung.jpg);
}

#zeichnung {
background-image:url(../img/nav/zeichnung.jpg);
}

#mixed {
background-image:url(../img/nav/mixed.jpg);
}

#books {
background-image:url(../img/nav/books.jpg);
}

#illu {
background-image:url(../img/nav/illu.jpg);
}


.portfolio { 
font: normal 24px/48px Codystar, Arial, sans-serif;
text-align: center;
position: relative;
float: left;
color: #FFF; 
margin-left: -310px; 
opacity: 0;
width: 300px;
height: 200px;
background: #ddeded;
visibility: hidden;
-webkit-transition: all 0.8s ease;
-moz-transition:    all 0.8s ease;
-o-transition:      all 0.8s ease;
} 

.portfolio h4 {
font-size: 24px;
top: 45%;  }


/*figure:hover figcaption{
opacity: 1;
visibility: visible;
-webkit-animation: cssAnimation 0.8s 1 ease-in;
-moz-animation: cssAnimation 0.8s 1 ease-in;
-o-animation: cssAnimation 0.8s 1 ease-in;
}*/




/* Nicolas Gallagher's micro clearfix */
.row:before, .row:after, .clearfix:before, .clearfix:after { content:""; display:table; }
.row:after, .clearfix:after { clear: both; }
.row, .clearfix { zoom: 1; }
	 
	 
/* Header
====================================================== */	 



/* Typography
====================================================== */

h1 { font-family: 'Raleway', font-size:44px; color:#009999; letter-spacing: 0.8em; word-spacing: 0.8em; text-transform:uppercase; margin: 0 0 0 0; }
h1 a { font-family: 'Raleway', font-size:44px; color:#009999; letter-spacing: 0.8em; word-spacing: 0.8em; text-transform:uppercase; margin: 0 0 0 0; }
h2 { font-family: 'Pontano Sans'; font-size:24px; line-height:32px; margin: -10px 0 -18px 0; padding: 5px 0; color:#025f6d; }

h3 { font-family: 'Pontano Sans'; font-size:16px; line-height:20px; margin: 17px 0 0 0; padding: 5px 0; color:#025f6d; }
h4 { font-family: 'Pontano Sans'; font-size:14px; line-height:18px; margin: -5px 0 -10px 0; padding: 5px 0; color:#025f6d; }
h5 { font-family: 'Pontano Sans'; font-size:14px; line-height:20px; margin: 10px 10px 10px 20px; padding: 5px 0; color:#025f6d; }
h5 a{font-color: #59cec7;}
h6 { font-family: 'Pontano Sans'; font-size:8px; line-height:12px; margin: 0 0 0 0; padding: 5px 0; color:#656565; text-align:right; }

figure h3 {font-family: Codystar, Helvetica, sans-serif; text-align: center; margin-top:50%; position:relative; top:-18px; font-size: 36px; color:#FFF; }
figure h4 {font-family: Codystar, Helvetica, sans-serif; text-align: center; martin top:50%; position: relative; top:-18px;font-size: 36px; color:#000000; }

#lost { font-family: 'Pontano Sans'; margin:10px 0 10px 0; font-size:14px; line-height:18px; color:#656565; text-shadow: 1px 1px #FFF; }
#georg p { font-family: 'Pontano Sans'; margin:10px 0 10px 0; font-size:14px; line-height:18px; color:#656565; text-shadow: 1px 1px #FFF; }
#roni p { font-family: 'Pontano Sans'; margin:10px 0 10px 0; font-size:14px; line-height:18px; color:#656565; text-shadow: 1px 1px #FFF; }
#cut p { font-family: 'Pontano Sans'; margin:10px 0 10px 0; font-size:14px; line-height:18px; color:#656565; text-shadow: 1px 1px #FFF; }

h11 {font-family: Codystar, Helvetica, sans-serif; text-align: center; position: relative; margin-left: 30px; top:40%; font-size: 36px; color:#FFF; }




header h2 { color:#000; font-family:'Codystar'; font-size:16px; line-height:15px; margin: 0; padding:0; border:none; text-transform:none; spacing:0,8em; }
header h2 a{ color:#000; font-family:'Codystar'; font-size:16px; line-height:15px; margin: 0; padding:0; border:none; text-transform:none; spacing:0,8em; }

/* Beispiele für weitere Formatierungen */
h3 + p { margin-top:0px; }
h3 + h4 { margin-top:10px; }

p { margin:10px 0 10px 0; font-size:14px; line-height:18px; color:#656565; text-shadow: 1px 1px #FFF; }
p.minor { margin:10px 0 10px 0; font-size:11px; text-align:left; line-height:19px; color:#656565; text-shadow: 1px 1px #FFF; }

.small {font-size:10px; line-height:16px; text-shadow:none;}


/* Button
====================================================== */

button {
background:#ddeded;
color:#025f6d;
font-size:12px;
text-decoration: none;
border:none;
width: 180px;
font-family: Pontano Sans, Helvetica, sans-serif;

-webkit-border-radius: 3px;
   -moz-border-radius: 3px;
	    border-radius: 3px;

-webkit-transition: all 0.2s ease-in;
   -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
	}


button:hover,
button:focus {
background: #006666;
color:#fff;
border:none;
outline:none;
}


button:active {
background: #025f6d;
}


dt {
width:430px;
margin:10px 0 20px 0;
}

dd {
display:none;
margin:0 0 15px 0;
float:left;
width:960px;	
}

#button {
float:left;
display:block;
height:18px;
width:17px;
text-indent:-9999px;
}

.closed { background:url(button.png) left no-repeat; }

.open { background:url(button.png) right no-repeat; }





/* Footer
====================================================== */

footer ul li a {
font: Pontano Sans;
font-size:11px;
color: #656565;
}

footer ul li {
display: inline; }

footer ul a:hover {color:#59cec7; }