/* conversion px to em at the end of this document http://riddle.pl/emcalc/ */
/* 
http://www.aminus3.com/color/9F6/ 
http://www.wellstyled.com/tools/colorscheme2/index-en.html
http://www.extremecashsite.com/free_background_color_picker.html
http://www.designvitality.com/blog/2008/08/online-generators-images-css-layout/
http://www.roundedcornr.com/
http://www.colorschemer.com/online.html

Buttons:
http://cooltext.com/Logo-Design?LogoID=443583196
values:
Text font: Love Parade
Text size: 20px
Textcolor: R:0 G:128 B:0  #008000
Bold
Text shadow: none
Text offset: 0  0
Shape: rounded
Effect: Gel
Button color: R:178 G:211 B:138  #B2D38A
Shadow: none
Width: 90
Height: 30
Other options: none
Background color: R:252 G:255 B:248  #FCFFF8
*/	

/* Standards: */
body {
/* we need to set the padding because Opera's default is not zero. Also, we set the 
background color to white, because Netscape 6 for the Macintosh defaults to a background 
color of gray. */

/*  Page width:
    Standard page width is 900(rounded_box)
    rounded_content is standard-60px
    header is standard-60px
    header text: rounded_box.width[960]-(2 logos x105px)-60 fuer corners
    colmid: Content width - colleft[105px]-colright[150px]-2x margin[2*20px]

    Colors:
    Set in body, rounded_box, colmid
*/
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #B2D387; /* background color */
    font-family: Verdana, Arial, Sans-Serif;
    font-size: .8em;
	color: green;
/*  background: url('../images/grey paws.jpg') repeat; */
	text-align: center;}
.Buchstabe {
	font-family: Comic Sans MS, Verdana, Arial, Sans-Serif;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	color: #880000;}
.link {
	clear: both;
	text-align: left;
	margin: 10px;
	width: 110px; 
	float: left; 
	font-size: .9em;}	
.linkText
{
    text-align: left;
    margin-left: 100px;
    font-size: .9em;}
.minipic {
    float: right;
    padding: 0;
    margin: 10px;
    width: 105px;
    height: 79px;}	
.pic240x180 {
    float: left;
    padding: 0;
    margin-left: 20px;
    margin-top: 10px;
    width: 250px;
    text-align: center;
    overflow: hidden;
    height: 190px;}	
.pic240x200 {
    float: left;
    padding: 0;
    margin-left: 20px;
    margin-top: 10px;
    width: 250px;
    text-align: center;
    overflow: hidden;
    height: 210px;}	
.pic280x430 {
    float: right;
    width: 280px;
    margin-top: 10px;
    height: 430px;}
.centre  {
	text-align:center;}
.right {
    text-align: right;}
.left {
    text-align: left;}
.line {
    clear: both;
    height: .1em;
    border-width: 100%;
    border-bottom: solid .06em green;}
p,h1,h2,h3,pre {
    line-height: 1.2em;
    margin:0;}
h1 {
	font-size: 1em;
	padding: .5em;}
    
/* styles for rounded corners */
.rounded_box {
    background-color: #BDE796 ; /* Foreground color of webpage area */
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 900px;}
.rounded_top {
    background: url('../images/tr.png') no-repeat top right;}
.rounded_top div {
    background: url('../images/tl.png') no-repeat top left;}
.rounded_bottom {
    background: url('../images/br.png') no-repeat bottom right;}
.rounded_bottom div {
    background: url('../images/bl.png') no-repeat bottom left;}
.rounded_top div, .rounded_top, 
.rounded_bottom div, .rounded_bottom {
    width: 100%;
    height: 30px;
    display: block;
    font-size: 1px;}
.rounded_content {
    margin: 0px 30px; 
    min-height: 100%;
    border: solid 1px yellow; 
    overflow: hidden; /* fixed Firefox problem mit div height expansion */
    height: auto;
    width: 840px;   /* standard width -60px(corner size) */
/*    background-color: Transparent; */
    background: url('../images/greenpaws.jpg') repeat;
}
/* ----------------- */

/* header styles */
#header {
    min-height: 79px;
    height: auto;
    width: 840px;   /* standard width -60px(corner size) */
    height: 100px;
    border-bottom: solid 2px yellow; 
    background-color: #9ABC78;} /* background color */
#headertext {
    float:left;
    width: 590px; /* rounded_box.width-(2x105px-2x20px margin)-60px(corner size)*/
    margin-top: 15px;
    text-align: center;
    vertical-align:middle;
    font-family: Comic Sans MS, Arial, Sans-Serif;
    font-size: 2em;
    font-weight: bold;
    color: #EBF7CF;}
#logoleft {
    float: left;
    padding: 0;
    margin: 10px;
    width: 105px;
    height: 79px;
    background-repeat: no-repeat;
    background-image: url('../images/logos/logo left.jpg');}	
#logoright {
    float: right;
    padding: 0;
    margin: 10px;
    width: 105px;
    height: 79px;
    background-repeat: no-repeat;
    background-image: url('../images/logos/logo right.jpg');}	
/* end header styles */

/* left column styles */
#colleft {
    clear: both;
    float: left;
    width: 105px; /* fix width */
    margin-top: 25px;
    }
/* left column menu styles: */
#menu {
    float: left;
    width: 95px;
    margin: 10px;
    margin-left: 5px;
    text-align: left;}
#menu p {
    font-size: 0.8em;
    line-height: 2em;}
/* little pic between menu and links */
.colleftpic {
    float: left;
    width: 95px;
    margin: 10px;
    margin-left: 5px;
}
/* left column links: */
#linkcol {
    float: left;
    width: 95px;
    margin: 10px;
    margin-left: 5px;
    text-align: left;
    }
#linkcol p {
    font-size: 0.8em;
    line-height: 2em;
    margin: 5px;}
/* end of left column styles */
    
/* mid column styles */
#colmid {
    float: left;
    width: 545px; /* Content width - colleft - colright - 2x margin*/
    margin: 20px;
    margin-top: 25px;
    background-color: Transparent;}
#colmidpic {
    float: left;
    width: 350px;
    margin-left: 100px;     
    margin-top: 30px;
    height: 110px;      
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/holiday%20dog.jpg');}    
#colmidabouttext {
    float: left;
    width: 240px;
    margin-left: 20px;     
    margin-top: 10px;
    height: 430px;}    
#colmid p {
    margin: 10px;
    font-size: 0.9em;
    text-align: left;
    line-height: 1.5em;}
#colmid h1 {
    font-family: Comic Sans MS, Arial, Sans-Serif;
    line-height: 1.5em;
    font-size: 1.8em;}    
#colmid h2 {
    font-family: Verdana, Arial, Sans-Serif;
    line-height: 1.5em;
    text-align: left;
    font-size: 1.1em;}    
#colmid h3 {
    font-family: Verdana, Arial, Sans-Serif;
    line-height: 1.5em;
    text-align: left;
    font-size: 1em;}    
/* end of mid column styles */
    
/* right column styles */
#colright {
    float: right;
    width: 150px; /* fix width */
    margin-top: 25px;
    }
#colright p {
    margin: 10px;
    font-size: 0.9em;
    text-align: left;
    line-height: 1.5em;}
.picright {
    float:  right;
    padding: 0;
    margin: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 105px;
    height: 79px;
    }	
/* end of right column styles */

/* for pics at the bottom of the page: */    
#picrow {
    clear: both;
    float: left;
    width: 100%;
    height: 79px;
    margin: 0px; 
    margin-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;}
.pic {
    float: left;
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    width: 105px;
    height: 79px;
    }	

/* frame for email input fields */
#email {
    float: left;
    width: 90%;
    height: 20px;
    margin-left: 50px;
    background-color: Transparent;
    }
#email p {
    margin: 10px;
    font-size: 0.9em;
    text-align: left;
    line-height: 1.5em;}

/* footer is the final element at the bottom of the page: */    
#footer {
    float: left;
    clear: both;
    width: 100%;
    height: 20px;
    margin: 0px;
    text-align: center;}
#footer p {
    padding-top: 5px;    
    font-size: .7em;
    color: Green;}
/* end of footer */

	
/* convert px into em:
1px=	0.0625	em
px	em	
1	0.0625
2	0.1250
3	0.1875
4	0.2500
5	0.3125
6	0.3750
7	0.4375
8	0.5000
9	0.5625
10	0.6250
11	0.6875
12	0.7500
13	0.8125
14	0.8750
15	0.9375
16	1.0000
17	1.0625
18	1.1250
19	1.1875
20	1.2500
21	1.3125
22	1.3750
23	1.4375
24	1.5000
25	1.5625
*/