# Theme Name:Kim Raff
# Theme URI:http://mattbusse.com/
# Description:A theme for KimRaff.com,the Web site of photojournalist Kim Raff.
# Author:Matt Busse
# Author URI:http://mattbusse.com
# Version:0.1

/* YUI reset compressed */

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}

/* Basics, layout */

body
{
  background:#000;
  color:#fff;
  font:normal 14px/18px Arial,Helvetica,Sans-serif; }

#main
{
  margin:0;
  padding:0;
}

#wrapper
{
  width:100%;
}

#nsmsg {
  width:100%;
  background-color:#D3FFE8;
  color:#000;
  padding:6px;
}

#nsmsg a {
  color:red;
}

#header,#content,#footer
{
  width:845px;
  margin:0 auto;
  clear:both;
}

#header h1
{
  float:left;
  position:relative;
  left:10px
}

#content
{
  position:relative;
  top:-20px;
}

.fourohfour {
  top:3em !important;
}

/* Menu */

.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu {
	line-height:	1.0;
  float:right;
  padding:0;
  position:relative;
  top:24px;
  right:10px;
  z-index:500;
}
.sf-menu ul {
    border: 1px solid #383838;
	background-color:#000;
	position: absolute;
	top: -999em;
	width: auto; /* left offset of submenus need to match (see below) */
	padding: 10px 0; /* padding around all menu items collectively */
}
.sf-menu ul li {
	width: auto;
	clear:  both;
	padding: 0 5px; /* affects spacing between menu items */
}
.sf-menu li:hover {
	visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
  position: relative;
  float: left;
  height: 24px;
  display: inline;
  font-size: 20px;
  margin: 0 10px;
  text-transform:lowercase;
  z-index: 500;
}
.sf-menu a {
	display: block;
	position: relative;
}

.sf-menu li a
{
  display:block;
  text-decoration:none;
  color:white;
  font-size:20px;
  width:auto;
}

.sf-menu ul li a {
  width:180px; /* width of menu items */
}

.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left: 0;
	top: 29px; /* match top ul list item height */
	z-index: 99;
}

ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	/* affects sub-menus, like items under 'stories' menu option */
	left: 150px; /* match ul width */
	top: -10px;
}

.sf-menu li ul li ul li a {
        /* width of items under 'stories' menu option */
        width:220px;
}

ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top: -999em;
	left:5em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left: 8em; /* match ul width */
	top: 0;
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('../images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

.cufon-canvas
{
  float:left;
}


/* Text styles */ 

h1 {
  font-size:2.4em;
}

h2 {
  font-size:2.2em;
}

h3 {
  font-size:2.0em;
}

h4 {
  font-size:1.8em;
}

.title
{
  font-size:1.4em;
  width:50%;
  text-transform:uppercase; }

.title a
{
  text-decoration:none;
}

.description
{
  display:none;
}

h1,h2,h3,h4,h5,h6
{
  font-family:Helvetica,Arial,Sans-serif;
  margin-bottom:1.4em;
}

h1
{
  font-size:1.2em;
  z-index:30;
}

a:link
{
  color:#83B5BF;
}

a:visited
{
  color:#9F9F9F;
}

a:hover
{
  color:#D1EAEF;
}

a:active
{
  color:#83B5BF;
}

/* Photo captions */

.wp-caption
{
  width:840px !important;
}

.wp-caption-text
{
  width:90%;
  background:#000 none repeat scroll 0 0;
  font-size:1em !important;
  line-height:1.4 !important;
  height:auto;
  opacity:0.8;
  padding:10px 40px;
  position:absolute;
  left:0;
  bottom:0;
  margin-bottom:35px;
  text-align:left;
  z-index:500;
}

/* Buttons under photo */

#buttons-holder
{ 
  text-align:center;
  float:right;
  position:relative;
  right:20px
}
  
#captions-button
{
  float:left;
  margin-right:20px;
}

#captions-link
{
  text-decoration:none;
}

#buttons-container-left,#buttons-container-middle,#buttons-container-right,#buttons-container-counter,#buttons-container-total
{
  float:left;
}

#buttons-container-left
{
  margin-right:10px;
}

#buttons-container-right
{
  margin-left:10px;
}

/* Stepcarousel slideshow */

.panel img {
  max-width:820px;
  max-height:530px;
}

.panel p {
  /* to prevent gap if empty paragraph tag is inserted above image */
  font-size:0;
  line-height:0;
}
.stepcarousel
{
  position:relative; /* leave this value alone */
  overflow:scroll; /* leave this value alone */
  width:100%;
  height:550px; /* Height should enough to fit largest content's height */
}

.stepcarousel .belt
{
  position:absolute; /* leave this value alone */
  left:0;
  top:0;
}

.stepcarousel .panel
{
  float:left; /* leave this value alone */
  overflow:hidden; /* clip content that go outside dimensions of holding panel DIV */
  margin:0 auto; /* margin around each panel */
  width:850px; /* Width of each panel holding each content. If removed,widths should be individually defined on each content DIV then.  */
}
  
.size-full
{
 border:1px solid #8A8A8A;
}

.featured
{
  margin:0 auto;
}

.stepbottom
{
  width:850px;
  text-align:center;
}

.stepbottom h1, .stepbottom h2
{
  /* hide photo titles */
  display:none
} 

/* Multimedia pages */

#multimedia-container {
  width:100%;
  text-align:center;
  padding-top:10px;
}

/* Blog Styles */

#blog-container {
  width:960px;
  margin:0 auto;
  font-size:14px;
  line-height:1.5
}

#blog-content h1 {
  font-size:2.4em;
}
#blog-content h2 {
  font-size:2em;
}

#blog-content h3 {
  font-size:1.6em;
}

#blog-content h4 {
  font-size:1.2em;
}

#blog-content, #sidebar {
  float:left;
}

#blog-content {
  width:580px;
  margin-right:80px;
}

#sidebar {
  width:300px;
}

#author, #email, #url, #comment {
  padding:6px;
}

#comment {
  width:500px;
}

/* Other pages */

.page-content {
  padding-top:20px;
}

.page-content p {
  margin:0 0 20px 0;
}

.about-text {
  width:440px;
  float:left;
  margin-bottom:10px;
}

.about-container, .about-caption, .resume-content {
  width:360px;
}

.about-container {
  float:right;
}

.about-caption {
  clear:both;
  color:#8A8A8A;
  float:right;
  font-size:10px;
  font-style:italic;
  margin:0 0 20px 0;
  text-align:right;
}

.alignright {
  float:right;
  margin:0 0 0 20px
}

.resume-content {
  clear:both;
  float:right;
  padding:10px;
  text-align:center;
}

/* Footer */

#footer
{
  text-transform:lowercase;
  font-size:12px;
  clear:both;
  text-align:right;
  padding:0.3em;
}

.designcredit {
  clear:both;
  color:#404040;
  float:left;
  font-size:80%;
  margin-top:60px !important;
  text-align:center;
  width:100%;
}

.designcredit a:link, .designcredit a:visited {
  color:#404040;
  text-decoration:none;
}

.designcredit a:hover, .designcredit a:active {
  color:#404040;
  text-decoration:underline;
}