﻿/*
Theme Name: Casey Design Alternate
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/
Tags: blue, custom header, fixed width, two columns, widgets

	Kubrick v1.5
	 http://binarybonsai.com/kubrick/

	This theme was designed and built by Michael Heilemann,
	whose blog you will find at http://binarybonsai.com/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php

*/

/* Reset CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	font-size: 62.5%;
	font-family: Helvetica,Arial,sans-serif;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
hr {
	display: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a:visited, a:active, a:link {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: Helvetica, Tahoma, Geneva, sans-serif;
}

#outerWrapper {
	width: 1000px;
	margin: 0 auto 10px;
	overflow: hidden;
}

body.images #outerWrapper {
	width: 1200px;
	margin: 0 auto 10px;
	overflow: hidden;
}

body.words #outerWrapper {
	width: 1000px;
	margin: 0 auto 10px;
	overflow: hidden;
}

/*Home */
#header {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 80px;
}
#homeHeader {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 180px;
}
#header h1, #homeHeader h1 {
	position: absolute;
	text-indent: -999px;
}
#homeContent {
	height: 400px;
	overflow: hidden;
}
#homeContent h2 {
	text-indent: -999px;
}
#mainNav {
	clear: both;
	position: absolute;
	bottom: 0;
	left: 98px;
	width: 408px;
	height: 56px;
}
#mainNav li {
	float: left;
	display: inline-block;
	margin: 0;
	padding: 0;
	text-indent: -999px;
	font-size: 1.3em;
}
#mainNav li.words a {
	width: 179px;
	height: 57px;
	display: block;
	background: transparent url(images/words.png) no-repeat 0 -56px;
}
#mainNav li.words a:hover {
	background: transparent url(images/words.png) no-repeat 0 3px;
}
#mainNav li.and {
	width: 40px;
	height: 57px;
	background: transparent url(images/and.png) no-repeat 0 0px;
}
#mainNav li.images a {
	width: 187px;
	height: 57px;
	display: block;
	background: transparent url(images/images.png) no-repeat 0 -56px;
}
#mainNav li.images a:hover {
	background: transparent url(images/images.png) no-repeat 0 3px;
}
/*Header ====  Web Accessibiltiy*/
#webAccess {
	clear: both;	
}
#webAccess li {
	float: left;
	display: inline-block;
	margin: 0 10px 0 0;
	list-style-type: disc;
	list-style-position: inside;
	font-size: 1.3em;
}
#webAccess li a {
	text-indent: -999px;
	position: absolute;
}
/*Homagepage ==== Images */
#bannerImages {
	margin: 0 0 0 100px;
}
#bannerImages li {
	float: left;
	display: inline-block;
	width: 96px;
	height: 280px;
	overflow: hidden;
	margin: 0 8px 0 0;
}
#bannerImages li.nthChild-6 {
	width: 142px;
}

#bannerImages li#expand {
	width: 222px;
}

#bannerImages li img {
	position: relative;
	top: 0;
	right: 0;
}
#bannerImages li.nthChild-1 img {
	position: relative;
	top: 0;
	right: 0px;
}
#bannerImages li.ntChild-2 img {
	top: 4px;
	right: 78px;
}
#bannerImages li.nthChild-3 img {
	top: -8px;
	right: 24px;
}
/*#bannerImages li.nthChild-4 img {
	top: -2px;
	right: 230px;
}*/
#bannerImages li.nthChild-6 img {
	top: 0px;
	right: 0px;
}
#bannerImages li.nthChild-7 img {
	top: 0;
	right: 38px;
}
#byJohnd {
	clear: both;
	float: right;
	margin: 10px 6px 0 0;
}
#byJohnd li {
	float: left;
	display: inline-block;
	text-indent: -999px;
}
#byJohnd li.by {
	width: 76px;
	height: 50px;
	background: transparent url(images/by.png) no-repeat top left;
}
#byJohnd li.johnd a {
	width: 175px;
	height: 50px;
	display: block;
	overflow: hidden;
	background: transparent url(images/johnd.png) no-repeat 0 -64px;
}
#byJohnd li.johnd a:hover {
	background: transparent url(images/johnd.png) no-repeat 0 -4px;
}
/* Footer */
#footer {
	width: 100%;
	clear: both;
	overflow: hidden;
	position: relative;
}
#footer #borderTop {
	width: 1190px;
	border-top: 30px solid #000;
	clear: both;
}
#innerFooter {
	position: relative;
	clear: both;
	width: 900px;
	height: 80px;
	margin: 0 auto;
}
#footer ul {
	position: absolute;
	top: 32px;
	left: 0;
}
#footer ul li {
  	float: left;
	display: inline;
}
#footer ul li a {
	padding: 0 0 0 12px;
	margin: 20px 22px 0 0;
	text-decoration: none;
	font-size: 1.3em;
	font-color: #000;
	background: transparent url(images/bullet.png) no-repeat 0 3px;
}

#footer ul li a:hover {
	text-decoration: underline;
}
#footer span.emailMe a {
	position: absolute;
	right: 60px;
	top: 32px;
	padding: 0 0 0 12px;
	text-decoration: none;
	font-size: 1.3em;
	font-color: #000;
	background: transparent url(images/bullet.png) no-repeat 0 3px;	
}
#footer span.emailMe a:hover {
	text-decoration: underline;
}

/* Content */

/* Most of below applies to the About John Page, where alot of the construction/layout of pages was done to start off- As well as with the leftNav */  
#content #sidebar {
	float: left;
	display: inline;
	width: 250px;
}
#content #contentCenter {
	float: left;
	display: inline;
	width: 720px;
	posiiton: relative;
}
body.images #content #contentCenter {
	float: left;
	display: inline;
	width: 920px;
	position: relative;
}
#content #contentCenter .post {
	margin: 0 20px 10px 50px;
}
body.scans #content #contentCenter div.entry h2 {
	position: relative;
	text-indent: 0;
} 
#content #contentCenter h2 {
	text-indent: -9999px;
	position: absolute;
} 
#content #contentCenter p {
	margin: 8px 0 12px;
	padding: 0;
	font-size: 1.3em;
	line-height: 1.6em;
}
#content #contentCenter a {
	font-weight: bold;
	text-decoration: none;
}
#content #contentCenter a:hover {
	font-weight: bold;
	text-decoration: underline;
}
#containerLeftnav {
	float: left;
	display: left;
	width: 280px;
}
.leftNav {     
	width: 280px;
}
.leftNav li a {
	text-indent: -999px;
}
.leftNav li a.nthChild-1 {
	width: 179px;
	height: 48px;
	display: block;
	float: right;
	background: transparent url(images/words.png) no-repeat 0 0;
}
.leftNav li.page-item-19 a.inPath, .leftNav li.selected a.nthChild-1, .leftNav li a.nthChild-1:hover {
	background: transparent url(images/words.png) no-repeat 0 -59px;
}
.leftNav li a.nthChild-2 {
	width: 40px;
	height: 57px;
	display: inline-block;
	float: left;
	clear: both;
	margin-left: 48px;
	background: transparent url(images/and.png) no-repeat 0 0;
}
.leftNav li a.nthChild-3 {
	width: 187px;
	height: 57px;
	display: inline-block;
	float: right;
	background: transparent url(images/images.png) no-repeat 4px 3px;
}
.leftNav li.page-item-20 a.inPath, .leftNav li.selected a.nthChild-3:hover, .leftNav li a.nthChild-3:hover {
	background: transparent url(images/images.png) no-repeat 4px -56px;
}
.leftNav li a.nthChild-4 {
	width: 76px;
	height: 50px;
	display: block;
	float: left;
	clear: both;
	margin-left: 28px;
	background: transparent url(images/by.png) no-repeat top left;
}
.leftNav li a.nthChild-5 {
	width: 175px;
	height: 50px;
	display: block;
	float: right;
	overflow: hidden;
	background: transparent url(images/johnd.png) no-repeat 0 -4px;
}
.leftNav li.page-item-21 a.inPath, .leftNav li.selected a.nthChild-5:hover, .leftNav li a.nthChild-5:hover {
	cursor: pointer;
	background: transparent url(images/johnd.png) no-repeat 0 -64px;
}
#navImageone img, #navImagetwo img {
	display: inline;
}
#navWordone img, #navWordtwo img {
	display: inline;
}
#navJohnone img, #navJohntwo img {
	display: inline;
}
#navImageone {
	width: 96px;
	height: 282px;
	display: inline-block;
	overflow: hidden;
	float: left;
	margin-left: 70px;
	margin-top: 12px;
	background: transparent url(images/homepage/Jenine-Los-Angeles-4.jpg) no-repeat 0 0;
}
#navWordone {
	width: 96px;
	height: 282px;
	display: inline-block;
	overflow: hidden;
	float: left;
	margin-left: 70px;
	margin-top: 12px;
	background: transparent url(images/words1.jpg) no-repeat 0 0;
}
#navJohnone {
	width: 96px;
	height: 282px;
	display: inline-block;
	overflow: hidden;
	float: left;
	margin-left: 70px;
	margin-top: 12px;
	background: transparent url(images/johnD1.jpg) no-repeat 0 0;
}
#navImagetwo {
	width: 96px;
	height: 282px;
	display: inline-block;
	overflow: hidden;
	float: right;
	margin-top: 12px;
	margin-right: 4px;
	background: transparent url(images/homepage/Notebook.jpg) no-repeat 0 0;1
}
#navWordtwo {
	width: 96px;
	height: 282px;
	display: inline-block;
	overflow: hidden;
	float: right;
	margin-top: 12px;
	margin-right: 4px;
	background: transparent url(images/words2.jpg) no-repeat 0 0;1
}
#navJohntwo {
	width: 96px;
	height: 282px;
	display: inline-block;
	overflow: hidden;
	float: right;
	margin-top: 12px;
	margin-right: 4px;
	background: transparent url(images/johnD2.jpg) no-repeat 0 0;1
}
#content h2 {
	text-indent: -9999px;
}

/* Most of Above applies to the About John Page - As well as with the leftNav */

/* Words Page - Listings */  
#contentCenter p , #contentCenter li {
	margin: 8px 0 12px;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.6em;
}
#contentCenter h2 {
	font-size: 1.6em;
}
#contentCenter h3 {  
	padding: 0 0 0 16px;
	background: transparent url(images/tri.png) no-repeat 0 0;
	font-size: 1.4em;
}
#contentCenter ul#listingItems li h3 {
	padding: 0 0 0 16px;
	margin: 8px 0 14px;
	background: transparent url(images/tri.png) no-repeat 0 2px;
	font-size: 1.5em;
	font-weight: normal;
	text-transform: lowercase;   
}
#contentCenter ul#listingItems li div h3 {
	padding: 0;
	margin: 8px 0 4px 5px;
	background: transparent url(images/tri.png) no-repeat 0 2px;
	font-size: 1.4em;
	font-weight: normal;
	text-transform: lowercase;	
}
#contentCenter ul#listingItems li h3.active {
	background: transparent url(images/tri.png) no-repeat scroll 0 -36px;
}
#contentCenter ul#listingItems li div h3, #contentCenter ul#listingItems li div h3.active {
	background: none;
}
#contentCenter ul#listingItems li div ul {
	margin: 10px 0 14px 10px;
}
#contentCenter ul#listingItems li div {
	margin: 4px 0 0 12px;
}
#contentCenter ul#listingItems ul li {
	margin: 0 0 0 10px;
	padding: 0 0 0 16px;
	background: transparent url(images/plus.png) no-repeat 0 5px;
	list-style-position: outside;
	list-style-type: none;
}
#content #contentCenter #listingItems {
	float: left;
	display: inline;
	width: 400px;
}
#bloggersFeed {
	float: right;
	display: inline;
	width: 200px;
}
#contentCenter #bloggersFeed h3.noBackground {
	background: none;
	margin: 0 0 12px;
	padding: 0;
	font-size: 1.6em;
	font-weight: normal;
}
#bloggersFeed h4 a {
	display: block;
	margin: 8px 0;
	padding: 0 0 0 16px;
	font-size: 1.1em;
	background: transparent url(images/plus.png) no-repeat scroll 0 2px;
}
/* Images Page - Listings */

#imageGallery {
	clear: both;
	overflow: hidden;
	float: right;
	margin: 22px 0 0;
} 
#imageGallery li {
	clear: both;
}
#imageGallery li a {
	display: block;
	padding: 0 0 0 16px;
	margin: 14px 0;
	font-size: 1.6em;
	font-family: Helvetica,Arial,sans-serif;
	color: #999999;
}
#imageGallery li a.active {
	color: #000;
	background: transparent url(images/tri.png) no-repeat 0 2px;
}

/*Galleria*/
#wrapper #img {        
	overflow: hidden;
    position: relative;
    width: 568px;
    height: 520px;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
body.images #wrapper #img {
	width: 818px;
	height: 500px;
}
#wrapper { 
	height: auto;
	width: 572px;
	overflow: hidden;
}
body.images #wrapper {
	width: 820px;
}
#wrapper #img, #gallery li {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#wrapper .galleria_wrapper {
	margin: 0 auto;
	text-align: center;
}
#wrapper #gallery li {
    float: left;
    padding: 1px;
    background: transparent url(../i/ajax-loader-small.gif) 50% 50% no-repeat;
    border-color: #345;
    cursor: pointer;
}                   
#wrapper #gallery li img {
	border: 1px solid #ccc;
}

#wrapper .caption {
    display: block;
	position: absolute;
	width: 100%;
	height: 22px;
	bottom: 0;
    margin: 0;
	line-height: 2em;
	text-align: center;
	font-size: 1.4em;
	background-color: #fff;
}

/*Galleria 2*/
#wrapperTwo #img {        
	overflow: hidden;
    position: relative;
    width: 568px;
    height: 400px;
	border-right: 1px solid #CCC;
	border-left: 1px solid #CCC;
}
#wrapperTwo { 
	height: auto;
	width: 572px;
	overflow: hidden;
}
#wrapperTwo #img, #gallery li {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#wrapperTwo .galleria_wrapper {
	margin: 0 auto;
	text-align: center;
}
#wrapperTwo #gallery li {
    float: left;
    padding: 1px;
    background: transparent url(../i/ajax-loader-small.gif) 50% 50% no-repeat;
    border-color: #345;
    cursor: pointer;
}                   
#wrapperTwo #gallery li img {
	border: 1px solid #ccc;
}

#wrapperTwo .caption {
    display: block;
	position: absolute;
	width: 100%;
	height: 20px;
	bottom: 0;
    margin: 0;
	line-height: 2em;
	text-align: center;
	font-size: 1.4em;
	background-color: #fff;
}
