main.

css
Date: woensdag 24 maart 2010 Page 1 of 4
/*
Theme Name: divelog-style
Theme URI: not yet available
Description: 2 columns
Version: 1.2
Tags: fixed width, two columns, widget ready, white, blue
Author: BeakerFlo
Author URI: http://floris.vanenter.nl/
*/

/* reset everything, no margin, no padding */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
}

/* main fields */

body {
font-family: Helvetica, Geneva, Arial; /* set the font family to Helvetica with Arial
as an alternative */
text-align: center; /* centers our layout in some browsers */
font-size: 75%; /* resets 1em to 12px */
color: #444; /* set the main text color to #444 */

background: #eee; /* set the main background color to #eee */

}

#wrapper {
width: 860px; /* adjust standard width */
margin: 0 auto; /* margin left and right set to auto to center,
top & bottom is 0 */
background: white; /* set the content background color to white */
border: 1px solid #ddd; /* the container gets a line drawing around the
container */
border-top: none; /* the top-line is removed so it does not break
the layout */
}

#wrapper h1, #wrapper h2, #wrapper h3, #wrapper h4 {

margin-top: 5px; /* create a little space above every <hx> tag
*/
}

#banner, #mainRight, #mainLeft, #main, #sideLeft, #sideRight, #footer, #below {

padding: 12px 10px 20px 10px; /* create a distance between content and border
*/
text-align: left; /* resets the text alignment */
}

#banner {
background: url('../images/logo.jpg') no-repeat top right; /* image to be displayed as the
banner */
height: 191px; /* define the height of the banner, default is
total - padding space = this number */
padding-bottom: 0px; /* override the padding on the bottom */
}

#banner h1 {
color: white; /* color of the title text */
padding-top: 20px; /* vertically align the title */
padding-left: 10px; /* horizontally align the title */
}

#mainRight, #mainLeft {
width:630px; /* width of the main content div: 860px - (2*
10px - 2* 5px) - 200px | width - padding - side */
}

#mainRight, #sideRight {
float:right; /* align the div to the right */
padding-left: 5px; /* overwrite the default padding of 10px with
main.css
Date: woensdag 24 maart 2010 Page 2 of 4
5px */
}

#mainLeft, #sideLeft {
float:left; /* align the div to the left */
padding-right: 5px; /* overwrite the default padding of 10px with
5px */
}

#main, #below {
width:840px; /* width of the width div: 860px - (2* 10px) |
width - padding */
}

#sideLeft, #sideRight {
width:200px; /* width of the side content div */
font-size: 0.9em; /* resets 1em to 12px */
}

#footer {
clear: both; /* make sure you are below the other DIVs */
background: #C1B686; /* color of the footer-bar */
height: 16px; /* define the height of the footer-bar, default
is total - padding space = this number */
padding: 5px 20px; /* create a distance between the border and
content + it vertical aligns in the center */
color: #5C3317; /* color brown in the text */
font-weight: bold; /* create a heavier font */
}

#below {
clear: both; /* make sure you are below the other DIVs */
width: 860px; /* adjust standard width */
margin: 0 auto; /* margin left and right set to auto to center,
top & bottom is 0 */
padding-top: 10px; /* create a little space between footer and
this div */
background: #eee; /* Set the main background color to #eee */
}

#upperHalf {
}

#lowerHalf {
clear: both; /* make sure you are below the other DIVs */
padding-top: 20px; /* create a little space between footer and
this div */
}

.widget {
margin-bottom: 16px; /* create space between widgets */
}

.widgetText {

div.hidden {
display: none; /* hide a div on command */
}

/* text in main fields */

.right {
text-align: right; /* align objects right */
}

.center {
text-align: center; /* align objects center */
}

.left {
text-align: left; /* align objects left */
}

.strong {
font-weight: bold; /* create a heavier font */
}

img.right {
float: right; /* align the image to the right */
margin: 0 0 2px 6px; /* create a margin bottom en left */
display: block; /* create a block box (line break before and
main.css
Date: woensdag 24 maart 2010 Page 3 of 4
after the element) */
}

img.left {
float: left; /* align the image to the left */
margin: 0 6px 2px 0; /* create a margin bottom en right */
display: block; /* create a block box (line break before and
after the element) */
}

img.center {
margin-left: auto;
margin-right: auto; /* align the image in the center */
display: block; /* create a block box (line break before and
after the element) */
}

/* tables used in divelog */

.showTable {
margin-top: 8px;
margin-left: auto;
margin-right: auto; /* align the table in the center */
width: 98%; /* width of the table is 98%, this creates a
small indent between the text */
border-collapse: collapse; /* remove border between cells */
border-spacing: 0; /* remove spacing between cells */
}

.showTable th {
border-bottom: 1px solid #ddd; /* draw a line under the headlines */
}

.showTable td {
padding: 4px; /* create some room between the border and text
*/
}

table.showTable .even {
background-color: #FFF; /* even rows have a white filling */
}
table.showTable .odd {
background-color: #eee; /* odd rows have a #eee filling */
}

/*- Main Menu in Header */

ul.menu {
margin-top: 111px; /* position the block 109pixels below the title
*/
margin-left: 0px; /* position the block as left as possible */
}

ul.menu,
ul.menu li {
float: left; /* align the menu as left as possible */
list-style: none; /* remove all the bullets and other list
symbols */
}

ul.menu li {
margin-right: 4px; /* create a room of 4 pixels between list items
*/
}

ul.menu li a {
display: block; /* create a block box (line break before and
after the element) */
padding: 5px 15px; /* create a space on the top and the sides */
font-size: 1em; /* decrease the font to 1em */
color: white; /* color of the font is white */
text-decoration: none; /* remove underlining */

border-top-left-radius: 4px; /* make sure the edges round in the corner */

border-top-right-radius: 4px; /* make sure the edges round in the corner */
-moz-border-radius-topleft: 4px; /* make sure the edges round in the corner on
Firefox */
-moz-border-radius-topright: 4px; /* make sure the edges round in the corner on
Firefox */
-webkit-border-top-left-radius: 4px; /* make sure the edges round in the corner on
browsers with webkit */
-webkit-border-top-right-radius: 4px; /* make sure the edges round in the corner on
browsers with webkit */
main.css
Date: woensdag 24 maart 2010 Page 4 of 4
}

ul.menu li a:hover {
color: #eee; /* color of the font where you hover over is
grey */
text-decoration: underline; /* remove underlining */
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover,
ul.menu li.current_page_ancestor a,
ul.menu li.current_page_ancestor a:hover {
color: #333; /* color of the font where you hover over is
grey */
background: white; /* backgroundcolor of the list */
text-decoration: none; /* remove underlining */
}

/* redefine html tags */

ul, ol {
margin: 2px 0 6px 16px; /* create space around ordered and unordered
lists */
}
p {
margin-top: 0.6em; /* create space between paragraphs */
}