8/9/2019 CSS-file duiklogboek

1/4

main.css

Date: woensdag 24 maart 2010 Page 1 of 4

/*Theme Name: divelog-styleTheme URI: not yet available

Description: 2 columnsVersion: 1.2Tags: 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: 1pxsolid#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 tag

*/}

#banner, #mainRight, #mainLeft, #main, #sideLeft, #sideRight, #footer, #below {padding: 12px10px20px10px; /* create a distance between content and border

*/text-align: left; /* resets the text alignment */

}

#banner {background: url('../images/logo.jpg')no-repeattopright; /* 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

8/9/2019 CSS-file duiklogboek

2/4

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: 5px20px; /* 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 2px6px; /* create a margin bottom en left */display: block; /* create a block box (line break before and

8/9/2019 CSS-file duiklogboek

3/4

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 6px2px0; /* 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: 1pxsolid#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: 5px15px; /* 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 */

8/9/2019 CSS-file duiklogboek

4/4

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 isgrey */

background: white; /* backgroundcolor of the list */text-decoration: none; /* remove underlining */}

/* redefine html tags */ul, ol {

margin: 2px0 6px16px; /* create space around ordered and unorderedlists */}p {

margin-top: 0.6em; /* create space between paragraphs */}