/*----------------------------------------------------------------------------------------------------------
Hello all, this is a new version of our style sheet, this time with explanations (like this, in gray) describing
what each bit of code controls. When text like this appears gray, it means that it will be ignored by browsers.
It is just useful as notes for ourselves. We can do this by wrapping up a chunk of text with these two symbols
" /* " on one and the reverse of that on the other, like bookends.
Our First piece of css code, is the * controller. This means 'All'. So what this does is give everything
in our page 0 padding and 0 margin unless we specify otherwise. This is very handy as different browsers
sometimes like to add these to tables in varying amounts. so, for consistency, we are asking them here not to.
----------------------------------------------------------------------------------------------------------*/
* {
padding: 0px;
margin: 0px;}
/*----------------------------------------------------------------------------------------------------------
Next up is body. This controls what our average text should look like, it's size, font, and color, and what
kind of background we would like for our page.
----------------------------------------------------------------------------------------------------------*/
body {
font-size: 10px;
font-family:Arial, Tahoma, Helvetica, sans-serif;
color:#666666;
background-color:#FFFFFF;
}
/*----------------------------------------------------------------------------------------------------------
This should be applied to our entire table, rather than any individual cells within it. It gives us an
invisible margin around our table, so that it doesn't appear at the very top left of our page.
----------------------------------------------------------------------------------------------------------*/
.entire_table {
margin-top: 60px;
margin-right: 14px;
margin-bottom: 14px;
margin-left: 14px;
vertical-align: text-top;
}
/*----------------------------------------------------------------------------------------------------------
These are the diffent id's for our table cells. You will notice these are different from most of our cells
as they beign with a hash key: #. This is an id. Make sure you apply these id's to your individual table
cells.
----------------------------------------------------------------------------------------------------------*/
#top_left { width:150px;
height:20px;
vertical-align:top }
#top_right {width:490px;
height:20px;
vertical-align:top }
#navigation {width:150px;
vertical-align:top }
#main {width:490px;
vertical-align:top }
#footer_left {width:150px;
vertical-align:top }
#footer_right {width: 490px;
vertical-align:top }
#hor_spacer {width:20px}
#vert_spacer {height:20px}
#splash_row {width:660px}
#cv_left_column {padding-right:5px;
vertical_align:top;}
#cv_right_column {vertical_align:top;}
/*----------------------------------------------------------------------------------------------------------
The following tags describe how our browser should display the typography of our site. h1 stands for Header 1.
The most dominant of headers. h2 stands for Header 2, our sub-headers. We could have an h3 and an h4 but I don't think
they're necessary. the p tag stands for paragraph, and deals with our basic paragraph text- our body text.
----------------------------------------------------------------------------------------------------------*/
h1 {
text-decoration: none;
word-spacing: normal;
letter-spacing: 2px;
line-height: 20px;
font-size:10px;
text-transform: uppercase;
font-weight: normal;
vertical-align:top;
}
h2 {
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
word-spacing: normal;
line-height: 20px;
font-size:10px;
font-weight: normal;
vertical-align:top;
color:#009999}
p {
font-size: 11px;
line-height: 20px;
}
/*----------------------------------------------------------------------------------------------------------
the following are the style variables for all our links in our site. They break down as follows:
a:link : This controls our link appearance in it's normal state.
a:visited : This controls how our links should look once they've been clicked once. This is used to illustrate
the areas of a website that the visitor has already viewed.
a:hover : This controls the appearance whilst the mouse is 'hovering' above it
a:active: This controls it's appearance at the moment the mouse button is clicked.
----------------------------------------------------------------------------------------------------------*/
a:link { color: #444;
text-decoration: none;
}
a:visited { color: #444;
text-decoration:none;
}
a:hover { color:#538442;
text-decoration:none;
}
a:active { color: #538442;
text-decoration:none;
}
/*----------------------------------------------------------------------------------------------------------
If for some reason, you feel it necessary to have more than one 'style' of link (perhaps if you wanted blue ones in
your navigation bar, but green ones in your cv section for instance) You can use these here. I have called them
link1 and link2, but they could have been called whatever you wish. Just make sure they are preceded by a period as I
have done here (.link1, and .link2). This defines it as a 'class'. Having multiple style is usually unnecessary,
and a little confusing for the viewer but can look smart when used for a specific purpose.
----------------------------------------------------------------------------------------------------------*/
.link1 a:link { color: #444;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: normal;
font-size:10px;
font-weight: normal;
}
.link1 a:visited { color: #444;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
word-spacing: normal;
font-size:10px;
font-weight: normal;
}
.link1 a:hover {color: #0099ff;
background-color:#FFFF66
}
.link1 a:active {color: #ffffff;}
/*------------------------*/
.link2 a:link { color: #444;
text-decoration:none;
font-size:11px;
}
.link2 a:visited { color: #444;
text-decoration: none;
font-style:italic
}
.link2 a:hover { color: #0099ff;
background-color:#003399
}
.link2 a:active { color: #ffffff;}
/*----------------------------------------------------------------------------------------------------------
Below is a section for styles that you might want to apply to text in the middle of a paragraph. I have
called this style 'all_caps' and it allows me to capitalise the first few words of a paragraph.
----------------------------------------------------------------------------------------------------------*/
.all_caps { text-transform:uppercase;
font-size:10px;
letter-spacing:2px; }
/*----------------------------------------------------------------------------------------------------------
If using thumbnails you will need to apply this class to them to space them out from each other.
----------------------------------------------------------------------------------------------------------*/
.thumbnail { padding-right:30px;
padding-bottom:20px;
}
/*----------------------------------------------------------------------------------------------------------
The following we can use to transform our horizontal rules. If you want to use these you will need to wrap
your
(html-speak for Horizontal Rule) in your html page with this div tag to get this:
----------------------------------------------------------------------------------------------------------*/
div.horRule {
height: 3px;
border-top: 3px solid #444;
}
div.horRule hr {
display: none;
}
.definedlocation {
vertical-align: text-top;
position: absolute;
}
.spacerbottom {
vertical-align: bottom;
height: auto;
}