/***************************************************************/
/* Designed and Coded by hand in Emacs by Steven Ness (sness!) */
/*       email: sness@sness.net  website: www.sness.net        */
/*                                                             */
/*       I designed it with Inkscape and implemented it        */ 
/*          with Emacs, yay for freedom in software!           */
/***************************************************************/

/* Global styles */

body {
  margin: 0px; padding: 0px;
  font: normal small "trebuchet ms", verdana, sans-serif;
  color: #333;
  background: #8cd1f8;
}

div, p, form {
  padding: 0px; margin:0px;
}

img {
  border: none;
}

br.clear {
  clear: both;
  height: 0px;
  line-height: 0;
  font-size: 0px; /*for IE*/
}

.funky {
  color: #83287b;
}

h1 {
  color: #83287b;
  letter-spacing: -.05em;
  margin: 10px 0 0 0;
}

h2, h3 {
  letter-spacing: -.05em;
  margin: 10px 0 0 0;
}

h2 {
  color: #72A825;
  font: bold 220% 'trebuchet ms',verdana, sans-serif;
}

h3 {
  color: #5D6FB1;
  font: bold 180% 'trebuchet ms',verdana, sans-serif;
}


h4 {
  color: #5D6FB1;
  font: bold 100% 'trebuchet ms',verdana, sans-serif;
}

/* Header */

#header {
  background: transparent url('../images/gradient-slice.png') repeat-x;
}

#logo_left {
}

#logo_right {
  position: absolute; top: 0; right: 0;
}

/*************************************************************************/    
/* TOP NAVIGATION */
/*************************************************************************/ 

#wrapper #content #topnav {
  margin: 0px; padding: 0px; 
  margin-bottom: 10px;
  background: #33b3f3;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

#wrapper #content #topnav ul {
  margin: 0px; margin-left: 30px; padding: 0px; padding-top: 4px; padding-bottom: 4px;
  border-left: 1px solid #fff;
  align: center;
}   

#wrapper #content #topnav ul li {
  display: inline; 
  margin: 0px; padding-right: 10px; padding-left: 10px; padding-top:4px; padding-bottom: 4px;
  list-style: none; 
  background: #64bef1;
  border-right: 1px solid #fff; 
}

#wrapper #content #topnav ul li.lastlink {
  border-right: none;
}

/* selected navigation */
#wrapper #content #topnav ul li.sel {
  background: #ff9600;
} 

/* navigation link styling */
#wrapper #content #topnav ul li a:link {
  text-decoration: none; 
  color: #000000;
}

#wrapper #content #topnav ul li a:visited {
  text-decoration: none; 
  color: #000000; 
}

#wrapper #content #topnav ul li a:hover {
  text-decoration: none; 
  color: #ffffff;
}

/* selected navigation link styling */
#wrapper #content #topnav ul li.sel a:link {
  text-decoration: none; 
  color: #000000;
}

#wrapper #content #topnav ul li.sel a:visited {
  text-decoration: none; 
  color: #000000;
}

#wrapper #content #topnav ul li.sel a:hover {
  text-decoration: none; 
  color: #ffffff;
}

/* secondary navigation */                        
#secondary-div {
  margin: 0px;
  border: 1px solid #ff9600;
  background: #ff9600;
}

#wrapper #content #topnav ul.secondary {
  border-left: 1px solid #000; 
  margin-top: 1px;
  background: #ff9600;
}

#wrapper #content #topnav ul.secondary li {
  border-right: 1px solid #000; 
  background: #ff9600;
}

/* secondary navigation link styling*/
#wrapper #content #topnav ul.secondary li a:link {
  text-decoration: none; 
  color: #000;
}

#wrapper #content #topnav ul.secondary li a:visited {
  text-decoration: none; 
  color: #000;
}

#wrapper #content #topnav ul.secondary li a:hover {
  text-decoration: none; 
  color: #fff;
}

/* selected secondary navigation link styling*/
#wrapper #content #topnav ul.secondary li.sel a:link {
  text-decoration: none; 
  color: #000;
  font-weight: bold;
}

#wrapper #content #topnav ul.secondary li.sel a:visited {
  text-decoration: none; 
  color: #000;
  font-weight: bold;
}

#wrapper #content #topnav ul.secondary li.sel a:hover {
  text-decoration: none; 
  color: #fff;
  font-weight: bold;
}                 


/*************************************************************************/    
/*************************************************************************/    
/* CONTENT WELL */
/*************************************************************************/    
/*************************************************************************/   

#wrapper #content #well {
  margin: 10px; margin-top: 33px;
  margin-right: 200px;
  padding:10px; 
  border: 3px solid #404040;
  background: #ffffff;
}

#content p {
  font-size: 120%;
  margin:0 0 30px 0;
}

#content p.intro {
  font-size: 150%; 
}

#sness_photo {
  margin: -1px; margin-left:10px; margin-bottom: 0px; padding:1px; 
  border: 1px solid #404040;  
  background: #FFFFFF;
  width: 255px; height: 192px;
  float: right; display: inline;
}

/* Right hand side */

#wrapper #content #right {
  float: right;
  margin-right: 10px;
  width: 180px;
  text-align: right;
}

/* contact information */

#contact_info {
  padding-left: 30px;
}

/* footer */

#footer {
  clear: both;
}


/* Portfolio */

#portfolio {
}

#portfolio-title {
  text-align: center;
  margin-bottom: 10px;
}

.portfolio-picture {
  text-align: center;
}


.portfolio-item {
  border: 1px #aaa solid;
  padding: 20px;
  margin-bottom: 10px;
  font-size: 0.8em;
}

#badges-right {
  float: right;
}