* { margin: 0px; outline: 0 }
body      { color: #2e2e2e; font-size: 100%; line-height: 1.5em; font-family: Verdana, Arial,  Geneva, Helvetica, Geneva, Swiss, sans-serif; background-color: #737373; text-align: center }
p   { padding-bottom: 2em }
h1      { color: #f33; font-size: 140%; font-family:  Verdana, Arial; margin-bottom: 20px }
h2        { color: #f33; font-size: 130%; font-family:  Verdana, Arial; margin-bottom: 10px }
h3        { color: #f33;  font-size: 120%; font-family:  Verdana, Arial; margin-bottom: 10px }
h4      { color: #f33; font-weight: bold; font-size: 120%; font-family: Verdana, Arial; margin-bottom: 6px; }
img { height: auto; max-width: 100% }
#container             {background-image: url(Bilder/white_30_pct.png); position: relative; width: auto; height: auto; background-repeat-x: repeat; background-repeat-y: repeat; border-radius: 6px; text-align: left; margin: 5% auto 5%; padding: 2%; max-width: 980px }
#header { }
#logo   { margin-bottom: 5px }
#logo img { border: 0px }
#mcphotodesign { position: fixed; top: 120px; left: 0px; border: 0px }
#menu  { float: right;}
#name     { color: #000000; font-size: 100%; font-weight: bold ; margin-bottom: 30px; padding-bottom: 5px; border-bottom: 1px solid #323232 }
#main     {  }
#banner { margin-bottom: 20px }
#navgallery     { padding-top: 5px; border-top: 1px solid #1c1c1c }
#copyright  { font-size: 80% }
a:link    { color: #5f5f5f; font-weight: bold; text-decoration: none }
a:visited       { color: #5f5f5f; font-weight: bold; text-decoration: none }
a:hover   { color: #000000; font-weight: bold; outline: none; text-decoration: none }
#footer       { color: #000000; font-size: 85%; line-height: 1.6em; margin-top: 30px; margin-bottom: 30px; padding-bottom: 10px; max-width: 980px }
#footer a:link  { color: #000000; font-size: 100%; font-weight: normal; line-height: 1.6em; text-decoration: none }
#footer a:visited  { color: #000000; font-size: 100%; font-weight: normal; line-height: 1.6em; text-decoration: none }
#footer a:hover  { color: #000000; font-size: 100%; font-weight: normal; line-height: 1.6em; text-decoration: underline }
.grid3  { float: left; width: 31.25%; margin-right: 3.125%;  }
.grid3end  { float: left; width: 31.25%; margin-right: none;  }
.grid3ref  { float: left; width: 31.25%; margin-right: 3.125%;  }
.grid3refend  { float: left; width: 31.25%; margin-right: none;  }
.grid3-1  { float: left; width: 65%; margin-right: 3.125%;  }
.grid4 { float: left; width: 65.62%;  }
.footgrid3  { float: left; width: 31.25%; margin-right: 3.125%;  }
.footgrid3end  { float: left; width: 31.25%; margin-right: none;  }
#start     { font-size: 140%; text-align: center; width: 100%; display: none }
#start a:link  { color: #5f5f5f; font-weight: bold; text-decoration: none }
#start a:visited  { color: #5f5f5f; font-weight: bold; text-decoration: none }
.bold { font-weight: bold }
.kursiv { font-style: italic }
.grauklein   { color: #888; font-size: 85% }
.button {
	background-color: #d0d0d0;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #696969;
	display:inline-block;
	color:#777777;
	font-size: 100%;
	font-family:verdana;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	}
.button:active {
	position:relative;
	top:1px;
	}
.textfeld   { width: 90%; font-size: 100%; line-height: 1.6em; border: solid 1px #818181; margin-bottom: 1.8em; padding: 0.5em; background-color: transparent; border-radius:4px;}	
.contact  { float: right; margin-bottom: 10px; margin-left: 15px; border: solid 1px gray }
.kleineBilder    { margin-right: 19px; margin-bottom: 19px; padding: 1px; border: solid 1px #aaa }
ul     {  margin-bottom: 2em; padding-left: 30px }
.mcphotodesign  { padding: 1px; border: solid 1px gray }
.referenzbilder { padding: 1px; border: solid 1px gray }
#home .home, #referenzen .referenzen, #leistungen .leistungen, #kosten .kosten, #photos .photos, #kontakt .kontakt, #impressum .impressum, #datenschutz .datenschutz  { color: #f33 }
/* Breakpoint < 1100px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 1100px) {
#mcphotodesign      { display: none }
#container { margin-left: 2.5%; margin-right: 2.5%; }
}
/* Breakpoint < 820px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 820px) {
.grid3  { float: none; width: 100%; margin-right: 0;  }
.grid3end  { float: none; width: 100%; margin-right: 0; }
.grid3-1  { float: none; width: 100%; margin-right: 0;  }
.grid4 { float: none; width: 100%;  }
#menu  { float: none; margin-bottom: 1.6em; }
}
/* Breakpoint < 660px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 660px) {
.footgrid3  { float: none; width: 100%; margin-right: 0; margin-bottom: 2em  }
.footgrid3end  { float: none; width: 100%; margin-right: 0; margin-bottom: 2em }
.grid3refend  { float: none; width: 100%; margin-right: 0; }
.grid3ref  { float: none; width: 100%; margin-right: 0; }
}
/* Breakpoint < 480px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {
#header { margin-top: 15px; }	
#start { display: inline; }
#container             {background-image: url(Bilder/white_30_pct.png); position: relative; width: auto; height: auto; background-repeat-x: repeat; background-repeat-y: repeat; border-radius: 0px; text-align: left; margin: 0% auto 0%; padding: 4%; max-width: 980px }

}
/* Breakpoint < 320px ------------------------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 320px) {
#name { font-size: 95%; }	
.footgrid3  { font-size: 120%; line-height: 1.6em;  }
.footgrid3end  { font-size: 120%; line-height: 1.6em; }
}