/*--------------------
----------------------
GLOBALZ
----------------------
----------------------*/

* {margin:0; padding:0;}

body {font-size:62.5%; padding:20px; text-align:center; font-family:georgia, times, serif;  color:#000; background:#fff url('../images/bg-container.png') repeat top left; background-attachment:fixed;}

a {text-decoration:none; color:#000;}

p {font-size:1.1em; margin-bottom:1.2em; line-height:1.5em;}

  p a {text-decoration:underline;}

em {font-style:italic;}

strong {font-style:bold;}

label {color:#fff; padding:3px; border:none; font-size:1.1em; margin-bottom:1em; display:block;  float:left; }
input {width:250px; padding:3px; border:none; display:block; margin-bottom:1em; float:left; clear:left;}
textarea {margin-bottom:1em; display:block; padding:3px; border:none; float:left; clear:left;}
input.button {float:left; display:block; clear:left; width:auto; cursor:pointer; background:#fff; color:#000;}

/*tools*/
.float-left {float:left;}/*I know this is semantically wack and for that I apologize.*/
.float-right {float:right;}/*I know this is semantically wack and for that I apologize.*/


/*------------------
STRUCTURE
-------------------*/

#container {margin:0 auto; background:#fff; padding:20px 10px 10px 10px; text-align:left; width:750px;}

  #header {border-bottom:1px solid #999;}
  
  #primary-content {} 
  
  
/*------------------
HEADER STYLES
-------------------*/  

#header {height:37px;}
  
  h1 a {float:left; width:200px; height:33px; background:url('../images/bg-h1.png') no-repeat top left; text-indent:-5000px; display:block;}
  
  ul#navigation {font-size:1.2em; padding-top:16px; margin:0 0 0 645px;}
  
    ul#navigation li {float:left;}
    
      ul#navigation li a {text-decoration:underline; display:block; float:left; margin-right:15px;}
      
        ul#navigation li a:hover {background:yellow;}
  
  #header p {margin:0; display:block; line-height:1.2em; font-size:1em;}
  
  #header p a {font-size:1.1em; padding-bottom:5px;}
  
h2#preamble {font-size:4em; padding:20px 0; font-weight:normal;}


/*------------------
#PRIMARY-CONTENT STYLES
-------------------*/

h3 {font-size:1.6em; font-style:italic; font-family:georgia, 'times new roman', serif; font-weight:normal; clear:left; /*background:url('../images/bg-h3-arrow.png') no-repeat 0 8px;*/ margin-bottom:10px; padding:7px 0 7px 0; border-top:4px solid #000; border-bottom:1px solid #999;}

p.top a {display:block; width:15px; height:15px; position:absolute; background:url('../images/bg-top.png') no-repeat top left; text-indent:-5000px; margin:-35px 0 0 732px;}

  #tooltip { position:absolute; background:yellow; padding:3px 5px; color:#000; font-size:1.1em; display:none;}

h4 {font-size:1.4em; font-weight:bold; line-height:1.3em;}

div.content-section ul {font-size:1.1em; line-height:1.4em;}

  div.content-section ul li {}
  
div.portfolio-entry, div.content-section {margin-bottom:60px;}
  
  div.images {float:left; margin-right:10px;}
  
  	div.images img {margin-bottom:10px;}

    div.images img.bordered {border:1px solid #ccc; }/*This is wack and does not semantically describe content. I apologize.*/
    
    p.more a {display:block; background:#000; padding:3px; color:#fff; margin-left:430px; font-size:1.3em; text-align:center; text-decoration:none;}

		ul.more-images {}

div.info {margin-left:10px;}

	p.take-action a { padding:3px; background:yellow; text-decoration:none;}
	
	  p.take-action a:hover {background:#000; color:#fff;}
	
div.content-column {float:left; width:240px; margin-right:30px;}

  div.content-column ul li {list-style-type:none; background:url('../images/bg-bullet.gif') no-repeat 0 5px; padding-left:7px;}

div#contact-form {width:500px; background:#000; margin-right:10px; float:left; border:1px solid #ccc; padding:0 1em 1em 1em;}

  div#contact-form div#note, div#contact div.notification_ok {color:#fff; line-height:1.5em; font-size:1.2em; margin:1em 0;}
  
p#email-me {float:left; width:200px;}



/* == :(( Fix so that the outer DIV will wrap around all floated DIVs within )): == */

.clearfix:after { content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden; }

.clearfix {display: inline-table;}

	/* Hides from IE-mac */
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */