ÿþ/* +----------------------------------------------------------------------------------------------------+ |                                                                                                    | |    TYPOGRIDPHY - TYPOGRAPHICAL AND GRID LAYOUT CSS FRAMEWORK FROM HARRY ROBERTS OF CSS WIZARDRY    | |                                                                                                    | +-------------------------------------------------+--------------------------------------------------+ |                                                 |                                                  | |   TYPOGRIDPHY IS (C) COPYRIGHT OF HARRY ROBERTS   |   v 0.1.1                                        | |   IT IS FREE TO BE USED AND MODIFIED PROVIDED   |   May 2008                                       | |   THIS TEXT REMAINS INTACT -- CSSWIZARDRY.COM   |   http://csswizardry.com                         | |                                                 |                                                  | +-------------------------------------------------+--------------------------------------------------+ COLOUR REFERENCES BODY BG: #FFF TOP STRIP: #000 BODY COLOUR: #666 LINKS: #000 -------------------------------------------------------- */ /* RESET */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {   	margin:0;  	padding:0;  }  table {  	border-collapse:collapse;  	border-spacing:0;  }  fieldset,img {   	border:0;  }  address,caption,cite,code,dfn,em,strong,th,var {  	font-style:normal;  	font-weight:normal;  }  ol,ul {  	list-style:none;  }  caption,th {  	text-align:left;  }  h1,h2,h3,h4,h5,h6 {  	font-size:100%;  	font-weight:normal;  }  q:before,q:after {  	content:'';  }  abbr,acronym { 	border:0;  } /*---------- END RESET ----------*/ /*-------------------------------------------+ |                                            | |            MAIN STRUCTURE STYLES           | |                                            | +-------------------------------------------*/ html{ 	font-size:100%; 	min-height:101%; } body{ 	font-size:62.5%; 	font-family:Georgia, "Times New Roman", serif; 	color:#666; 	background:url(images/bg.jpg) top center repeat-x #c8c8c8;  	border-top:0.5em solid #efefef; 	padding:0 1em; } #wrapper{ 	width:94em; 	margin:0 auto; } #header{ 	width:94em; 	padding-top:1.5em; 	margin-bottom:2em; } /*NAVIGATION -------------------------------------------------------- */ #nav{ 	font-size:2em; } #nav a{ 	font-variant:small-caps; 	color:#000; } #nav a:hover{ 	text-decoration:none; } #nav span{ 	float:right; 	margin-top:-1.2em; } /*FOOTER NAVIGATION -------------------------------------------------------- */ #footer-nav{ 	word-spacing:0.2em; 	text-align:center; } #footer-nav a{ 	color:#777; 	text-decoration: none; 	font-size: 0.8em; } #footer-nav a:hover{ 	color:#46BAFF; } /*GRIDS -------------------------------------------------------- */ /* Set styles common among all grids - all grid divs must be assigned this class */ .generic{ 	border-top:0.5em solid #efefef; /* The border at the top of each grid */ 	float:left; 	padding-top:1em; 	margin-bottom:2em; } /* Sets styles for any 'start' grids - this class MUST be given to a grid that is the first in a horizontal series */ .clear{ 	clear:both; } /* Sets styles for any 'end' grids - this class MUST be given to a grid that is the last in a horizontal series */ .end{ 	margin-left:0 !important; 	margin-right:0 !important; } /* 220px */ .twotwenty{ 	width:22em; 	margin-right:2em; } /* 280px */ .twoeighty{ 	width:28em; 	margin-right:2em; } /* 340px */ .threeforty{ 	width:34em; 	margin-right:2em; } /* 400px */ .fourhun{ 	width:40em; 	margin-right:2em; } /* 460px */ .foursixty{ 	width:46em; 	margin-right:2em; } /* 520px */ .fivetwenty{ 	width:52em; 	margin-right:2em; } /* 580px */ .fiveeighty{ 	width:58em; 	margin-right:2em; } /* 640px */ .sixforty{ 	width:64em; 	margin-right:2em; } /* 700px */ .sevenhun{ 	width:70em; 	margin-right:2em; } /* 760px */ .sevensixty{ 	width:76em; 	margin-right:2em; } /* 820px */ .eighttwenty{ 	width:82em; 	margin-right:2em; } /* 880px */ .eighteighty{ 	width:88em; 	margin-right:2em; } /* 940px */ .nineforty{ 	width:94em; } /*-------------------------------------------+ |                                            | |                FONT STYLES                 | |                                            | +-------------------------------------------*/ /*PARAGRAPHS -------------------------------------------------------- */ .generic p{ 	font-size:1.2em; 	line-height:1.5em; 	margin-bottom:1.5em; 	font-family: Verdana; 	color: #555; } /* Styles an introductory paragraph, similar to newspapers. Assign this class to the first paragraph in an article */ p.intro:first-line{ 	font-variant:small-caps; } /* Styles a drop cap on each paragraph with this class */ p.drop:first-letter{ 	float:left; 	font-size:3em; 	margin-top:-0.05em; 	margin-right:0.1em; 	margin-bottom:-0.5em; } /*HEADINGS -------------------------------------------------------- */ h1{ 	color:#888; 	font-size:2.8em; 	margin-bottom:0em; 	font-style:italic; 	line-height:1.2em; } h2{ 	color:#444; 	font-size:2em; 	margin-bottom:0.9em; 	margin-top: 0.9em; 	line-height:0.9em; 	padding-left: 1em; border-left: #46BAFF solid 1em; } h3{ 	color:#000; 	font-size:1.5em; 	margin-bottom:1.2em; 	line-height:1.2em; 	font-variant:small-caps; } h4{ 	color:#000; 	font-size:1.2em; 	margin-bottom:1.5em; 	line-height:1.5em; 	font-variant:small-caps; } h5{ 	color:#000; 	font-size:1em; 	margin-bottom:1.8em; 	line-height:1.8em; 	font-variant:small-caps; } h6{ 	color:#000; 	font-size:1em; 	margin-bottom:1.8em; 	line-height:1.8em; } /*LINKS -------------------------------------------------------- */ p a{ 	color:#03AFD5; 	text-decoration: none; } p a:hover{ 	text-decoration:none; } h1 a{ 	color:#000; } h1 a:hover{ 	text-decoration:none; } li a{ 	color:#000; 	text-decoration: none; } li a:hover{ 	text-decoration:none; } /*ALL THE TRIMMINGS -------------------------------------------------------- */ blockquote{ 	font-size:1.2em!important; 	line-height:1.5em!important; 	margin-bottom:1.5em!important; 	font-style:italic; 	font-weight:bold; 	font-family: Georgia; 	color: #444; } blockquote p cite{ 	font-style:normal; } .generic strong{ 	font-variant:small-caps; } .generic em{ 	font-style:italic; 	font-weight:inherit; } .amp{ /* Give those ampersands a right sexy look */ 	font-family:Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; 	font-style:italic; 	font-weight:normal; 	line-height:inherit; } .blauw{  color: #46BAFF;} abbr{ 	border-bottom:1px dotted #666; 	border-color:inherit; 	cursor:help; } .clear{ 	clear:both; } .right-float{ /* Float any item to the right */ 	float:right; 	margin-left:2em; 	margin-right:0; } .left-float{ /* Float any item to the left */ 	float:left; 	margin-right:2em; 	margin-left:0; } .code{ /* Styling for and code type items */ 	font-family:Courier, "Courier New", monospace; 	background:#ddd; 	font-size:1em; } /*-------------------------------------------+ |                                            | |               IMAGE STYLES                 | |                                            | +-------------------------------------------*/ img{ 	font-size:1em; border-color: #46BAFF; } img.left-img{ /* Float any image to the LEFT and give it some margin */ 	font-size:1em; 	float:left; 	padding:4px; 	border:1px solid #ccc; 	margin-bottom:1.8em; 	margin-right:2em; 	margin-top:0.3em; } img.right-img{ /* Float any image to the RIGHT and give it some margin */ 	font-size:1em; 	float:right; 	padding:4px; 	border:1px solid #ccc; 	margin-bottom:1.8em; 	margin-left:2em; 	margin-top:0.3em; } /*CONTACT FORM STYLES -------------------------------------------------------- */ #contact-form{ } #contact-form label{ 	width:10em; 	float:left; 	margin-top:0.6em; } #name, #form-email, #url, #location{ 	width:42.7em; 	height:20px; 	padding:3px; 	padding-top:5px; 	border:2px solid #666; 	margin-bottom:18px; 	background:#fff !important; } #comments{ 	width:43.8em; 	height:10em; 	padding:3px; 	border:2px solid #666; 	margin-bottom:18px; 	overflow:auto; 	background:#fff !important; } #name:active, #form-email:active, #url:active, #location:active, #comments:active, #submit:active, #name:focus, #form-email:focus, #url:focus, #location:focus, #comments:focus, #submit:focus{ 	border:2px solid #000; } #submit{ 	clear:both; 	padding:5px; 	border:2px solid #666; 	background:#fff !important; 	cursor:pointer; 	margin-left:9em; } #reset{ 	clear:both; 	padding:3px; 	border:none; 	background:#f00 !important; 	cursor:pointer; 	float:right; 	color:#fff; 	margin-top:-28px; } /*-------------------------------------------+ |                                            | |                LIST STYLES                 | |                                            | +-------------------------------------------*/ ul{ 	margin-bottom:1.8em; 	list-style:square inside; } ul li{ 	font-size:1.2em; 	line-height:2em; 	font-family: Verdana; } ul li.caption{ /* Apply this class to the first list item in a list to give it a caption */ 	font-variant:small-caps; 	list-style:none; 	color:#000; } li > ul, li > ol{ 	margin-bottom:0; 	margin-left:5em; } li > ul li, li > ol li{ 	font-size:1em; } ol{ 	margin-bottom:1.8em; 	list-style:decimal inside; } ol li{ 	font-size:1.2em; 	line-height:1.5em; } /*-------------------------------------------+ |                                            | |               MISC. STYLES                 | |                                            | +-------------------------------------------*/ /* Slider */ #slider{}	 #slider ul, #slider li{ 	margin:0; 	padding:0; 	list-style:none; } #slider li{  	width:940px; 	height:225px; 	overflow:hidden;  	border-top: #efefef solid 2em; 	}	 /* navigatie */ 	ul#blue { margin:0; padding:0; list-style-type:none; float: right; } ul#blue li { position:relative; float:left; border-top:4px solid #efefef; margin-right: 15px; padding-right: 20px; padding-top: 5px;} ul#blue .current { border-top:4px solid #46BAFF;} ul#blue li:hover { border-top:4px solid #46BAFF;} ul#blue li a { padding:2px 2px; text-decoration:none; font:bold 11px Verdana, Georgia, "Times New Roman", Times, serif; color:#68759c;} ul#blue li a:hover { color:#8895b8; border:none; } ul#blue li span{ display:none; position:absolute; top:30px; left:2px; width:160px; font:normal 9px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; } ul#blue li a:hover span {margin-top: 7px; display:block; color: #8895b8;}