styles.css

@charset "UTF-8";
/* CSS Document */


/* 
Purple: http://slayeroffice.com/tools/color_palette/?hex=39275B
Gold (Original) : http://slayeroffice.com/tools/color_palette/?hex=C79900
Gold (Bright): http://slayeroffice.com/tools/color_palette/?hex=EBB700
*/

* { margin: 0; padding: 0; }

html {
	background: #2b1d44; /* Old browsers */
	background: -moz-linear-gradient(top,  #2b1d44 0%, #39275b 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2b1d44), color-stop(100%,#39275b)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #2b1d44 0%,#39275b 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #2b1d44 0%,#39275b 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #2b1d44 0%,#39275b 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #2b1d44 0%,#39275b 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b1d44', endColorstr='#39275b',GradientType=0 ); /* IE6-9 */
	}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background-image: url(images/bg-boxes.png);
	background-position: top ; /* positioned to the top of page */
	background-repeat: repeat-x; /* repeat horizontally */
	}
	
h1 {
	font-size: 36px;
	line-height: 36px;
	color: #FFF;
	}
	
h2 {
	font-size: 24px;
	line-height: 24px;
	color: #39275B; /* purple */
	/*padding-top: 8px;*/ 
	margin-bottom: 10px; /* changed */
	}
	
h3 {
	font-size: 18px;
	line-height: 18px;
	color: #39275B; /* purple */
	padding-top: 10px; /* changed */
	margin-bottom: 4px; /* changed */
	}
	
p {
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 10px;
	}
	
ol, ul {
	font-size: 16px;
	line-height: 24px;
	padding-left: 40px;
	margin-bottom: 10px;
	}
	
#header {
	width: 980px; /* change the width */
	margin: 0 auto;
	padding-top: 20px; /* change the padding */
	/*border: 1px solid black;*/
	}
	
	#header a {
		color: #FFFFFF; /* white */
		text-decoration: none; /* remove undeline */
	}
	
	#header a:hover {
		color: #C79900; /* gold */
	}	
	

#navigation {
	width: 980px; /* change the width */
	margin: 0 auto;
	padding: 10px 0; /* lets change this to 10px top/bottom and 0px left/right */
	/*border: 1px solid black;*/
	color: #FFF; /* give all text elements a color of white */
	}
	
	#navigation ul {
		overflow: hidden; /* prevents the great collapse */
		/*border: 1px solid grey;*/
		padding: 10px 0;
		margin: 0; /* overwrites existing margins */
	}
	
	#navigation ul li {
		list-style: none;
		float: left;
		margin: 0; /* overwrites existing margins */
		margin-right: 20px; /* gives the items space between */
	}
	
		#navigation ul li a {
			color: #FFF; /* let's use white for the default link state */
			text-decoration: none; /* this disables the default underline */
		}
		
		#navigation ul li a:hover {
			color: #EBB700; /* and use bright gold */
		}
		
		#navigation ul li.current a {
			color: #EBB700; /* and use bright gold */
		}
	
#content {
	width: 940px;
	/*background-image: url(images/bg-960.png);*/
	background-position: center;
	background-repeat: repeat-y;
	background-color:#FFFFFF;
	overflow: hidden; /* prevents the great collapse */
	margin: 0 auto;
	padding: 20px; /* change padding to 20px all around */
	border-radius: 10px; /* adds rounded corners */
	}
	
	#content a {
		color: #39275B; /* purple */
	}
	
	#content a:hover {
		color: #C79900; /* gold */
	}
	
	#text {
		width: 620px;
		float: left;
	}
	
	#sidebar {
		width: 300px;
		float: right;
	}
	
	#sidebar ul {
		padding-left: 0px; /* overwrite general padding */
	}
	
	#sidebar ul li {
		list-style: none; /* removes default bullet */
		background-image:url(images/bg-bullet.png);
		background-position: left; /* positioned to the left */
		background-repeat: no-repeat; /* do not repeat background */
		padding-left: 10px; /* creates padding so we can see the background image */
	}
	
#footer {
	width: 980px; /* change the width */
	margin: 0 auto;
	padding: 20px 0; /* change the padding */
	/*border: 1px solid black;*/
	color: #FFF; /* give all text elements a color of white */
	}
	
	#footer a {
		color: #FFFFFF; /* white */
	}
	
	#footer a:hover {
		color: #C79900; /* gold */
	}