/***********************************************************************
Here is my basic document structure:
Generic Title
***********************************************************************/
body { background-color : #30A0E0; color : black; }
#wrapper { background-color : #2572A0; }
#header { background-color : #2572A0; color : #AADD88; }
#content-main { background-color : #D8EED1; }
#content-side { background-color : #BB5555; }
#footer { background-color : #2572A0; }
#header h1:hover { color : white; }
#content-side a:link { color : white; }
#content-side a:visited { color : white; }
#content-side a:hover { background-color: lightblue; color : black; }
body {
font: 12pt/14pt verdana, arial, helvetica, sans-serif;
}
#header {
top: 0px; /**/
left: 0px; /**/
right: 10px;
height : 130px; /**/
z-index: 1; /**/
border: 1px solid black; /**/
padding-left: 10px; /**/
text-align: left; /**/
font-family: sans-serif; /**/
background: #2572A0 ; /**/
}
#header h1 {
margin-top: 10px; /**/
font-size: largest; /**/
font-size: xx-large; /**/
padding-right: 1em; /**/
}
#header h2 {
font-size: large; /**/
padding-right: 1em; /**/
}
#content-side {
position: absolute; /**/
left: 10px; /**/
top: 195px; /**/
width: 220px; /**/
border: 1px solid black; /**/
padding: 3px; /**/
}
#content-side ul {
margin-left: 0; /**/
padding-left: 0; /**/
list-style-type: none; /**/
font-family: Verdana, Arial, Helvetica, sans-serif; /**/
}
#content-side li {
display: block; /**/
padding-left: 10px; /**/
padding-right: 10px; /**/
padding-bottom: 1px; /**/
font-weight: bold; /**/
font-size: small; /**/
width: 200px; /**/
border-bottom: 1px solid black; /**/
}
#content-side a {
display: block; /**/
width: 200px; /**/
text-decoration: none; /**/
} /**/
#content-side a img {
border-bottom: none;
} /**/
#content-main {
position: absolute; /**/
left: 240px; /**/
top: 195px; /**/
right: 10px;
border: 2px solid black; /**/
padding: 6px 6px; /**/
margin-left: 10px; /**/
voice-family: inherit; /**/
}
pre.code{
margin: 5px 25px; /**/
border: 2px dashed #ddd; /**/
padding: 3px 8px; /**/
}
dt {
margin-top: 1em; /**/
color: #DD0000; /**/
}
#content-main h3 {
margin-top: 5px; /**/
}
img {
border: none;
}
img.myImage {
position: relative;
clear: both;
float: right;
margin: 5px 5px 5px 10px;
border-left: 4px solid #000000;
border-right: none;
border-top: 4px solid #000000;
border-bottom: 4px solid #000000;
}
img.right {
float: right;
margin: 5px 5px 5px 10px;
border-left: 4px solid #000000;
border-right: none;
}
img.left {
float: left;
margin: 5px 10px 5px 5px;
border-left: none;
border-right: 4px solid #000000;
}
.floatRight {
float: right;
margin: 5px 5px 5px 10px;
border-left: 4px solid #000000;
border-right: none;
}
.floatLeft {
float: left;
margin: 5px 10px 5px 5px;
border-left: none;
border-right: 4px solid #000000;
}
withImage {
height:120px;
}
p {text-indent: 2em}
/*this id is for centering elements
#global {
margin-left: auto;
margin-right: auto;
width: 100%;/* mandatory to be centered */
}*/
#wrapper, #global{
height: 600px;
width: 600px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
}
#global{
text-align: center;
left: 50%;
position: relative;
top: 50%;
}
/*test code to center*/
#content-test{
height: 600px;
width: 600px;
}
#global-test{
height: 400px;
width: 400px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
background-color: #ff000;
}
#global{
text-align: center;
left: 50%;
position: relative;
top: 50%;
background-color: #FFFF00;
}