/* GLOBAL STYLES ----------------------------------------------- */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Sets the global font */
	font-size: 100%; /* Sets the font size to 100% of the user's browser preference, */
	color: #000000; /* Sets the global text colour */
	
	 /* fallback (Opera) */
		    background: #0033CC;
	 /* Mozilla: */
		    background: -moz-linear-gradient(top, #0033CC, #FFFFFF);
	 /* Chrome, Safari:*/
		    background: -webkit-gradient(linear,
		                left top, left bottom, from(#0033CC), to(#FFFFFF));
	  /* MSIE */
	    filter: progid:DXImageTransform.Microsoft.Gradient(
	                StartColorStr='#0033CC', EndColorStr='#FFFFFF', GradientType=0); 
	
	}

/* CONTAINER -------------------------------------------------- */

#container {
	background-color: #FFFFFF; /* Sets the background colour for the container div */
	width: 780px; /* Sets the width of the container (optimized for users with 800 by 600 screen resolution) */
	border: 0px solid #000000;
	/* margin-right: 10%;    */
	/* margin-left: 10%;     */
	margin:0 auto
}

/* SIDEBAR -------------------------------------------------- */

#sidebar {
	display: inline; /* Fixes IE double float margin bug (doubled margin on the side that matches the direction the div is floated). */
	float: left; /* Moves div to the left side of its container and allows content div to sit on its right. */
	width: 165px; /* Sets the width of the sidebar column */
	margin-top: 5px; /* Adds 5 pixels of margin above the sidebar */
	margin-left: 5px;  /* Adds 5 pixels of margin to the left of the sidebar */
}

/* NAV -------------------------------------------------- */

#nav ul {
  margin: 0px;  /* Zeros out the margins on the list */
  padding: 0px; /* Zeros out the padding on the list */
}

#nav li {
  font-size: 85%; /* Sets the font size of links to 85% of the user's browser preferences */
  list-style: none; /* Removes the bullet from list items */
} 

#nav a {
  display: block; /* Changes the a element from its default inline display property to display as a block. */
  width: 100%; /* Forces links to expand to fill their entire container, making the entire button area clickable instead of just the text. */
  margin-bottom: 5px; /* Puts space between buttons. */
  text-align: center; /* Centers the button text */
  padding-top: 5px; /* Puts space between the link and the top edge of the button */
  padding-bottom: 5px; /* Puts space between the link and the top edge of the button */
} 

#nav a:link, #nav a:visited {
  color: #000000; /* Sets the text color of links and visited links. */
  text-decoration: none; /* Removes the underline from links. */
  background: #00CCFF; /* Sets the background colour for the links. */
  /* background: #B3BCA6;  Sets the background colour for the links. */
} 

#nav a:hover, #nav a:active {
  color: #FFFFFF; /* Sets the text colour for the links */
  background: #000099; /* Sets the background colour for the links */
  /* background: #677E47;  Sets the background colour for the links */
} 

/* SUBNAV -------------------------------------------------- */

#subnav {
  border: 1px solid #CCCCCC; /* Adds a 1 pixel, solid, light gray border around the div */
  margin-top: 5px; /* Adds 5 pixels of space between it and the div above it */
  width: 163px; /* Sets the div width to 163, allowing 2 pixels for the borders on either side */
}

#subnav p {
  font-size: 80%; /* Sets the font size to 80% of the user's browser preference */
  text-align: center; /* Centers the links in the div */
  margin-right: 5px; /* Adds 5 pixels of space on the right of subnav paragraphs */
  margin-left: 5px; /* Adds 5 pixels of space on the left of subnav paragraphs */
}

#subnav ul {
  margin: 0px; /* Zeros out the margins on the list */
  padding: 0px; /* Zeros out the padding on the list */
}

#subnav li {
  list-style: none; /* Removes the bullet from each list item */
  margin-bottom: 5px; /* Adds 5 pixels of bottom margin space to give the links breathing room */
  text-align: center; /* Centers the links */
}

#subnav a {
  color: #6B824C; /* Sets the text colour of the secondary links */
  font-size: 85%; /* Sets the font size to 85% of the user's browser preference */
}

/* SIDE CONTENT ---------------------------------------------- */

#sideContent {
 /* border: 1px solid #CCCCCC; */ /* Adds a 1 pixel, solid, light gray border around the div */
 border:none
  margin-top: 5px; /* Adds 5 pixels of space between it and the div above it */
  width: 163px; /* Sets the div width to 163, allowing 2 pixels for the borders on either side */
}

#sideContent p {
  font-size: 80%; /* Sets the font size to 80% of the user's browser preference */
  margin-right: 5px; /* Adds 5 pixels of space on the right of sideContent paragraphs */
  margin-left: 5px; /* Adds 5 pixels of space on the left of sideContent paragraphs */
}

/* CONTENT -------------------------------------------------- */

#content {
	margin-top: 0px; /* Removes all margin space above the content div */
	margin-right: 20px; /* Adds 20 pixels of margin space to the right of the content div */
	margin-bottom: 0px; /* Removes all margin space beneath the content div */
	margin-left: 200px; /* Carves out 200 pixels of margin space on the left side of the content div to make room for the sidebar div */
}

#content h2
{

    font-size: 110%; /* Sets the font size to 110% of the user's browser preference */
    margin-top: 0px;
}

#content li {
  font-size: 80%; /* Sets the font size to 80% of the user's browser preference */
}

#content p {
	font-size: 85%; /* Sets the font size to 85% of the user's browser preference */
	line-height: 1.4;
}

/* added styling for links in the comntent area------------- */
#content a:link {
	color: #3366cc;
	text-decoration: none
}
#content a:visited {
	color: #666699;
	text-decoration: none
}
#content a:hover {
	color: #0066ff;
	text-decoration: underline
}
#content a:focus {
	background-color: #ffff00;
	text-decoration: none
}
#content a:active {
	color: #cc00ff;
	text-decoration: underline
}

/* HEADER -------------------------------------------------- */

#header
{
    border-style: none;
    background-position: left top;
    background-image: url('../assets/images/tsc-banner-5.png');
    background-repeat: no-repeat;
    display: block;
    width: 780px;
    height: 200px;
}

#header h1
{
    text-indent: 280px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 140%;
    font-weight: bold;
    color: #000000;
    top: 144px;
    position: relative;
}

/* FOOTER -------------------------------------------------- */

#footer {
	color: #7F7F48; /* Sets the text colour of the footer */
	margin-top: 5px; /* Adds 5 pixels of space above the footer */
	margin-right: 10px; /* Adds 10 pixels of space to the right of the footer */
	margin-bottom: 5px; /* Adds 5 pixels of space below the footer */
	margin-left: 5px; /* Adds 5 pixels of space to the left of the footer */
	border: 1px solid #CCCCCC; /* Adds a 1 pixel, solid, light gray border around the div */
}

#footer ul {
  text-align: center;  /* Centers all the text in the footer div */
  margin: 5px 0px; /* Adds 5 pixels of space above and below the footer list, and 0 pixels of space to the right and left of the list */
	}

#footer li {
	display: inline;  /* Changes the list items from block to inline elements */
	}

#footer a:link, #footer a:visited {
  margin: 5px; /* Adds 5 pixels of space all around the links to give them breathing room within the footer */
  font-size: 80%; /* Sets the font size to 80% of the user's browser preference, */
  color: #008080; 
  /*  color: #687F48;  */ /* Sets the text colour of the links */
}
	
#footer a:hover, #footer a:active {
	/* color: #686B3F;  */ /* Sets the text colour */
	color: #4C4FFF;
	background: #ECECEC; /* Sets the background colour */
	text-decoration: none; /* Removes the underlines from links */
}

/* CLASSES -------------------------------------------------- */


.style3 {
	font-size: smaller
}

.style4 {
	color: #FF0000;
	font-weight: bold;
}


.fltlft {
	float: left; /* Moves the image to the left side of its container and allows text to flow around its right side. */
	margin-right: 8px; /* Adds 8 pixels of space to the right of the image so that it does not touch the text */
	border: 1px solid #2B331C; /* Puts a border around the image */
}

.fltrt {
	float: right; /* Moves the image to the right side of its container and allows text to flow around its left side. */
	margin-left: 8px; /* Adds 8 pixels of space to the left of the image so that it does not touch the text */
}

.clearfloat {
	font-size: 1px; /* Sets the font size to 1 pixel */
	line-height: 0px; /* Sets line-height to 0 -font and line-height, even if not explicitly on the page, might add diemnsion to the clearing element rather than make it larely invisible */
	clear: both; /* Keeps floated divs from draping over objects beneath them. */
	height: 0px; /* Makes sure the clearing element has no height */
}

/* Style added to put space around an image placed on the right hand side of a page */
.rhimg {
    float: right;
	margin-left: 10px;
	margin-right: 23px;
	margin-bottom: 10px;
}