body{ /* The page background, font, font size and color. */
background-color:#E1E1E1;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#e1e1e1;
/* These are the values around the HTML code, so setting it on 0px will leaves us with no padding around the design, rendering the page at the absolute top. */
margin:5px;
padding:0px;
}
/* Our wrapper, which contains our 1px stretching background image (main_bg.jpg). */
#wrapper{
background:url("/DN Images/bg_main.jpg");
width:738px;
/* The following values will place this div in the middle, and since we put every div inside the wrapper it will render the whole page in the middle of the page.*/
margin:0px auto;
padding:0px;
}
/* The header image, with a left float, kinda easy and not much to explain =). */
#header{
background:url("/DN Images/header.jpg");
width:738px;
height:130px;
float:left;
}
/* Same as the left container but then a different width which I took from the c_top.jpg image. Float:left to align it to the left, and since the left container didn't fill the whole 960px of the wrapper layer it will join sides with the left container. */
#content_container{
width:738px;
float:left;
}
#nav {
width:738;
float:left;
margin:0 0 0em 0;
padding:0;
list-style:none; }
#nav li {
float:left; }
/* Our footer has the clear:both value, we could use clear:left since we only use left floats. But I allways use clear:both for this is the most effective way of clearing floats. */
#footer{
clear:both;
/* Our footer shadow image, */
background:url("/DN Images/footer.jpg");
width:738px;
/* the height of the footer image. */
height:41px;
}
.left_nav{
background:url("/DN Images/nav_left.jpg");
width:173px;
height:33px;
/* We change the default page font to the following */
font-family:Arial, Helvetica, sans-serif;
text-align:center;
/* With line-height you can adjust the text or images in div's, I adjusted it to 28px which is perfect for this design */
line-height:28px;
/* change the color of the text so we can see it! Default text is darker because the main content and menu boxes have a light gray color so text needs to be dark obviously. */
color:#e1e1e1;
}
/* The rest is self explanatory */
.button{
background:url("/DN Images/button.jpg");
width:95px;
height:33px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
line-height:28px;
color:#e1e1e1;
}
.right_nav{
background:url("/DN Images/Nav_right.jpg");
width:185px;
height:33px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
line-height:28px;
color:#e1e1e1;
}
.content_top{
background:url("/DN Images/c_top.jpg");
width:738px;
height:29px;
/* margin 2px so it doesn't hugs the text. If you use margin and have an image background and the width of that image in the divs width, you'll need to double the margin in this case 4, and get it off the width of the div.
So for example, when you have a margin of 2px, we have 4 extra px's in the div so the image doubles itself after 202px's, making the div's total width 206px's. So we take these 4px's margin off the total width of the div making the divs width 198px. */
margin:0px;
}
.top_space{
background:url("/DN Images/space_t.jpg");
width:738px;
height:13px;
/* margin 2px so it doesn't hugs the text. If you use margin and have an image background and the width of that image in the divs width, you'll need to double the margin in this case 4, and get it off the width of the div.
So for example, when you have a margin of 2px, we have 4 extra px's in the div so the image doubles itself after 202px's, making the div's total width 206px's. So we take these 4px's margin off the total width of the div making the divs width 198px. */
margin:0px;
padding:0px;
}
.b_spacer{
background:url("/DN Images/space_b.jpg");
width:738px;
height:10px;
/* margin 2px so it doesn't hugs the text. If you use margin and have an image background and the width of that image in the divs width, you'll need to double the margin in this case 4, and get it off the width of the div.
So for example, when you have a margin of 2px, we have 4 extra px's in the div so the image doubles itself after 202px's, making the div's total width 206px's. So we take these 4px's margin off the total width of the div making the divs width 198px. */
margin:0px;
padding:0px;
}
#navigation {
width: 175px;
float:left;
margin-left:25px;
margin-right:15px;
margin-top:25px;
margin-bottom:10px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
#navigation li {
border-bottom: 1px solid #BAD5EA;
}
#navigation li a:link, #navigation li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #4884c0;
color: #FFFFFF;
text-decoration: none;
}
#navigation li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#navigation ul ul {
margin-left: 12px;
}
#navigation ul ul li {
border-bottom: 1px solid #711515;
margin:0;
}
#navigation ul ul a:link, #navigation ul ul a:visited {
background-color: #BAD5EA;
color: #000000;
}
#navigation ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
p {
font-size: 100%;
line-height: 1.1em;
margin-top: 1.5em;
margin-bottom: 1.5em;
margin-right:25px;
margin-left:25px;
text-align:justify;
}
a:link {
text-decoration:none;
color:#FFFFFF;
}
a:visited {
text-decoration:none;
color:#FFFFFF;
}
a:active {
text-decoration:none;
color:#FFFFFF;
}
a:hover {
text-decoration:none;
color:#FFFFFF;
}