/*
* CSS
* @author Greg van Brug 
*/

/*  HEADER FORMATING	*/
*, body { margin: 0; padding: 0; }
html, body { height: 100% }
body { font-size: 11px; line-height: 17px; font-family: Georgia, serif; }

a:link, a:active, a:hover, a:hover, a:visited { text-decoration: none; color: #000000; }
a:hover { text-decoration: underline; }
a img { border: none; }


/*  HEADER FORMATING	*/
#title, #design { border-right: #CCCCCC 1px dotted; margin: 0 30px 0 0; float: left; height: 25px;  }
#title { padding: 7px 30px 3px 0; }
#design { padding: 5px 30px 3px 0; }


/*  'MENU' FORMATING 	*/
#menu { width: 100%; height: 65px; top: 0; left: 0; position: absolute; }
#menu a { text-decoration: none; }


/*	SECTION FORMATING	*/
#news, #work, #about, #contact, #blog { color: #FFFFFF; display: block; padding: 8px; font-size: 16px; float: left; margin: 0 2px 0 0; }
a#news:hover, a#work:hover, a#about:hover, a#contact:hover, a#blog:hover { background-color: transparent; }
#news {	background-color: #000000; border: 1px solid #000000; }
a#news:hover { color: #000000; }
#work { background-color: #33ccff; border: 1px solid #33ccff; }
a#work:hover { color: #33ccff; }
#about { background-color: #ec008c; border: 1px solid #ec008c; }
a#about:hover { color: #ec008c; }
#contact { background-color: #8cc63f; border: 1px solid #8cc63f; }
a#contact:hover { color: #8cc63f; }
#blog { background-color: #fdb913; border: 1px solid #fdb913; }
a#blog:hover { color: #fdb913; }


/*  PAGE FORMATING		*/
#page { min-height: 100%; width: 100% }
#content { width: 100%; margin: 0; position: absolute; top: 65px; border-top: #CCCCCC 1px dotted; }
.container, .work-container { padding: 15px 20px; }
#footer { position: absolute; bottom: 0; padding: 5px 5px 0 20px; background-color: #FFFFFF; }
#footer .container { padding: 2px; background-color: #FFFFFF; }


/*  EXTRA PAGE FORMATS			*/
#intro { width: 125px; border-bottom: 2px solid #DFD9AA; border-right: 1px solid #FFF000; padding: 15px; background-color: #FFFAC2; }
#about-image, #about-text, #about-links { margin: 0 10px 0 0; float: left; }
#about-image, #about-links { width: 265px; }
#about-text { width: 300px; }


/*  WORK SECTION		*/
#project { clear: both; }
#project-list, #project  { width: 950px; }
#project-list { float: left; }
#project-description { background-color: #fff; margin: 15px 15px 15px 5px; float: left; width: 265px; height:300px; border-top: #CCCCCC 1px dotted; }
#project-images { display: table; }
#project-images img { vertical-align: top; }


#project-list a { text-decoration: none; }
#project img { margin: 10px 10px 0 0; }
#project a, #about-links a { text-decoration: none; padding: 1px; background-color: #ffffcc; }
#project a:hover, #about-links a:hover { background-color: #b5d5ff; }

.print, .print-hit, .brand, .brand-hit, .web, .web-hit, .personal, .personal-hit, .print-web, .print-web-hit { padding: 3px; margin: 1px; width: 130px; display: block; float: left; }
a.print:hover, .print-hit, a.brand:hover, .brand-hit, a.web:hover, .web-hit, a.personal:hover, .personal-hit, a.print-web:hover, .print-web-hit { background-color: transparent; color: #000000; }
.print { background-color: #fffbd5; }
.print, a.print:hover, .print-hit { border: 1px solid #fffbd5; }
.brand { background-color: #d9d6d5; }
.brand, a.brand:hover, .brand-hit { border: 1px solid #d9d6d5; }
.web { background-color: #c7eafb; }
.web, a.web:hover, .web-hit { border: 1px solid #c7eafb; }
.print-web { background-color: #e3f2e8; }
.print-web, a.print-web:hover, .print-web-hit { border: 1px solid #e3f2e8; }
.personal { background-color: #ffe4b8; }
.personal, a.personal:hover, .personal-hit { border: 1px solid #ffe4b8; }


#all-projects {  }
#key { margin: 0 0 0 15px; padding: 0 0 0 15px; border-left: #CCCCCC 1px dotted; float: right; }
#key #print-project, #key #brand-project, #key #web-project, #key #personal-project, #key #print-web-project { margin: 0 0 3px 0; }
#key #print-project { border-left: 16px solid #fffbd5; }
#key #brand-project { border-left: 16px solid #d9d6d5; }
#key #web-project { border-left: 16px solid #c7eafb; }
#key #print-web-project { border-left: 16px solid #e3f2e8; }
#key #personal-project { border-left: 16px solid #ffe4b8; }


/*  TEXT FORMATS		*/
#content p { margin: 4px 0; }
#title { font-size: 32px; }
h1 { font-size: 11px; margin: 8px 0 8px 0; }
p.description { margin: 8px 0 0 0; }
p { margin: 4px 0 4px 0; }
#footer .container { font-size: 8px; background-color: #FFFFFF; }


/*	CONTACT FORM		*/
#contact-form, #contact-info { width: 265px; margin: 10px 10px 0 0; float: left;  border-top: 1px dotted #CCCCCC; }
#contact-info p { margin: 10px 0; }
form { margin: 10px 0; }
form label, form input, form textarea { float: left; clear: both; padding: 3px; font-size: 11px; }
form label { font-weight: bold; }
form input, form textarea { background-color: #FFFFEE; font-family: Verdana; }
form input, form textarea { margin: 0 0 10px 0; }