/* Erster Entwurf eines CSS Sheets für die Masterpage */
/* ####################################################*/

/*Grundeinstellungen */

/* Hintergrund und Schriften ###############################*/
body, html{
	font-family: arial, verdana, sans-serif;
	text-align:left;
	font-size:12pt;
	padding:0px;
	margin:0px;
}
h1
{
	margin-left:300px;
  	font-family: arial, verdana, sans-serif;	
}

h2 {
  	font-family: arial, verdana, sans-serif;
  	font-style: italic;
	font-variant: small-caps;
	font-size:1em;
	color:blue;
}

h3
{	font-size:1em;
	font-family: arial, verdana, sans-serif;
	color:#6666cc;
	font-weight:bold;
	text-decoration:underline;
	
}

h5{
	
  	font-weight:bold;
  	color:white;
  	background:#6666cc;
	text-align:center;
	padding-top:2px;
	padding-bottom:2px;
	
}

h6{
	font-family: times new roman,  serif;
  	padding-top:0px;
  	padding-left:20px;
  	padding-bottom:10px;
}

em
{
	font-family: times new roman,  serif;
	font-style:oblique;
	font-size:1.2em;
	color:Blue;
}

hr
{	height:3px;
	color:#376f5a;
	
}
p {
  font-family: arial, verdana, sans-serif;
  font-size:0.9em;
  font-weight:normal;
  line-height:normal;
  }
tt
{	background-color:white;
	position:relative;
	top:10px;
	left:350px;
	font-size:18px;
	font-weight:bolder;
	color:Black;
	text-align:center;
	padding-left:8px;
	padding-right:5px;
}
p.head{
	font-family: arial, verdana, sans-serif; font-weight: bold;
  	font-size:12pt;
	text-align:center;
	font-variant: small-caps;
	height:auto;
}
/* Bilder            #########################################*/
img.left
{
	float:left; 
	display:block;
}
img.right
{
	float:right; 
	display:block;
}

/* Links               ###########################

a:link {
	color: #000000;
	text-decoration:none;
}

a:active {
	background-color: #ffefd5;
	text-decoration:none;
}
a:visited {
	color: #660099;
	text-decoration:none;
}


a:hover {
	color: orange;
	font-style: italic;
	text-decoration:none;
}
##############*/

/* Containerelemente der Seite ##################################style=" 
                background-repeat: no-repeat;  border-bottom-color: #9999cc; border-bottom-style: dotted;"*/

DIV.aussen
{	height: 100%;
	width:100%;
	margin: 0px;
	padding:0px;
}

DIV.innen
{	font-family: arial, verdana, sans-serif;
	font-size:0.7em;
    width: 800px; 
    height: 600px;
	margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:auto;
    background-image:url(../web/images/og_web_header_neu3.png);
    background-image:url(../images/og_web_header_neu3.png);
    background-repeat:no-repeat;

}

DIV.oben
{	
	height:87px;
	
}

DIV.inhalt
{	
	border-left:1px solid #376f5a;
	border-right:1px solid #376f5a;
	border-bottom:1px solid #376f5a;
	position:absolute;
	top:120px;
	height: 485px;
	width:798px;
}


DIV.navigation
{	margin-top:4px;
	height: 457px;
	border-right:1px dashed #376f5a;
	width:200px;
	float:left;
	background-image:url(../web/images/bg_navGold.png);
	background-image:url(../images/bg_navGold.png);
    background-repeat:repeat-y;
}	


DIV.content
{	
	font-size:16px;
	font-family:Times New Roman, Serif ;
	font-weight:lighter;
	margin-top:4px;
	height: 417px;
	width:565px;
	padding:30px 15px 10px 15px;
	float:left;
	overflow:auto;
}



DIV.footer
{	width: 768px;
	float:left;
	text-align:center;
	border-top:1px solid #376f5a;
	padding:5px 15px 5px 15px;
	font-size:11px;
	font-weight:bold;
	font-family:Arial, Verdana, sans-serif;
	color:#376f5a;
	float:left;
}

/* ###########################    Boxen elemente der Startseite geht auch einfacher #################################*/

DIV.database
{
	color:#376f5a;
	margin-top: 40px;
	margin-left: 20px;
	font-size: 25px;
	font-family: Arial, Sans-Serif;
	font-variant: small-caps;
	font-weight:bold;
	overflow:hidden;
}
DIV.indent
{	margin-top:15px;
	padding-left:20px;
	font-size:15px;
	color:Black;
	font-weight: normal;
	text-align: left;
	font-variant: normal;
}


DIV.adm
{
	
	color:#376f5a;
	padding:5px;
	margin-top: 30px;
	margin-left: 80px;
	font-size: 25px;
	font-family: Arial, Sans-Serif;
	font-variant: small-caps;
	font-weight:bold;
	overflow:hidden;
	
}
DIV.projmang
{
	
	color:#376f5a;
	padding:5px;
	margin-top: 30px;
	margin-left: 170px;
	font-size: 25px;
	font-family: Arial, Sans-Serif;
	font-variant: small-caps;
	font-weight:bold;
	overflow:hidden;
	
}

/* ###########################    Boxen elemente der Projektseite geht auch einfacher #################################*/

	Div.projektbox
	{	width:540px;
		border: 1px solid #376f5a;
		background-color:White;
		margin-left:5px;
		
			
	}
	Div.headline
	{	font:Arial;
		font-Size:18px;
		font-style:italic;
		width:530px;
		/* background-color:#ffd700;*/
		padding:5px;
		border-width:0;
		border-bottom:1px solid #376f5a;
		height:36px;
		background-image:url(../web/images/kopfZeileGold.png);
		background-image:url(../images/kopfZeileGold.png);
		background-repeat:repeat-x;
		vertical-align:middle;
	}
	p.left
	{
		margin:0;
		text-align:left;
		color:Black;
		font-weight:bold;
		float:left;
		width:50%;
	}

	p.right
	{	margin:0;
		text-align:right;
		color:Black;
		float:right;
		width:50%;
	}

	Div.projekt
	{	font-Size:16px;
		font-family:Times New Roman,SansSerif;
		padding:5px;
		border-bottom:1px solid #376f5a;
		
	}

	Div.details
	{	
		width:488px;
		background-color:White;
		padding:5px;
		border-width:0;
		margin-left:40px;	
	}
	ul{	
		text-decoration: none;
	}

	li
	{
		font-size:15px;
		
	}
	Div.projFooter
	{	font-size:14px;
		font-variant:small-caps;
		padding:2px;
		background-color:White;
		text-align:left;
		border-top:1px solid #376f5a;
		
	}
/* Boxenelemente der Seite ################################## vorerst nur für die ersten Tests*/
/* Kopfzeile der Box */
Span.boxKopf{
	
	position:absolute;
	width:130px;
	font-size:11pt;
	font-weight:bold;
	font-family:Arial, Verdana, sans-serif;
	color: Purple;
	font-variant: small-caps;
	padding-top:2px;
	padding-bottom:2px;
	text-align:center;
	background-image:url(../Images/bg_left2.jpg);
}
span.boxKopf1{
	
	position:absolute;
	width:132px;
	left:25px;
	font-size:11pt;
	font-weight:bold;
	font-family:Arial, Verdana, sans-serif;
	color:Purple;
	font-variant: small-caps;
	padding-top:2px;
	padding-bottom:2px;
	text-align:center;
	background-image:url(../Images/bg_menu.jpg);
}
/* Einträge in der Box */
span.haupt
{
	
	
	margin-left:200px;
	color:black;
	font-size:11pt;
	font-family:Arial;
	background:white;
	font-variant: small-caps;
}


/* Sollte Abstandszeile sein geht aber noch nicht*/
span.boxzeile{background:yellow;
	height:1px;
	width:118px;
	/* hier fehlt ein whitspacer.gif */
}

/* Module wqerden noch nicht benötigt###############################################*/

span.box{
	margin-left:20px;
	padding-top:280px;
	font-size:16pt;
	font-family:Arial, Verdana, sans-serif;
	font-weight:bold;
	color:#376f5a;
}
span.boxtextgelb{
	margin-left:20px;
	background:yellow;
	font-size:10pt;
	font-family:Arial, Verdana, sans-serif;
	color:black;
	width:118px;
}  	



span.links{
	background: gray;
	color:white;
}

td {
  font-family: Arial, Verdana, sans-serif;
  line-height:20px;
  font-weight:lighter;
  font-size:16px;
  margin:0;
  padding:3px;
	vertical-align:middle;
	text-align:left;	
}
td.Kopf {
  font-family:Arial, Verdana, sans-serif;
   line-height:20px;
  font-weight:bold;
  font-size:16px;
  margin:0;
  padding:3;
	vertical-align:top;
	text-align:left;
	
}







/* ############################ auskommentierter Text ############################

ul.head{
	color:white;
	text-decoration:none;
	text-align:center;
}

li.box{
	background-color:white;
	font-size:10pt;
	clear:both;
	text-align:left;
}

#democrats {
	background:#6666cc;
}

#republicans {
	background:red;
}




Einzug der ersten Zeile im Absatz
p {
	text-indent: 30px;
}
Spaltenkopf
th {
	text-align: right;
}
Zelle
td {
	text-align: center;
}
Blocksatz
p {
	text-align: justify;
}

h1 {
	text-decoration: underline;
}

h2 {
	text-decoration: overline;
}

h3 {
	text-decoration: line-through;
}

Abstände zwischen den Buchstaben
h1 {
	letter-spacing: 6px;
}

p {
	letter-spacing: 3px;
}

Text transformation [text-transform]
The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:

capitalize 
Capitalizes the first letter of each word. For example: "john doe" will be "John Doe". 
uppercase 
Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE". 
lowercase 
Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe". 
none 
No transformations - the text is presented as it appears in the HTML code. 
As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.


h1 {
	text-transform: uppercase;
}

li {
	text-transform: capitalize;
}
a:link {
	color: #6666cc;
}

a:active {
	background-color: #FFFF00;
}
a:visited {
	color: #660099;
}


a:hover {
	color: orange;
	font-style: italic;
}

a:hover {
	text-transform: uppercase;
	font-weight:bold;
	color:#6666cc;
	background-color:yellow;
}
a:link {
	color: #6666cc;
	text-decoration:none;
}

a:visited {
	color: purple;
	text-decoration:none;
}

a:active {
	background-color: yellow;
	text-decoration:none;
}

a:hover {
	color:red;
	text-decoration:none;
}

Let us try to specify some classes in the example above:


<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>

We can hereafter define special properties for links belonging to whitewine and redwine, respectively. 


a {
	color: #6666cc;
}

a.whitewine {
	color: #FFBB00;
}

a.redwine {
	color: #800000;
}

The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:


<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:


#c1-2 {
	color: red;
}

<p>Early to bed and early to risemakes a man <span class="benefit">healthy</span>,<span class="benefit">wealthy</span>and <span class="benefit">wise</span>.</p>

The CSS belonging to it:


span.benefit {
	color:red;
}

Of course you may also use id to add style to the <span>-elements. Just as long as you remember, that you'll have to apply a unique id to each of the three <span>-elements, as you learned in the previous lesson.



*/