/* <style> */

/*#########################
#                   	  #
#{ standard colours		 }#
#  header - #757575 	  #
#  h1 - #333        	  #
#  h2 - #444        	  #
#  h2 span - #639   	  #
#  h2 strong - #A30 	  #
#  h3 - #555        	  #
#  a - #666         	  #
#  p - #999         	  #
#  text-selection - #888  #
#                   	  #
#=========================#
#                   	  #
#{ Hover Colours   	  	 }#
#  purple - #639    	  #
#  blue - #3A3      	  #
#  red - #A33       	  #
#  green - #33A     	  # 
#  orange - #A30          #
#                         #
#=========================#
#                         #
#{ Fonts                 }#
#  HVD Comic Serif        #
#  Lucida Grande          #
#  Arail                  #
#  Sans-serif             #
#                         #
#########################*/

			
/*- html 5 -*/
header, nav, footer, section				{ display: block; }	
/*- default font -*/
*											{ font-family: "Lucida Grande", Arial, sans-serif; }
/*- bg etc -*/
body										{ background-color: #333; }
/*- the header and .center -*/
header.main									{ background-color: #757575; height: 450px; }
.center										{ width: 700px; margin: 0 auto; }
h1											{ font-size: 125px; color: #333; padding: 45px 0 0; font-weight: normal; }
h2											{ font-size: 48px; color: #444; padding: 15px 0 0; font-weight: normal; } 
h2 span										{ color: #639; }
h2 strong									{ font-weight: normal; color: #A30; }
h3											{ font-size: 20px; color: #555; line-height: 1.4em; padding: 15px 0 0; font-weight: normal; }
h3 a										{ color: #444; text-decoration: none; }
h3 a:hover									{ color: #A33; }
/*- more defaults -*/
a											{ color: #666; text-decoration: none; }
a:hover										{ color: #999; text-decoration: none; }
small										{ font-size: 0.8em; }
/*- blog specific stuff -*/
#blog section h3 a							{ color: #999; }
#blog section h3 a:hover					{ color: #639; } 
#blog #comments h2, #blog #contact h2		{ color: #999; }
#blog section em							{ color: #999; font-size: 0.8em; }
/*- all stuff for the navigation on the first page -*/
.mainnav									{ background-color: #252525; padding: 5px 0; text-align: center; }
.mainnav ul li								{ display: inline; color: #757575; font-size: 18px; }
.mainnav ul li:after						{ content: " - "; }
.mainnav ul li:last-child:after				{ content: ""; }
.mainnav ul li:first-child:after			{ content: ""; }
.mainnav ul li a							{ color: #777; text-decoration: none; }
.mainnav ul li a:hover						{ color: #777; }
.mainfooter									{ background-color: #252525; padding: 5px 0; }
.mainfooter p								{ font-size: 13px; color: #777; padding: 5px 5px; }
.mainfooter p a								{ color: #555; font-weight: bold; text-decoration: none; }
.mainfooter p a:hover						{ color: #33A; }
/*- all stuff for styling the content. Everything here is on the dark grey bg -*/
section p a									{ text-decoration: underline; }
section p:first-child						{ margin: 20px 0 10px; }
section p									{ color: #999; font-size: 13px; line-height: 1.4em; margin: 1.5em 0; }
section ul									{ list-style: outside; margin: 0 0 0 1em; }
section li									{ color: #999; margin: 2px 0; }
section p:last-child						{ margin: 1.5em 0 20px; }
section p a img								{ opacity: 0.6; filter:alpha(opacity=60); border: none; }
section p a:hover img						{ opacity: 1; filter:alpha(opacity=100); }
section h3									{ color: #A8A8A8; }
section hr									{ height: 0px; border-width: 2px 0 0; width: 80%; margin: 0 auto; }
/*- styling the various forms.. -*/
#form form input							{ width: 500px; }
#form form textarea							{ width: 698px; height: 250px; }
#form form input#submit						{ width: 60px; }
/*- styling the social networking icons -*/
#twitter									{ padding: 4px 0 4px 28px; background-image: url(img/twitter.png); background-position: left; 
											  background-repeat: no-repeat; line-height: 24px; margin: 0 0 0 3px; } 
#feed										{ padding: 4px 0 3px 35px; background-image: url(img/rss.png); background-position: left; 
											  background-repeat: no-repeat; line-height: 32px; margin: 0 0 0 3px; } 
/*- usefull classes for floating and what not -*/
.left										{ float: left; }
.right               						{ float: right; }
.clear										{ clear: both; }
/*- import the font face and then implement it -*/
@font-face									{ font-family: "hvd comic"; src: url(/fonts/hvd_comic.otf); }
h1, h2, h3, .mainnav, h2 span, h2 strong, .mainnav a, h3 a
											{ font-family: "hvd comic"; }
/*- styling the quotations -*/
blockquote:before							{ content: open-quote; }
blockquote									{ font-size: 13px; padding: 5px 5px 5px 30px; color: #999; font-style: italic; }
/*- grey text selection -*/
::selection 								{ background: #888; }
::-moz-selection 							{ background: #888; }

	/* </style> */