/* DAS IST IM MOMENT DAS LAYOUT VON MEINER SEITE */

/* Alle im folgenden mit einem vorgestellten Punkt versehenen Regeln werden in den PHP-Dateien entweder mit:
<div class="regel"> für ganze Blöcke begonnen und mit </div> beendet, oder mit
<span class="regel"> für Textformatierung begonnen und mit </span> beendet.
Besonders bei <span> immer schön drauf achten es wieder zu beenden...
Auch bei Bildern wirst du in den PHPs class="regel" finden!
Achja, die Regel schreibt man in den PHPs nicht mit dem Punkt vorneweg. */



/* /// GRUNDEINSTELLUNGEN /// */

body { /* Aussehen von Seitenhintergrund, Text ohne <span>-formatierung */
	background-color: #FFF; /* Hintergrundfarbe */
	margin: 0px 0px 0px 0px; /* einfach so lassen */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif; /* Schriftart. Von links nach rechts wird danach gesucht. Bei zwei Wörtern Anführungszeichen benuten! */
	font-size: 24px; /* Schriftgröße */
	font-style:normal; /* es gibt noch: bold & italic */
	line-height: 26px; /* Zeilenabstand */
	color: #404040; /* Schriftfarbe */
}

#hg{ /* In diesem Feld kannst du höchstens die Breite ändern, oder ganz weglöschen */
	position: absolute;
	width: 1000px;
	height: 100%;
	top: 0px;
	left: 0px;
	margin-left: 0px;
	margin-top: 0px;
}

#hgplus{ /* Nix ändern */
	position:relative;
}



/* /// NAVIGATION /// */

.navigation { /* Hier wird die Navigation positioniert */
	position:absolute; /* sollte so bleiben */
	top: 35px; /* Anfang der Navigation ab oberem Rand */
	left: 20px; /* Anfang der Navigation von unterem Rand. Es gibt noch bottom & right */
	width:230px; /* Breite der Navigation */
	margin-left: 0px;
}




/* /// INHALT /// */

.inhalt{ /* Position der Inhaltsseiten, ähnlich wie .navigation */
	position: absolute; /* lassen */
	width: 750px;
	height: 100%;
	top: 20px;
	left: 300px;
	margin-left: 0px; /* lassen */
}



/* ABSCHNITTSPOSITIONEN */

p { /* Überall wo in den php-Dateien <p></p> verwendet wird, wird dieser Abstand eingefügt. Ist aber nur sinnvoll wenn die Bilder von oben nach unten laufen. Wert darf natürlich verändert werden */
	margin-top: 65px;
}


/* BILDPOSITIONEN */

img.arbeit { /* Für die Bilder der Arbeiten */
	margin-left: 0px;
}

img.profil { /* Hatte ich extra für meine Profilseite gemacht. margin-top läßt nach oben hin 15px Abstand */
	margin-left: 0px;
	margin-top: 15px;
}



/* /// LINKS /// */

a:link, a:visited, a:active { /* Aussehen der Links, der besuchten, und der aktiven. Jedes kann auch einzeln verändert werden */
	color: #404040; /* Schriftfarbe */
	text-decoration: none; /* musst du mal bei Dreamweaver schauen was es sonst noch gibt. Ich glaube underline, line-through, etc... */
	background-color: #FFC;
	font-weight: bold;
}

a:hover { /* Wenn man mit der Maus drüber geht */
	color: #404040; /* Schriftfarbe */
	text-decoration: none;
	color: #CC0;
	
	font-weight: bold;

}



/* /// KONTAKTFORMULAR /// */

/* Hierfür schauste dir am Besten in Dreamweaver die CSS-Regel an. Da wird das Besser erklärt. */

input, select{ /* Formular */
	width:300px;
	color: #CC0;
	border: 1px dashed #404040;
	background-color: #FFF;
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	font-style:normal;
	font-weight: bold;
	line-height: 28px;
	letter-spacing: normal;
}
textarea { /* Nachricht */
	width:300px;
	height:200px;
	color: #CC0;
	border: 1px dashed #CC0;
	background-color: #FFF;
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	font-style:normal;
	line-height: 28px;
	letter-spacing: normal;
}

.senden { /* Absenden-Button */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	border: 1px dashed #404040;
	font-size: 24px;
	line-height: 28px;
	font-style: normal;
	font-weight: bold;
	color: #404040;
	letter-spacing: normal;
}


/* /// TEXTHINTERGRUNDFARBEN /// */

/* Alle hier aufgeführten Regeln für Text können natürlich verändert und jederzeit in den PHPs eingesetzt werden!
<span class="regel"> beginnt den Spaß, </span> beendet ihn. Wenn der Text NICHT zwischen <span> steht, wird die Standardformatierung von ganz oben übernommen. Man kann hier auch beliebig viele neue Regeln anlegen*/

.titel { /* Arbeitstitel (Bei mir die große grüne Überschrift) */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 100px;
	line-height: 100px;
	color: #404040; /* T ja, wie der Name schon sagt... */
}
.text { /* Erläuterungstext (Der Text unter dem dicken Titel.) */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	line-height: 26px;
	font-style: normal;
	font-weight: normal;
	color: #404040;
	letter-spacing: 1px;
}


.teaser { /* teaser (Ist bei mir der fette Text bei dem ehrlich-Magazin */
	font-weight: bold;
}


.link { /* Aussehen eines Links innerhalb der Texte. Stehen um einen Link im Text die <span>-Klammern "außerhalb" der Link Klammern <a ...> werden erst die Eigenschaften der Formatierung der Links (siehe weiter oben) genutzt. In meinem Fall wird hier jetzt eine andere Farbe benutzt, da aber in den Links weiter oben schon eine Farbe festgelegt ist, wird diese hier beim Text nicht angewendet. ALLERDINGS habe ich in dieser Regel hier noch einen Unterstrich angegeben, und den gibt es weiter oben noch nicht. Also wird dieser auf meiner Homepage auch in einer anderen Farbe angezeigt.
Stehen die <span>-Klammer "innerhalb" der Link Klammern <a ...>, dann wird ausschließlich die Regel der <span> übernommen! Allerdings gibt es dann keinen MouseOver-Effekt...*/
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	font-style:normal;
	line-height: 26px;
	color: #CC0;
	text-decoration: underline;
	font-weight: bold;
	background-color: #FFC;
}
.links { /* Aussehen der Links in der Navigation (hier trifft alles so zu wie eine Regel weiter oben) */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	font-style:normal;
	line-height: 26px;
	color: #404040;
	text-transform: lowercase; /* alles wird in Kleinbuchstaben geschrieben. Egal ob ich in der PHP Großbuchstaben benutzt habe */
	font-weight: bold;
	background-color: #FFC;
}
.aktiv { /* Aktiver Link, also der Link, auf dessen Seite man sich befindet (Der hiermit versehene Link (in navigation.php erfolgt das automatisch) wird anders dargestellt. In meinem Fall alles in Versalien*/
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	font-style:normal;
	line-height: 26px;
	color: #CC0;
	text-transform: lowercase; /* Alles in Versalien */
	text-decoration: underline;
	font-weight: bold;
	background-color: #FFC;
}


.navi { /* Überschriften der Links (Bei mir sind das "thomas schekalla", "typografie" und "fotografie"*/
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 24px;
	line-height: 26px;
	color: #404040;
	letter-spacing: normal;
	text-transform: lowercase;
	text-decoration:underline;
	
}
.navix { /* Sonderspacing für mein "t y p o f o t o" (allerdings hab ich das nicht mehr... haha, ist ja beides auf 4px gestellt. Na gut. Aber dann siehste mal wie das geht ;) */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 24px;
	line-height: 26px;
	color: #CC0;
	letter-spacing: normal;
	text-transform: lowercase;
	background-color: #FFC;
}

.navicyan{ /* für das gaaaaanz neue extrafarbe*/
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-weight: bold;
	font-style: normal;
	font-size: 24px;
	line-height: 26px;
	color: #46bfec;
	letter-spacing: normal;
	text-transform: lowercase;
	background-color: #FFC;
}


.copypaste { /* Copyrighttext (Ist der Text unter den Arbeiten) */
	font-family: Helvetica, Arial, "Trebuchet MS", sans-serif;
	font-size: 24px;
	line-height: 26px;
	font-style: normal;
	font-weight: normal;
	color: #999999;
	letter-spacing: normal;
}