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

	Template:		42
	Datum: 			19.12.2012
	Version: 		1.0
	Homepage:		http://freietemplates.de/
	
----------------------------------------*/

/*------ General ---------------------- */
body {
background-color:#fff;
font-size:12px;
font-family: 'Trebuchet MS', sans-serif;
line-height:22px;
color:#656565;
padding:0;
margin:0;
}

* {
padding:0;
margin:0;
outline:none;
}

a { color:#17b3e6;}
a:hover { color: #1a8bb0;
text-decoration:none;}

img {
border:none;
}

/*------ Überschriften ---------------------- */
h1{
font-size:28px;
margin:10px 0;
padding:0 0 5px 0;
border-bottom:1px dashed #fff;
color:#000;
}

h2{
font-size:16px;
margin:10px 0;
color:#000;
}

h3{
font-size:13px;
margin:10px 0;
color:#000;
}

/*------ Struktur ---------------------- */
#wrapper {
width:980px;
margin:30px auto;
}

#sidebar {
float:right;
width:180px;
position: fixed; right:100px;
}

#left {
float:left;
width:680px;
}

#leftfoto {
float:left;
width:700px;
}

#logo  {
font-size:28px;
font-weight:bold;
color:#ffe139;
text-decoration:none;
}

#logo:hover {
color:#ffe761;5px
}

/*------ Topnavigation ---------------------- */
#topnav {
width:980px;
height:50px;
padding:0;
margin:20px 0 0 0;
border-top:1px solid #17b3e6;
border-bottom:1px solid #17b3e6;
text-transform:uppercase;
}

#topnav ul {
margin:0;
padding:0;
list-style:none;
}

#topnav ul li {
float:left;
}

#topnav ul li a {
display:block;
height:34px;
padding:16px 20px 0;
color:#000;
font-weight:bold;
text-decoration:none;
}

#topnav ul li a:hover {
color:#17b3e6;
}

/*------ Menü in der Sidebar ---------------------- */
.menuhead {
font-size:15px;
font-weight:bold;
letter-spacing:1px;
padding:0;
margin:15px 0 5px 0;
}

.menu ul {
list-style-type:none;
}

.menu ul li {
height:27px;
width:220px;
border-bottom:1px solid #e4e4e4;
}

.menu ul li:first-child {
border-top:1px solid #e4e4e4;
padding:0 0 1px 0;
}

.menu ul li a {
font-size:12px;
display:block;
width:215px;
height:22px;
text-decoration:none;
padding:4px  0 0 5px ;
margin:1px 0 0 0;
}

.menu ul li a:hover {
background-color:#f1f1f1;
text-shadow:1px 1px 0 #fff;
font-weight:bold;
}

select {background-color:#17b3e6;}

option[value] {letter-spacing: 2px;font-weight: bold;}
 
optgroup[label='2016'] {background: #87CEFA;}

optgroup[label='2015'] {background: #BFEFFF;}
     
optgroup[label='2014'] {background: #A4D3EE;}
            


/*------ Content ---------------------- */
#content {
overflow:hidden;
background-color:#fff;
color:#000;
width:980px;
height:auto;
text-align:justify;
padding:10px;
}
/*------ Content Foto ---------------------- */
#contentfoto {
overflow:hidden;
background-color:#fff;
color:#000;
width:980px;
height:auto;
text-align:justify;
padding:10px;
}

/*------ Footer ---------------------- */
#footer {
clear:both;
border-top:1px solid #d2d2d2;
border-bottom:4px solid #17b3e6;
color:#000;
font-size:11px;
width:960px;
height:80px;
margin:0 auto 0;
padding:10px 10px;
}


div.imageHold {
  padding: 5px 10px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHold div {
  float: left;
  width: 190px;
  height: 260px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 20px;
}

div.imageHold img {
  width: 190px;  /* wir skalieren das große bild auf die kleine größe */
  height: 260px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHold img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -15px;  /* hier genau so */
  width: 520px;       /* die weite beim vergrößern */
  height: 800px;      /* die höhe beim vergrößern */
}


div.imageHoldquer {
  padding: 5px 10px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHoldquer div {
  float: left;
  width: 260px;
  height: 190px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 20px;		/*20*/
}

div.imageHoldquer img {
  width: 260px;  /* wir skalieren das große bild auf die kleine größe */
  height: 190px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHoldquer img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -140px;  /* hier genau so */
  width: 800px;       /* die weite beim vergrößern */
  height: 520px;      /* die höhe beim vergrößern */
}

div.leftneu {
  margin-left:20px;
  margin-right:50px;
}




div.imageHoldnew {
  padding: 5px 10px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}

div.imageHoldnew div {
  float: left;
  width: 190px;
  height: 260px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 20px;
}

div.imageHoldnew img {
  width: 190px;  /* wir skalieren das große bild auf die kleine größe */
  height: 260px; /* um verpixelung beim vergößern zu verhindern       */
}

div.imageHoldnew img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -500px;  /* hier genau so */
  width: 520px;       /* die weite beim vergrößern */
  height: 800px;      /* die höhe beim vergrößern */
}