/* standard-css für www.shafis.de */


/* generell wichtig: 
mit hilfe dieser einen css-datei kann man die html-dateien wesentlich differenzierter definieren als mit html selbst. farben, größen, abstände, verhältnisse der bereiche zueinander etc. können hier angegeben werden
man muss sich jederzeit fragen: WO MUSS ICH WAS HINSCHREIBEN, DAMIT ES HINTERHER DORT STEHT, WO ES STEHEN SOLL?

. ordner- und dateinamen werden grundsätzlich klein geschrieben, leer- / sonderzeichen und umlaute dürfen nicht verwendet werden, zahlen sind erlaubt
. darauf achten, dass html- und css-seite verknüpft sind durch: <link href="standard.css" rel="stylesheet" type="text/css" /> 
. hintergrundfarben der einzelnen felder erst ganz zum schluss (!) rausnehmen, da diese als orientierung dienen
. über "BEARBEITEN", "SUCHEN UND ERSETZEN", "GESAMTE AKTUELLE LOKALE SITE" kann man ß (&szlig;), ü (&uuml;), Ü(Uuml;) etc. prüfen und mit "ALLE ERSETZEN" ersetzen! wichtig hierbei: wenn man nicht aufpasst, werden sogar die kommentare verschlüsselt dargestellt...
*/


/* wichtige farben:
farbe der hülle	= #a6aca4;
rot bei navigation allgemein = #97212b;
orange bei naviation auf "zauberseiten" = #ed9700;
*/


/* nachstehend werden unter "*" alle html-tags auf "null" gesetzt und eine standard-schriftart vergeben */
* {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	border: 0px;
	font-weight: normal;
	color: #FFFFFF;
}
/* html, body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li können nachstehend eingetragen werden. es handelt sich dabei um informationen, die (weil ohne nähere definition wie "#huelle #header #navi1" etc.) für alle divs gelten */
a {
	text-decoration: none;
} /* erklärt, wie links aussehen sollen*/
a:hover {
	color: #97212b;
	font-weight: normal;
} /* gibt an, wie das element aussehen soll, wenn man mit der maus darüber fährt*/
h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #373938;
} /* "h1" definiert eine überschrift. es enthält ausschließlich die informationen, die für sämtliche divs gelten. weitere, unterschiedliche definitionen folgen im verlauf individuell.*/
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #373938;
} /* bei bedarf - also dann, wenn man beispielsweise weitere farben oder andere abstände haben will - kann man weitere "h's" anlegen (wie hier in form von "h2").*/
body, html {
	width: 100%;
	height: 100%;
}
body {
	min-width: 980px;
	min-height: 550px;
	position: relative;
	background-color: #dbdbd0;
	background-position: center;
	font-size: 90%;
} /*über die im "body" (oben) und unter "huelle" (unten) gegebenen informationen wird vor allem die position der website auf der seite bestimmt*/




/* nachstehend alles, was zur HUELLE gehört */
#huelle {
	background-color: #a6aca4;
	width: 980px;
	height: 550px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -490px;
	margin-top: -275px;
}

/* CONTENT_RE_BILDTEXT */
/* verwendet in folgenden dateien: 
ordner "profile": "interests01" bis "interests 11_1" (also auch "interests01_arch01" bis "interests01_arch20", "interests04_travel01" bis "interests04_travel20", "interests06_surf01" bis "interests06_surf20")
ordner "projects": "index", "venice01", "maastricht01", "muenster01", "weert01", "boenen01", "bruchsal01"
ordner "imprint": "index"*/
#huelle #content_re_bildtext {
	position: absolute;
	right: 20px;
	bottom: 99px;
	width: 250px;
}
#huelle #content_re_bildtext p {
	padding-bottom: 10px;
} /* "content_re_bildtext" ist ein div, das bewusst hier in der "huelle" angelegt ist! durch diese platzierung steht dies element über allen anderen, es ist nur von der hülle abhängig und frei vom rest der jeweiligen seite positionierbar (in diesem konkreten fall ist es am rechten rand und unten ausgerichtet).*/




/* nachstehend alles, was zum HEADER gehört */
#huelle #header {
	background-color: #a6aca4;
	height: 118px;
	width: 980px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	position: relative;
}

/* LOGO */
#huelle #header #logo {
	height: 80px;
	width: 190px;
	position: absolute;
} /* diese angaben beziehen sich auf den button "S.H.A.F.I.S.", der in der vorlage oben im header als bild eingefügt wurde*/

/* NAVI1 */
#huelle #header #navi1 {
	left: 20px;
	top: 100px;
	position: absolute;
	width:600px;
}
#huelle #header #navi1 li {
	display: inline; /* sorgt dafür, dass die punkte nebeneinander, nicht untereinander stehen!*/
	padding-right: 12px;
}
#huelle #header #navi1 ul {
	text-align: left;
	list-style-type: none; /* mit dieser angabe legt man fest, dass keine punkte vor der auszählung stehen*/
}

/* NAVI4 */
#huelle #header #navi4 {
	position: absolute;
	top: 100px;
	left: 800px;
	width: 170px;
}
#huelle #header #navi4 li {
	display: inline; /* sorgt dafür, dass die punkte nebeneinander, nicht untereinander stehen!*/
	padding-right: 12px;
}
#huelle #header #navi4 ul {
	text-align: right;
	list-style-type: none; /* mit dieser angabe legt man fest, dass keine punkte vor der auszählung stehen*/
}




/* nachstehend alles, was zu CONTENT_LINKS gehört */
#huelle #content_links {
	width: 150px;
	padding-left: 20px;
	position: absolute;
	height: 350px;
}/*die linke seite ist ausschließlich für navi2 vorbehalten! */

/* NAVI2 */  
#huelle #content_links #navi2 {
}
#huelle #content_links #navi2 li {
	list-style-type: none;
	padding-bottom: 12px;
}
#huelle #content_links #navi2 ul {
	list-style-type: none;
	padding-top: 30px;
}/*padding-top ist an dieser stelle ausschlaggebend dafür, wie groß der abstand von header-unterkante bis zum anfang der schrift in content links ist*/
/* da "navi2" (in jeweils angepasstem bibliothekselement) auf allen seiten außer der start-, der @- und der imprint-seite sichtbar ist, gilt diese information auch für alle diese seiten!*/




/* nachstehend alles, was zum CONTENT_RECHTS gehört */
/* verwendet in folgenden dateien:
ordner "profile": index, knowledge, publication, vita
ordner "projects": krakow02 bis krakow24, venice02 bis venice18, maastricht02 bis maastricht09, muenster02 bis muenster10, weert02 bis weert11, boenen02 bis boenen11, bruchsal02 bis bruchsal07*/
#huelle #content_rechts {
	width: 250px;
	padding-left: 20px;
	padding-top: 30px;
	position: absolute;
	left: 690px;
	height: 320px;
	vertical-align: bottom;
}

/* CONTENT_RECHTS_BREIT */
/* verwendet in folgenden dateien: 
im ordner profile: "award"
im ordner collaboration: "ctp", "dy", "hb", "index", "jvc", "kanzlei", "lt"
*/
#huelle #content_rechts_breit {
	width: 476px;
	padding-left: 30px;
	padding-top: 30px;
	position: absolute;
	left: 473px;
	height: 320px;
}




/* nachstehend alles, was zum CONTENT_MITTE gehört */
/* verwendet in folgenden dateien:
ordner "profile": "index", sämtliche bilder mit "interests_...", "knowledge"
ordner "@": "index"
ordner "imprint": "index"
*/
#huelle #content_mitte {
	padding-top: 30px;
	padding-left: 40px;
	position: absolute;
	left: 180px;
	width: 460px;
	height: 320px;
}
#huelle #content_mitte p {
	padding-bottom: 40px;
}
#huelle #content_mitte h1 {
	padding-bottom: 10px;
}

/* CONTENT_MITTE TABLE */
/* verwendet in folgenden dateien:
ordner "profile": "index", "knowledge", 
ordner "@": "index" 
*/
#huelle #content_mitte table {
	margin-top: 25px;
}
#huelle #content_mitte #tabelle_kurz {
	margin-top: 130px;
	padding-left: 30px;
}

/* CONTENT_MITTE_SCHMAL */
/* verwendet in folgenden dateien:
ordner "profile": "award"
*/
#huelle #content_mitte_schmal {
	padding-top: 10px; /*padding-top: 30px;*/
	padding-left: 40px;
	position: absolute;
	left: 180px;
	width: 244px;
	height: 340px; /*height: 320px;*/
}
#huelle #content_mitte_schmal h1 {
	padding-bottom: 20px;
	padding-top: 70px;
}
#huelle #content_mitte_schmal p {
	padding-bottom: 40px;
}

/* CONTENT_MITTE_KURZERTEXT */
/* verwendet in folgenden dateien:
ordner "profile": "publication", "vita" 
*/
#huelle #content_mitte_kurzertext {
	padding-top: 135px;
	padding-left: 40px;
	position: absolute;
	left: 180px;
	width: 460px;
	height: 215px;
}
#huelle #content_mitte_kurzertext p {
	padding-bottom: 40px;
}
#huelle #content_mitte_kurzertext h1 {
	padding-bottom: 10px;
}

/* CONTENT_MITTE_COLLABORATION */
/* verwendet in folgenden dateien:
ordner "collaboration": sämtliche dateien
*/
#huelle #content_mitte_collaboration {
	padding-top: 140px;
	padding-left: 40px;
	position: absolute;
	left: 173px;
	width: 244px;
}

/* CONTENT_MITTE_PROJEKTBILDER */
/* verwendet in folgenden dateien:
ordner "projects": "sämtliche dateien
*/
#huelle #content_mitte_projektbilder {
	padding-top: 30px;
	position: absolute;
	left: 170px;
	width: 460px;
	height: 320px;
}




/* nachstehend alles, was zum FOOTER gehört */
#huelle #footer {
	height: 80px;
	width: 960px;
	background-image: url(../bilder/dunklerbalken.png);
	padding-top: 20px;
	padding-right: 20px;
	position: absolute;
	top: 470px;
	left: 0px;
}

/* NAVI3 */
/* verwendet in folgenden dateien:
ordner "profile": in sämtlichen dateien, die "interests_..." lauten
ordner "projects": in sämtlichen dateien
*/
#huelle #footer #navi3 {
	float: left;
	margin-left:170px;
	width: 500px;
}
#huelle #footer #navi3 ul li {
	float: left;
	margin-right: 10px;
	list-style-type:none;
}
#huelle #footer #navi3 ul li a {
	display: block;
	height: 10px; /* "height" und "width" legen die höhe und die breite der navigations-kästchen fest */
	width: 10px;
	background-color:#FFFFFF;
	text-indent: -5000px; /* da sich der text nicht einfach "wegmachen" lässt, benutzt man diesen trick, um ihn zumnidest aus dem auf dem monitor sichtbaren bereich verschwinden zu lassen*/
}
#huelle #footer #navi3 ul li a:hover {
	background-color:#97212b; /* farbe, die das kästchen annimt, wenn man mit der maus darüber fährt*/
}

/* BESCHREIBUNG*/
/* verwendet in folgenden dateien:
ordner "profile": "award"
ordner "projects": in sämtlichen dateien
ordner "imprint": "index"
*/
#huelle #footer #beschreibung {
	margin-left: 600px; /*margin-left: 685px;*/
	text-align: right;
}/* um den schlagschatten (unterhalb des footers) auf einfache art in die seite einzubauen, macht man aus footer und schlagschatten in photoshop zun&auml;chst ein jpg
> man w&auml;hlt den entsprechenden bereich in photoshop aus
> "bearbeiten" > "auf eine ebene reduziert kopieren"
> neues fenster &ouml;ffnen mit "strg" + "n" und auswahl mit "strg" + "v" einf&uuml;gen
> abspeichern &uuml;ber "datei" > "f&uuml;r web und ger&auml;te speichern"  
> speichern im "website"-ordner, vorgabe: "jpg hoch" > "maximal" w&auml;re unn&ouml;tig! */



/* in dieser css-datei befinden sich unter "content_rechts" und "content_mitte" diverse (recht viele...) css-regeln. dies war notwendig, um die texte auf den seiten angenehm mittig positionieren zu können. mit nur einer regel hätten die texte (unabhängig von ihrer tatsächlichen länge) alle auf der gleichen höhe gehangen... durch unterschiedliche angaben bei padding_top / padding-left / margin-top / width etc. lassen sich die seiten individueller gestalten*/


/* hilfe und anweisungen unter  http://de.selfhtml.org/  zu finden */
/* nachdem alle dateien erstellt und hochgelanden sind, kann man sie mit "http://validator.w3.org/" prüfen lassen */