/*--------------------------------------------------------------------
======================================================================

JOHN BALLANCE PHOTOGRAPHY
Screen styles

Parka Design
Baton Rouge, LA 70816
+1 225 686 5211

http://www.parkadesign.com

Contents:

	1. Setup
	2. Body
	3. Headings
	4. Links
	5. General
	6. Header
	7. Footer
	8. Home Page
	9. Samples Page
	10. About Page
	11. Contact Page
	12. Order Page
	13. Photo Browser
	14. Shopping Cart
	
======================================================================
--------------------------------------------------------------------*/


/* 1. Setup
--------------------------------------------------------------------*/
@import url(reset.css);

input[type=hidden] {
display: none; }


/* 2. Body
--------------------------------------------------------------------*/
body {
border-top: 10px solid rgb(26, 26, 26);
font: 13px/1.6 "Helvetica", Arial, sans-serif;
color: rgba(0, 0, 0, .73);
background: url(../images/site/wood-rotated3.jpg); }


/* 3. Headings
--------------------------------------------------------------------*/
h1 {
font-size: 39px; }

h2 {
margin-bottom: 30px;
font-size: 23px;
text-transform: uppercase;
color: rgba(0, 0, 0, .8); }

h3 {
margin-bottom: 0px;
font-size: 16px; }


.footer .triple p {
font-size: 12px; }


/* 4. Links
--------------------------------------------------------------------*/
a {
text-decoration: none;
color: rgb(221, 0, 0);
-webkit-transition-property: color;
-webkit-transition-duration: .5s; }

a:hover {
color: rgb(187, 0, 0); }


/* 5. General
--------------------------------------------------------------------*/
#page {
width: 960px;
margin: 0 auto 40px; }

#header {
width: 960px;
height: 137px;
border-top: 10px solid rgb(17, 17, 17); }

#main {
width: 840px;
padding: 60px;
border-top: 1px solid rgba(0, 0, 0, .1);
overflow: hidden;
background: rgb(255, 255, 255); }

#footer {
border-top: 1px solid rgb(17, 17, 17);
border-bottom: 1px solid rgb(17, 17, 17);
overflow: hidden; }

.button {
padding: .5em 1em;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 0.8em;
-moz-border-radius: 0.8em;
display: block;
font-weight: bold;
text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.4);
text-align: center;
color: rgb(255, 255, 255);
background: rgb(221, 0, 0); }

.button:hover {
color: #fff;
background: rgb(201, 0, 0); }


/* 6. Header
--------------------------------------------------------------------*/
#pre-nav {
width: 960px;
height: 60px;
margin: auto; }

#pre-nav a {
width: 115px;
padding: 8px 0 5px;
border: 1px solid rgba(0, 0, 0, .3);
border-top: none;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 2px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .6);
display: block;
position: absolute;
top: 0;
z-index: 10;
font-weight: bold;
font-size: 11px;
color: rgb(255, 255, 255); }

#pre-nav li:first-child a {
right: 190px;
text-indent: 40px;
text-transform: uppercase;
background: url(../images/site/cart.png) 14px center no-repeat rgb(20, 20, 20); }

#pre-nav li + li a {
right: 60px;
text-transform: uppercase;
text-align: center;
background: rgb(221, 0, 0); }

#pre-nav li + li a:hover {
padding-top: 10px; }

body > .nav a:hover {
padding-top: 10px;
text-decoration: none; }

#header {
background: rgb(255, 255, 255); }

#header h1.logo {
width: 259px; 
height: 107px;
position: absolute;
left: 60px;
top: 0;
text-indent: -9999px;
background: url(../images/site/john-ballance-photography-2.png) 0 bottom no-repeat; }

#header h1.logo a {
height: 44px;
margin-top: 63px;
display: block; }

#header .nav {
position: absolute;
right: 60px;
bottom: 49px;
font-weight: bold;
font-size: 11px;
text-transform: uppercase; } 

#header .nav li {
margin-left: 10px;
float: left; }

#header .nav a {
display: block;
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
line-height: 1;
color: rgba(0, 0, 0, .6);
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.5s; }

#header .nav a:hover {
color: rgb(80, 80, 80);
text-decoration: none;
background-color: rgba(0, 0, 0, 0.04); }

#header .nav a.current, #header .nav a.current:hover {
background-color: rgba(0, 0, 0, 0.04); }

/* 7. Footer
--------------------------------------------------------------------*/
#footer {
text-shadow: rgb(0, 0, 0) 0 -1px 0;
color: rgba(190, 190, 190, .75); 
background: url(../images/site/jb-mark.png) 860px 0 no-repeat rgb(17, 17, 17); }

#footer a {
color: rgba(255, 255, 255, .4); }

#footer .vcard {
margin: 60px 40px 60px 60px;
float: left; }

#footer .nav {
margin: 60px 40px 60px;
float: left; }

#footer .nav li {
}

#footer > p {
width: 400px;
margin: 60px 40px 60px 60px;
float: left; }

#footer .nav + div {
padding: 20px;
clear: left;
overflow: hidden;
font-size: 10px;
text-transform: uppercase;
color: rgb(255, 255, 255);
background: rgb(24, 24, 24); }

#footer .nav + div a {
color: rgb(221, 0, 0); }

#footer .nav + div > div {
float: left; }

#footer .nav + div > div + div {
float: right; }


/* 8. Home Page
--------------------------------------------------------------------*/
.home #main .figure {
width: 608px;
height: 404px;
margin-bottom: 40px;
padding: 6px;
float: left;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
background: url(../images/site/big-loader.gif) center no-repeat #EAEAEA; }

.home #main .figure .label {
display: none; }

.home #main .figure img {
width: 608px;
height: 404px;
position: absolute; }

.home #main .header {
float: right; }

.home #main .header #strapline {
width: 180px;
margin: -7px 0 25px;
padding-bottom: 24px;
font: 31px/1.3 Georgia, "Times New Roman", Times, serif;
text-transform: none;
background: url(../images/site/180-shadow.png) bottom no-repeat; }

.home #main .header #strapline em {
font-style: normal;
color: rgba(0, 0, 0, .65); }	
	
.home #main .header p {
width: 180px;
margin-bottom: 25px;
font-size: 14px; }	

.home #main .header a {
width: 160px; }

.home #main .aside {
width: 190px;
margin-right: 25px;
float: left;
clear: left;
color: rgba(0, 0, 0, .8);
background: url(../images/site/ldquo-15-small.jpg) no-repeat; }

.home #main .aside blockquote {
width: 175px;
padding: 15px 0 0 15px;
font: italic 17px/1.6 Georgia, "Times New Roman", Times, serif; }

.home #main .aside blockquote + p {
padding-right: 15px;
font-style: italic;
font-size: 11px;
text-transform: uppercase;
text-align: right; }

.home #main .aside + p {
width: 404px;
float: left;
-webkit-column-count: 2;
-moz-column-count: 2; }

.home #main .aside + p em {
margin-top: 5px;
float: right;
font-size: 11px;
text-transform: uppercase; }

span.testimonial {
font: italic 12px/1.6 Georgia, "Times New Roman", Times, serif; }


/* 9. Samples Page
--------------------------------------------------------------------*/
.samples #samples {
width: 780px;
height: 530px;
border: 1px solid #DDD;
padding: 19px 19px 123px;
background: #EEE;
overflow: hidden; }

.samples .holder {
max-height: 530px;
position: absolute;
border: 10px solid rgb(255, 255, 255);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
overflow: hidden; }

.samples .slideshow img {
max-width: 760px;
height: 530px; }

.samples .controls {
width: 100%;
height: 81px;
position: absolute;
right: 0;
bottom: 0px;
border: 1px solid rgb(17, 17, 17);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
background: url(../images/site/soft-hilite.png) repeat-x rgb(17, 17, 17); }

.samples .controls ul {
width: 530px;
padding: 15px;
float: right;
overflow: hidden; }

.samples .controls ul li {
float: right;
margin-right: 1px; }

.samples .controls li.last {
margin: 0; }

.samples .controls img {
width: 45px;
display: block;
border: 3px solid rgba(0, 0, 0, 0.3);
opacity: .7;
-webkit-transition-property: border, opacity;
-webkit-transition-duration: .8s, .5s;  }

.samples .controls img:hover {
border-color: rgba(0, 0, 0, 0.6);
opacity: 1; }

.samples .controls select {
margin: 32px 0 0 20px;
float: left; }


/* 9. About Page
--------------------------------------------------------------------*/
.about .bio {
width: 400px;
float: right; }

.about .bio h3 {
margin: -12px 0 10px;
font: 32px/1.6 Georgia, "Times New Roman", Times, serif; }

.about .bio p {
margin-bottom: 10px; }

.about img {
float: left; }

.about .button {
margin-top: 10px;
float: left; }

/* 11. Contact Page
--------------------------------------------------------------------*/
.contact .aside {
width: 180px;
float: right;
font-size: 12px; }

.contact .aside h3 {
margin-top: 15px; }

.contact .aside h3:first-child {
margin-top: 0; }

.contact a[rel=vcard] {
margin-top: 15px;
padding-left: 25px;
display: block;
line-height: 16px;
background: url(../images/site/vcard-16x16.png) 0 center no-repeat; }

.contact form {
width: 620px;
margin-right: 39px;
border-right: 1px solid rgba(0, 0, 0, 0.08);
float: left; }

.contact form p {
width: 440px;
margin-bottom: 30px; }

.contact label {
margin-bottom: 15px;
display: block; }

.contact label span {
width: 100px;
padding: 5px 6px;
float: left;
font-weight: bold; }

.contact input[type=text] {
width: 320px;
margin: 0;
padding: 5px 6px;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
display: block; }

.contact input[type=hidden] {
display: none; }

.contact input[type=submit] {
margin-left: 110px;
cursor: pointer; }

.contact textarea {
width: 320px;
height: 120px;
margin: 0;
padding: 5px 6px;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
display: block; }


/* 12. Order Page
--------------------------------------------------------------------*/
.order #events {
width: 620px;
min-height: 128px;
float: left; }

.order #events li {
width: 170px;
min-height: 110px;
margin-right: 20px;
padding: 20px 0 20px 130px;
border-bottom: 1px dotted #CCC;
float: left;
position: relative;
background: url(../images/site/big-loader.gif) center no-repeat; }

.order #events li.first {
padding-top: 0; }

.order #events li.odd {
margin-right: 0; }

.order #events h3 {
margin: 0 0 5px;
font-weight: bold;
font-size: 18px; }

.order #events a.button {
margin-top: 10px;
float: left;
font-size: 10px;
color: #555;
background: #EEE; }

.order #events a.button:hover {
color: #FFF;
background: #D00; }

.order #events div.preview {
border: 1px solid #DDD;
position: absolute;
left: 0;
top: 20px;
overflow: hidden; }

.order #events li.first div.preview {
top: 0; }

.order #events div.preview a {
height: 100px;
display: block;
border: 4px solid rgb(255, 255, 255);
overflow: hidden; }

.order #events div.preview img {
width: 100px; }

.order .ui-datepicker {
width: 178px;
float: left;
margin: 0 40px 20px 0; }

.order .ui-datepicker .ui-datepicker-header {
padding: 5px 0;
position:relative;
background: url(../images/site/soft-hilite.png) 0 bottom repeat-x #333; }

.order .ui-datepicker .ui-datepicker-prev, .order .ui-datepicker .ui-datepicker-next {
display: block;
position: absolute;
z-index: 10;
cursor: pointer; }

.order .ui-datepicker .ui-datepicker-prev {
left: 10px;
color: rgb(255, 255, 255); }

.order .ui-datepicker .ui-datepicker-next {
right: 10px;
color: rgb(255, 255, 255); }

.order .ui-datepicker .ui-datepicker-title {
text-align: center;
color: rgb(255, 255, 255); }

.order .ui-datepicker table {
width: 100%;
padding: 10px;
border: 1px solid rgba(0, 0, 0, .2);
font-size: 11px;
background: rgb(250, 250, 250); }

.order .ui-datepicker th {
margin-bottom: 10px;
font-weight: bold;
text-align: center; }

.order .ui-datepicker td a {
margin: 0 2px 2px 0;
padding: 2px;
display: block;
border: 1px solid rgba(0, 0, 0, .5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
text-align: right;
text-decoration: none;
color: rgb(255, 255, 255);
background-color: #D00;
-webkit-transition: background-color 0.5s;}

.order .ui-datepicker td a:hover, .order td a.ui-state-active {
background-color: #B00; }

.order .aside {
width: 160px;
float: left; }


/* 12. Event browser
--------------------------------------------------------------------*/
#thumbnails-pane {
	width: 247px;
	height: 532px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	border: 1px solid #000;
	border-right: none;
	background: rgba(5, 5, 5, .9);
}

#thumbnails-pane .expand {
	width: 12px;
	height: 534px;
	position: absolute;
	z-index: 2;
	right: 0;
	border-left: 1px solid #000;
	font-size: 15px;
	text-align: center;
	line-height: 514px;
	color: #666;
	background: url(../images/site/soft-hilite.png) repeat-y #111;
}

#thumbnails-pane .expand:hover {
	color: white;
	background-color: #191919;
}

#thumbnails ul {
	width: 228px;
	height: 457px;
	padding: 0;
	position: absolute;
	z-index: 0;
}

#thumbnails li {
	width: 70px;
	height: 70px;
	margin: 6px 6px 0 0;
	padding: 0;
	float: left;
	background: url(../images/site/thumb-loader.gif) center no-repeat #222;
}

#thumbnails img {
	border: 1px solid rgba(0, 0, 0, .2);
	width: 69px;
	height: 69px;
	opacity: 0.8;
}

#thumbnails img:hover {
	opacity: 1;
}

#thumbnails-pane .controls {
	width: 100%;
	height: 69px;
	border-top: 1px solid #111;
	position: absolute;
	top: 462px;
	font-size: 15px;
	background: url(../images/site/soft-hilite.png) repeat-x #111;
}

#thumbnails-pane .controls a {
	padding: 2px 10px;
	display: block;
	position: absolute;
	border: 1px solid rgba(0, 0, 0, .6);
	text-align: center;
	color: white;
	background: #E00;
	-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .6);
	-moz-border-radius: 4px;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .6);
	-webkit-border-radius: 4px;
}

#thumbnails-pane .controls a:hover {
	
}

#thumbnails-pane .controls a[rel=back] {
	left: 6px;
	top: 20px;
}

#thumbnails-pane .controls a[rel=forth] {
	right: 19px;
	top: 20px;
}

#selected-pane {
width: 591px;
position: absolute;
left: 308px;
top: 60px; }

#selected {
width: 100%;
height: 462px;
border: 1px solid #DDD;
border-bottom: none;
line-height: 462px;
text-align: center;
background: #EEE; }

#selected img {
height: 333px;
display: none;
border: 6px solid white;
vertical-align: middle;
background: url(../images/site/big-loader.gif) center no-repeat white;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .3); }

#selected-pane .controls {
width: 531px;
height: 69px;
padding-left: 60px;
border: 1px solid #BBB;
font-size: 15px;
background: url(../images/site/strong-hilite.png) repeat-x #CCC; }

#selected-pane .controls > * {
position: absolute;
top: 20px; }

#selected-pane .controls select {
width: 150px;
left: 50px;
top: 25px; }

#selected-pane .controls input[name=quantity] {
width: 30px;
left: 270px;
top: 25px;
border: none;
text-align: center;
background: none; }

#selected-pane .controls button.decrease {
left: 235px;
top: 25px; }

#selected-pane .controls button.increase {
left: 310px;
top: 25px; }

#selected-pane .controls #order-total {
left: 370px;
top: 24px; }

#selected-pane .controls a {
width: 98px;
padding: 5px 0 4px;
border: 1px solid rgba(0, 0, 0, .3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 0 0 3px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .6);
display: block;
left: 440px;
font-size: 12px;
text-align: center;
color: #FFF;
background-color: #222; }

#selected-pane .controls a[rel=add] {
position: absolute;
font-size: 11px;
text-transform: uppercase;
background-color: #D00; }

#selected-pane #success-message {
width: 591px;
position: absolute;
bottom: 0;
display: none;
line-height: 1; }

#selected-pane #success-message p {
width: 250px;
margin: auto;
padding: 15px 20px 15px 35px;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
color: rgb(255, 255, 255);
background: url(../images/site/tick.png) 20px center no-repeat rgba(0, 0, 0, 0.85); }

#photo-id {
padding: 3px 8px 1px;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
position: absolute;
right: 75px;
top: 75px;
z-index: 100;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.25); }


/* 00. Cart
--------------------------------------------------------------------*/
.cart #cart-section {
width: 400px;
float: right; }

.cart #cart-section tr {
margin-bottom: 20px;
padding-bottom: 10px; }

.cart #cart-section thead th {
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted rgba(0, 0, 0, 0.2); }

.cart #cart-section th, .cart #cart-section td {
width: 20%;
text-align: center; }

.cart #cart-section td {
line-height: 40px;
vertical-align : middle; }

.cart #cart-section td:first-child span {
padding: 5px 8px 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-size: 11px;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0.7); }

.cart #cart-section td img {
vertical-align : middle; }

.cart #form-section {
width: 400px;
float: left; }

.cart #form-section label {
margin-bottom: 15px;
display: block; }

.cart #form-section label span {
width: 100px;
padding: 5px 6px;
float: left;
font-weight: bold; }

.cart #form-section input[type=text] {
width: 240px;
margin: 0;
padding: 5px 6px;
border: 1px solid rgba(0, 0, 0, .2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
display: block; }

.cart #form-section input[type=hidden] {
display: none; }

.cart #form-section input[type=submit] {
margin-left: 110px;
cursor: pointer; }

.cart #form-section p {
margin-bottom: 20px; }

select {
color: rgb(255, 255, 255);
background-color: rgb(20, 20, 20); }

.enlarge {
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in; }

.none-found p {
font-weight: bold;
font-size: 15px;
line-height: 130px; }

.testimonials dl {
width: 440px;
margin: auto; }

.testimonials dd {
margin-bottom: 20px;
font-weight: bold;
text-align: right; }

.ui-datepicker-calendar {
margin-bottom: 10px; }