/* include "html" before body to assist with IE6 and IE7 issues? - not doen this yet asnot sure this is what website means...
http://webforumz.com/html-xhtml-and-css/65750-vertical-alignment-issues-in-ie6-ie7.htm */
body
{
/* W3C - predefine margin and padding for the element to avoid visual differences in different browsers */
margin:0;
padding:0;
text-align: center;
}
/*************************** CONTAINER MAJOR *********************************************************/
#container
{
/* size to fit 800 x 600 px resolution */
width: 760px; /* 1024px */
height: 580px; /* 768 px */
/*centre the div in the viewport, apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport use a margin of 10px. Apply a margin of 10px to the top and bottom and auto margins to the left and right.
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm */
margin: 10px auto;
/* background-color: #fff; */
border: 1px solid #663366;
line-height: 120%;
text-align:center; /* W3C - centre block elements in IE */
background-color: #FFFFFF;
}
/*************************** HEADER *********************************************************/
#header
{
height: 100px;
width: 760px;
background-image: url("../images/soul_banner_105pc_f_fw_pr.jpg");
background-repeat: no-repeat;
position: relative;
z-index: 10;
}
#header h1
{
/* Browsers add different amounts of padding above an H1, remove all padding and margin from this H1 and let the div provide the padding.
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm */
padding: 0;
margin: 10px;
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 150%;
/* font-style: italic; */
letter-spacing: 3px;
color: #663366;
position: absolute;
z-index: -10;
}
#header h1 a span
{
display:none;
/*
or you could use text-indent:-9999px; or something else
*/
}
/*************************** CONTAINER MINOR *********************************************************/
#wrapper
{
/* background-color: #FFFFFF; */
text-align: left; /* W3C - reset text to left align */
height: 455px;
}
/*************************** NAVCONTAINER *********************************************************/
#navcontainer
{
/* keep nav bar always on the left.
W3C's Cascading Style Sheets, level 2, CSS2 Specifications states: "A floated box must have an explicit width..."
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm - */
float: left;
width: 150px;
height: 455px;
background-color: #FF6600;
margin: 0px;
text-align: left;
display: inline;
}
#navcontainer ul
{
display: block;
list-style-type: none;
/* http://css.maxdesign.com.au/listutorial/roll_master.htm# - Standard HTML lists have a certain amount of left-indentation. Remove left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL". */
margin: 0;
padding: 0;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 80%;
}
#navcontainer ul li
{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FF9900;
width: 150px
}
#navcontainer ul li a
{
display: block;
padding: 3px 0px 3px 5px;
width: 145px;
text-decoration: none;
}
#navcontainer ul li a:hover
{
color: #FFFF99;
padding-left: 5px;
background-color: #996699;
}
#navcontainer ul li a:link
{
color: #FFFF99;
text-decoration: none;
}
#navcontainer ul li a:visited
{
color: #FFFF99;
text-decoration: none;
}
#navcontainer #currentpage a
{
background-color: #663366;
text-decoration: none;
}
#navcontainer .navbar_list_unlinked
{
padding: 3px 0px 3px 5px;
color: #FFFF99;
text-decoration: none;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #FF9900;
width: 145px
}
#navcontainer ul ul
{
font-size: 85%;
}
#navcontainer ul ul li
{
border-bottom-style: none;
line-height: 100%;
padding: 2px 0 2px 10px;
}
#navcontainer ul ul a
{
display: block;
width: 130px;
color: #FFFF99;
text-decoration: none;
}
#navcontainer ul ul li a:hover
{
color: #FFFF99;
background-color: #996699;
}
#navcontainer ul ul li a:link
{
color: #FFFF99;
text-decoration: none;
}
#navcontainer ul ul li a:visited
{
color: #FFFF99;
text-decoration: none;
}
/*************************** CONTENT *********************************************************/
#content /* container */
{
/* W3C's Cascading Style Sheets, level 2, CSS2 Specifications states: "A floated box must have an explicit width..."
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm - */
margin-left: 170px;
height: 460px;
padding: 1px; /* padding required to ensure #navcontainer butts up to header */
text-align: left;
margin-right: 20px;
}
#content h1
{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-weight: bold;
font-size: 95%;
color: #330033;
}
#content h2
{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 80%;
font-weight: bold;
color: #330033;
}
#content p, ul
{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 80%;
color: #000000;
}
#content ul
{
padding-left: 15px ;
}
#content p.contact
{
font-weight: bold;
}
#content a
{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 100%;
color: #663366;
text-decoration: underline;
}
#content a:link a:visited
{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 100%;
color: #FF6600;
}
#content a:hover
{
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 100%;
color: #FFFFFF;
background-color: #663366;
}
/*************************** FOOTER *********************************************************/
#footer
{
clear: both;
background-color: #663366;
height: 25px;
color: #CC99FF;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 60%;
margin: 0;
}
#footer_txt_left
{
margin-top: 3px;
text-align: left; /* W3C - reset text to left align */
float: left;
margin-left: 5px;
display: inline;
}
#footer_txt_left a
{
color: #660033; /* #9900CC; */
text-decoration: none;
}
#footer_txt_left a:link, a:visited
{
color: #660033; /* #9900CC; */
text-decoration: none;
}
#footer_txt_left #active a
{
color: #663366; /* #9900CC; */
background-color: #CC99FF;
text-decoration: none;
}
#footer_txt_left a:hover
{
color: #663366; /* #9900CC; */
background-color: #CC99FF;
text-decoration: none;
padding: 3px;
}
#footer_txt_right
{
margin-top: 3px;
text-align: left; /* W3C - reset text to left align */
float: right;
margin-right: 5px;
display: inline;
}
/*
#footer
{
clear: both;
}
#footer_list
{
background-color: #663366;
margin: 0; /* moves footer up to bottom of navbar */
/*
height: 25px;
list-style-type: none;
/* text-align: center; */
/*font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 60%;
color: #CC99FF;
}
#footer_list li
{
display: inline;
list-style: none;
padding: 0;
margin: 0;
vertical-align: middle;
text-align: center;
}
/*
#footer_list #footer_txt_right
{
margin-right: 5px;
}
#footer_list #footer_txt_left
{
margin-left: 5px;
}
#footer_list #footer_txt_centre
{
text-align: center;
}
*/
/*
#footer ul
{
background-color: #663366;
margin: 0; /* moves footer up to bottom of navbar */
/*
height: 25px;
list-style-type: none;
text-align: center;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 60%;
color: #FFFF99;
text-align: center;
}
#footer li
{
display: inline;
vertical-align: middle;
}
#footer #footer_txt_right
{
float: right;
margin-right: 5px;
}
*/
/*
#footer_txt_left
{
margin-top: 12px;
text-align: left; /* W3C - reset text to left align */
/*
float: left;
margin-left: 5px;
display: inline;
}
#footer_txt_centre
{
margin-top: 12px;
float: left;
margin-left: 200px;
display: inline;
}
#footer_txt_right
{
margin-top: 12px;
text-align: left; /* W3C - reset text to left align */
/*
float: right;
margin-right: 5px;
display: inline;
}
*/
/*************************** W3C logos *********************************************************/
#w3c_xhtml
{
border: none;
position: relative;
z-index: -10;
left: 10px;
top: 230px;
}
#w3c_css
{
border: none;
position: relative;
z-index: -10;
left: 10px;
top: 220px;
}
/*************************** IDs and CLASSES *********************************************************/
#imgfloatleft
{
padding-right: 10px;
float: left;
}
.alignleft
{
float: left;
margin-left: 10px;
display: inline;
}
.alignright
{
float: right;
margin-right: 10px;
display: inline;
}
.clear
{
clear: both;
}
.bold
{
font-weight: bold;
}
.underline
{
text-decoration: underline;
}