/* Stylesheet für www.buecher-drucken.de */



* {

	 font-size: 100%;

	 padding:  0; margin:  0;

}

body {

	color: Black; /* Schriftfarbe */

	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

	font-size: 75%; /* Schriftgröße war 68,75%*/

	line-height: 120%;

}

#wrapper {

	position: relative;

	color: Black;

	background-color: White;

	/* width: 95%; Breite des Inhaltbereichs */

	/* min-width: 750px; Breite des min Bereichs */ 

	/* max-width: 960px;	Breite des Inhaltbereichs war width: 960px; */

	margin-top: 10px;

	margin-right: auto; /* Abstand rechts automatisch */

	margin-bottom: 20px;

	margin-left: auto;

	border-left: thin solid Silver;

	border-right: thin solid Silver;

	border-bottom: thin solid Silver;

}

/* =========================================  Kopfbereich =========================================== */



#kopfbereich {

	position: relative; /* positioniert, aber im Fluß */

	margin-bottom: 0px;

	background-image: url(images/logo-teneriffa.jpg);

	background-position: top left;

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 15px;

	padding-left: 10px;

	border-bottom: 5px solid #FF8C00;

	height: 160px;

}

/* Verschachtelter Selektor: nur die Grafik im Kopfbereich */



#kopfbereich img {

	padding: 0px 10px 0px 10px;

	border: 0;

	margin: 5px;

}

#kopfbereich p {

	/*    position: absolute; */

	font-weight: normal;

	margin-bottom: 0px;

	margin-left: 5px;

	padding: 5px 5px 5px 10px;

	color: #E3E3E3;

}

#kopfbereich h1 {

	/*    position: absolute; */

	margin-bottom: 0px;

	margin-left: 350px;

	padding: 5px 5px 5px 10px;

	color: #D3D3D3;

	font-size: 150%;

	font-weight: bold;

	line-height: 120%;

}

#kopfbereich p {

	margin-left: 350px;

	font-size: 100%;

}

/* =========================================  Navibereich 1 =========================================== */

#navigation {

	background-image: url(images/navi-hintergrund.gif);

	background-repeat: repeat-x;

}

#navigation ul {

	padding: 8px 5px 10px 5px;

	margin:  0;

}

#navigation li {

	display: inline;

	list-style: none;

	padding:  5px; margin:  0px;

}

#navigation a {

	text-decoration: none;

	color: #F9F9F9;

}

#navigation a:hover {

	font-weight: normal;

	color: #FF8C00;

}





#startseite .navi10 a {	font-weight: bold;color: #FF8C00;}

#abibuch-kalkulator .navi34 a {	font-weight: bold;color: #FF8C00;}



#buchdruck .navi35 a {	font-weight: bold;color: #FF8C00;}



#kalkulator .navi50 a {	font-weight: bold;color: #FF8C00;}

#broschuere .navi55 a {	font-weight: bold;color: #FF8C00;}



#kontakt .navi200 a {	font-weight: bold;color: #FF8C00;}



#navibereich a:active {	

	font-weight: bold;color: #FF8C00;

	margin-left:-4px;

	margin-top:2px;

	margin-right:0px;

	margin-bottom:2px;

	padding: 0px 5px 5px 5px;

	height:8px;

	background-image: url(images/bullet-aktiv.gif);

	background-repeat: no-repeat;

}



/* =========================================  Sidebar =========================================== */



#sidebar {

	position: absolute;

	right: 0;

	background-image: url(http://www.copyhouse.de/images/navi2.jpg);

	background-repeat: repeat-x;

	width: 157px;

	height: 950px; /* Höhe, damit die rechte Spalte nicht nach unten rutscht */

	margin: 0px 0px 5px 3px;

	padding: 0px 5px 5px 10px;

	border-left: thin solid #C8C8C8;

}

#sidebar h2{

	margin: 10px 0px 8px 0px;

	padding: 10px 0px 8px 3px;

	color: Gray;

	font-family: "MS Sans Serif", Geneva, sans-serif;

	font-size: 130%;

	font-weight: bold;

	border-bottom: 1pt dotted #C8C8C8;

}

.mehr {

	text-align: right;

	font-weight: bold;

	font-size: x-small;

	font-family: Arial, Helvetica, sans-serif;

}



/* =========================================  Textbereich =========================================== */

#textbereich {

	background: White;

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 0px;

	padding-left: 5px;

	margin: 10px 175px 0px 0px;

}

#textbereich1 {

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 0px;

	padding-left: 5px;

	margin: 0px 0px 0px 0px;



}

.bildlinks {

	float:left; 

	padding: 5px; /* Abstand zwischen Bild und Rahmen */

	border: 0px; /* Der Bilderrahmen */

	margin-right: 10px; /* Abstand zwischen Rahmen  und Text */

   margin-bottom: 5px; /* Abstand nach unten */

}

.bildrechts {

	float:right; 

	padding: 5px 5px 5px 5px; 

	border: 0px; 

   margin: 0px;

}



/* =========================================  Fußbereich =========================================== */

#fussbereich {

	clear: both;

	border-top: 5px solid #FF8C00;

	background-image: url(http://www.copyhouse.de/images/footer-bild.gif);

	background-repeat: repeat-x;

	color: #6A0000;

	padding-top: 10px; /* innenabstand oben, unterhalb Linie */

	margin-top: 20px; /* Außenabstand oben, oberhalb Linie */

	margin-bottom: 0px;

}

address {

	text-align: center; /* zentrieren */

	font-size:  80%; /* etwas kleiner */

	font-style:  normal; /* normale Schrift, nicht kursiv */

	letter-spacing:  1px; /* Abstand zwischen den Buchstaben */

	line-height:  1.5em; /* Zeilenabstand */

}





/* =========================================  Tabellen =========================================== */

td {  /* Abstand des Tabelleninhaltes zum Tabellenrand */

	padding: 3px;

}

thead {

	background-color: #0096d9; /* alte Farbe #6AD0FF ==== */

	color: white;

}

tfoot {

	background-color: #F2FBFF; /* alte Farbe #E1F6FF ==== */

}

tr.gerade {

	background-color: #D5EDC5; /* alte Farbe #E7F88B ==== */

}

tr.farbe {

	background-image: url(http://www.copyhouse.de/images/tabelle2.jpg);

	background-repeat: repeat-x;

}



/* =========================================  info feld  =========================================== */

a.info {

	text-decoration: none;

	background-image: url(http://www.copyhouse.de/images/info-punkt.gif);

	background-repeat: no-repeat;

	float:right; 

	padding: 0px 5px 0px 5px;

	margin-left: 5px;

}

a.info2 {

	text-decoration: none;

	background-image: url(http://www.copyhouse.de/images/info-punkt.gif);

	background-repeat: no-repeat;

	float:left; 

	padding: 0px 5px 0px 5px;

	margin-left: 0px;

	margin-right: 5px;

}

span.infopopup {

	display: none;

}

a.info:hover span {

	display: block;

	position: absolute;

	width: 240px;

	height: auto;

	font-size: 90%;

	font-weight: normal;

	background: #ececec;

	border-left: 1px;

	border-top: 1px;

	border-right: 2px;

	border-bottom: 2px;

	border-color: #b8b8b8;

	border-style: solid;

	text-decoration: none;

	margin-left: -270px;

	margin-top: -13px;

	padding: 8px 10px 8px 10px;

}

a.info2:hover span {

	display: block;

	position: absolute;

	width: 240px;

	height: auto;

	font-size: 90%;

	font-weight: normal;

	background: #ececec;

	border-left: 1px;

	border-top: 1px;

	border-right: 2px;

	border-bottom: 2px;

	border-color: #b8b8b8;

	border-style: solid;

	text-decoration: none;

	margin-left: 10px;

	margin-top: -13px;

	padding: 8px 10px 8px 10px;

}

.hyper-info {

	

}



/* =========================================  Allgemein =========================================== */

h1 {

	font-size: 150%;

	line-height: 120%;

	color: #282AFF; /* Textfarbe */

	padding: 6px;

	margin-top: 1em;

	margin-bottom: 1em;

}

h2 {

	font-size: 120%;

	color: #FF8C00; /* Textfarbe */

	padding: 6px;

	margin-top: 1em;

	margin-bottom: 1em;

}

h4 { font-size: 75%; }

h5 {

	font-size: 110%;

	color: Black;

}

a {text-decoration: none; outline: none; /* Unterstreichung entfernen und keine Outline */ 

}	 

a:link { color: blue; 

}

a:visited { color: blue; 

}

a:hover {

	text-decoration: underline;

	color: gray;

	font-weight: bold;

}



p, ul {

	margin-top: 3px;

	margin-right: 0px;

	margin-bottom: 3px; /* Abstand nach unten */

	margin-left: 0px;

	padding: 2px 10px 2px 10px;

}

ul ul {

	margin: 0;

}

li {

	margin-top: 0;

	margin-right: 0;

	margin-bottom: 0;

	margin-left: 15px; /* Abstand von links */

	padding: 2px;

	list-style-image: url(images/list-punktgif.gif);	

}

span {

	font-size: 100%;

	color: Black; /* Schriftfarbe */

}

hr {

	margin-top: 5px;

	margin-bottom: 5px;

}

#gewicht {

	font-weight: bold;

}

em {

	padding-top: 5px;

	padding-bottom: 3px;

}

img {

	margin: 0px 10px 0px 10px;

}



/* =========================================  Index Seite Copyright  =========================================== */

#date {

	color: Gray;

	text-align: right; /* rechtsbündig */

}









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

 *                                Media Queries                                  *

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

 

/* ab einer Breite von 1230px ist die Website-Breite begrenzt auf 1230px und wird zentriert */

@media only screen and (min-width: 960px) {

    #wrapper {

        width: 960px;

        margin: 0 auto;

    }

}





@media only screen and (max-width: 780px) {

    .box.teaser {

        float: none;

        margin: 0 0 1em 0;

        width: 100%;

    }

    .box.teaser figure {

        width: 30%;

        height: 30%;

        float: left;

        margin: 0 2% 2% 0;

    }



    nav {

        opacity: 0;

        width: 0;

    }

	 

	 .headertext {

	 	visibility: hidden;

	 }

	 #sidebar {

	 	display: none;

	}

	#textbereich {

	margin: 10px;

	}

	#navigation {

		background-image: none;

	}

	#navigation ul {

		padding: 2px 5px 10px 5px;

		margin:  0px;

	}

	#navigation li {

		display: inline;

		list-style: none;

		padding: 5px; 

		margin:  0px;

		background-image: url(images/navi-hintergrund.gif);

		background-repeat: repeat-x;

		line-height: 250%;

	}

	

    .main {

        width: 100%;

    }



    h3 {

        margin: 0 0 0.6em 0;

    }

    p {

        margin-bottom: 0;

    }

}



@media only screen and (max-width: 480px) {



	.headertext {

		display: none 

	}

	.footerallgemein {

		display: none 

	}

	#sidebar {

	 	display: none;

	}

	#navigation {

		background-image: none;

	}

	#navigation ul {

		padding: 2px 5px 10px 5px;

		margin:  0px;

	}

	#navigation li {

		display: inline;

		list-style: none;

		padding: 5px; 

		margin:  0px;

		background-image: url(images/navi-hintergrund.gif);

		background-repeat: repeat-x;

		line-height: 250%;

	}

	#textbereich {

	margin: 10px;

	}

	img {

	max-width: 100%;

	height: auto;

	}

	body {

	font-size: 100%; /* Schriftgröße war 68,75%*/

	line-height: 150%;

	}

	address {

	margin-top: 100px;

	text-align: center; /* zentrieren */

	font-size:  80%; /* etwas kleiner */

	font-style:  normal; /* normale Schrift, nicht kursiv */

	letter-spacing:  1px; /* Abstand zwischen den Buchstaben */

	line-height:  1.5em; /* Zeilenabstand */

	}

}