/* Sample .CSS file for the flexi skin, it only shows the different areas 
   and a possible positioning within the page */

body {
	padding:         0;
	margin:          0;
        background:      white;
	color:           #333333;
	font-family:     Verdana, Tahoma, sans-serif;
}
#FlexiAll { /*for setting e.g. additional Background-image*/
        width:           800px;
        margin:          0 auto;
        background:      white;
}
#FlexiTop {
	margin:          0.5em 0 0 0;
        padding:         0;
	border:          none;
        width:           800px;
        background:      white;
}
#FlexiLeft {
        margin:          1em 0;
        padding:         15px;
        float:           left;
        clear:           both;        
	width:           20%;
	border:          none;
        color:           black;
        font-size:       10px;
	background:      #a8cfe0;
}
#FlexiLeft ul {
        list-style:      none;
        padding:         0;
        margin:          0;
}
#FlexiLeft li {
        padding:         3px 0 0 0;
        margin:          0 0 5px 0;
        border-top:      1px dotted #707bc1;
        font-weight:     bold;
}

#FlexiLeft li li {
        padding:         1px 0 0 0;
        margin:          6px 0 4px 15px;
        border-top:      1px dotted #707bc1;
        border-bottom:   none;
        font-weight:     normal;
}

.vspace {
        padding-top:     2px;
}

#FlexiLeft a:link, 
#FlexiLeft a:active, 
#FlexiLeft a:visited, 
#FlexiLeft a:hover {
        color:           black;
        text-decoration: none;
}

#FlexiHeader {
        float:           right;
	margin:          1em 0 0 0;
        text-align:      right;
	width:           72%;
	border:          none;
        font-size:       65%;
        font-color:      #eee;
}

#FlexiHeader a:link, 
#FlexiHeader a:visited, 
#FlexiHeader a:hover, 
#FlexiHeader a:active {
        color:           #ccc;
        text-decoration: none;
}

#FlexiTitle {
        float:           right;
	width:           72%;
	margin:          0;
	border:          none;
}

#FlexiMain {
        float:           right;
	width:           72%;
        padding-left:    20px;
	margin:          0;
	border:          none;
        font-size:       70%;
        line-height:     18px;
}

#FlexiMain h1 {
        font-size:       125%;
        padding-bottom:  3px;
        margin-bottom:   1em; 
        border-bottom:   1px solid #666;
}

#FlexiMain h2 {
        font-size:       115%;
}

#FlexiMain h3 {
        font-size:       105%;
}

#FlexiMain h4 {
        font-size:       100%;
}

#FlexiMain a:link, 
#FlexiMain a:active, 
#FlexiMain a:visited, 
#FlexiMain a:hover {
        color:           black;
        text-decoration: underline;
}

#FlexiMain ul {
        padding-left:    20px;
        margin:          0;
        list-style-type: square;
}

#FlexiMain li {
        padding:         0;
        margin:          0;
}

#FlexiMain table {
        padding:         0;
        margin:          0;
        border:          1px solid white;
}

#FlexiMain th {
        background:      lightblue;
        padding:         2px 0 2px 7px;
        margin:          0;
}

#FlexiMain td {
        background:      aliceblue;
        padding:         2px 0 2px 7px;
        margin:          0;
}

#FlexiFooter {
        float:           right;
	width:           70%;
	margin:          3em 0 0 1em;
	border:          none;
	background:      white;
}

#FlexiRight {
	position:        absolute;
	top:             4em;
	left:            79%;
	width:           20%;
	height:          2em;
	border:          1px solid #bbb;
}

#FlexiBottom {
	margin:          0;
        width:           800px;
	border:          none;
        height:          3em;
	background:      white;
}