/****************************************************************************************************
| JEFFCRAFT PHOTOGRAPHY - Portraits, Weddings, Products, or just for fun!
|----------------------------------------------------------------------------------------------------
| All souce code & content (c) Copyright 2010, JEFFCRAFT PHOTOGRAPHY
|   unless specifically noted otherwise.
|
| File: /css/main.css
| Purpose: Contains most styles for the website. Other styles found in separate
|          css files for each component.
| ___________________________________________________________________________________________________
|                             JEFFCRAFT PHOTOGRAPHY http://www.jeffcraft.ca
****************************************************************************************************/

/**
 * Colour Definitions
 * JEFF: #9b9b9b
 * CRAFT: #e6e6e6
 * PHOTOGRAPHY: #67cb13
 */
 
.jeff{ color: #9b9b9b; }
.craft{ color: #e6e6e6; }
.photography{ color: #67cb13; }

* {
    margin: 0;
    padding:0;
}

html, body{
	background-color: #000;
	color: #ddd;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding: 0px;
    height: 100%;
}

a.jlink{ color:#232399; font-weight: bold; }
a.jlink:link{ text-decoration: none; }
a.jlink:visited{ text-decoration: none; }
a.jlink:active{ text-decoration: none; }
a.jlink:hover{ text-decoration: underline; }
a.jlink:visited:hover{ text-decoration: underline; }

img{ border: none; }

div.underline {
    border-bottom: 1px solid #ccc;
    height: 1px;
    width: auto;
}

.other_pages{
    position:relative;
    margin:20px auto;
    height:542px;
    width:797px;
}

table{ border-collapse:collapse; }
td{
	text-align: left;
	vertical-align: top;
	padding: 5px;
}

.rates{
	background-color: rgb(200,225,255);
	border: 1px solid #fff;
}

.content{
    padding: 0px;
}

.wrapper{
    width: 100%;
    background-color: #000;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -130px;
}

.header{
    width: 100%;
    background-color: #3f3f3f;
    background-image: url("../images/header_bg.jpg");
    background-repeat: repeat-x;
    height: 97px;
    text-align: center;
}

.header_img{
	width: 1000px;
	height: 97px;
	margin-left: auto;
	margin-right: auto;
	background-image: url("../images/header.jpg");
	background-repeat: no-repeat;
}

.link_bar{
	height: 22px;
	width: 100%;
	background-image: url("../images/head_bar.jpg");
	background-repeat: repeat-x;
}

.white_line_top{
	height: 10px;
	width: 100%;
	background-color: #000;
    font-size: 1px;
    border-top: 1px solid #fff;
}

.white_line_bottom{
	height: 10px;
	width: 100%;
	background-color: #000;
    font-size: 1px;
    border-bottom: 1px solid #fff;
}

.footer, .push{
    height: 130px;
    clear: both;
}

.footer{
    height: 130px;
	width: 100%;
}

.foot_bottom{
    height: 97px;
	width: 100%;
    background-image:  url("../images/footer_bg.jpg");
    background-repeat: repeat-x;
}

.foot_bar{
	height: 23px;
	width: 100%;
	background-image: url("../images/foot_bar.jpg");
	background-repeat: repeat-x;
}

.body_main{
	width: 1000px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

#close_button{
    font-size: 8pt;
    font-weight: bold;
    padding: 3px 7px 3px 7px;
    border: 1px solid #aaa;
}

#close_button:hover{
    background-color: #fff;
    cursor: pointer;
}
#close_button:active{
    background-color: #ccc;
    color: #fff;
    cursor: pointer;
}

.td_side{
    width: 80px;
    vertical-align: top;
    text-align: right;
}

.td_center{
    text-align: center;
    vertical-align: top;
}

#modal_window{
	position:absolute;
	background-color:#eeeeee;
    color: #000;
	padding: 0 15px 15px 15px;
	font-family: Arial,Helvetica,sans-serif;
	text-align: left;
    /*--CSS3 Box Shadows--*/
	-webkit-box-shadow: 0px 0px 20px #555;
	-moz-box-shadow: 0px 0px 20px #555;
	box-shadow: 0px 0px 20px #555;
    /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
    z-index: 9002;
}

/* Styles specific to this particular page */
.scroll-pane,
.scroll-pane-arrows
{
	width: 100%;
	height: 200px;
	overflow: auto;
}

#blanket {
	background-color:#111;
	position:absolute;
	z-index: 9001;
	top:0px;
	left:0px;
	width:100%;
}

.gallery ul{
	list-style-type: none;
}

.gallery li{
	width: 220px;
	height: 220px;
	padding: 10px;
	text-align: center;
	float: left;
}

.gallery img{
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	box-shadow: 3px 3px 8px #444;
	-moz-box-shadow: 3px 3px 8px #444;
	-webkit-box-shadow: 3px 3px 8px #444;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#555, offX=0, offY=3, positive=true);
	opacity:.8;
}

.gallery img:hover {
	box-shadow: 4px 4px 12px #444;
	-moz-box-shadow: 4px 4px 12px #444;
	-webkit-box-shadow: 4px 4px 12px #444;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#555, offX=4, offY=4, positive=true);
	opacity:1;
}

.text_block {
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	font-size:10pt;
	color:#333;
    width: 95%;
    margin: 10px auto 10px auto;
	font-family:Arial, Helvetica, sans-serif;
    padding: 10px;
    background-color: #fefefe;
}

.under_line {
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #bbb;
}

.pop_up_title{
	color:#333;
    font-size: 14pt;
    padding: 5px 100px 5px 100px;
    font-weight: bold;
	font-family:Helvetica, sans-serif;
    background-color: #fefefe;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
}

#contact_form_holder { 
    font-family: 'Verdana'; /* this is a nice font-family, at least i think, if you don't like it change it :) */ 
    font-variant: small-caps; /* making the small letter looks like capital but keeping the size of it to smaller, looks cool */ 
    width:400px; /* setting a fixed width of the contact form holder will make things easier later (like aligning and such) */
}
#contact_form_holder input, #contact_form_holder textarea { 
    width:100%; /* make all the inputs and the textarea same size (100% of the div they are into) */ 
    font-family: inherit ; /* we must set this, so it inherits the font-family */ 
    padding:5px; /* and make a custom padding, you can set whatever you like */
}
#contact_form_holder textarea { 
    height:100px; /* i never liked small textareas, so make it 100px in height */ 
}
#close_contact { 
    width:150px !important; /* the width of the submit button  */ 
    font-variant: small-caps; /* nicer font-variant (like explained before) */  
    border:1px solid black; /* remove the default border and put a normal black one */
    cursor:pointer;
    cursor:hand;
}
#send_message { 
    width:150px !important; /* the width of the submit button  */ 
    font-variant: small-caps; /* nicer font-variant (like explained before) */  
    border:1px solid black; /* remove the default border and put a normal black one */
    cursor:pointer;
    cursor:hand;
}
#cf_submit_p { text-align:center; } /* show the submit button aligned with the right side */
 
/* styling */
 
.error { 
    display: none; /* hide the errors */ 
    /* add some styling */
    padding:10px; 
    color: #D8000C; 
    font-size:13px;
    background-color: #FFBABA;
}
.error_msg { 
    display: none; 
    color: #D8000C; 
    font-size:11px;
    font-weight: bold;
}
.success { 
    display: none; /* hide the sucess div */
    /* add some styling */
    padding:10px; 
    color: #044406; 
    font-size:13px;
    background-color: #B7FBB9;
}
 
#contact_logo { vertical-align: middle; }
.error img { vertical-align:top; }

.pad_me { padding: 10px; }

a.green_close {
    cursor: pointer;
}

a.green_close:hover {
    text-decoration: underline;
}

a.red_close {
    cursor: pointer;
}

a.red_close:hover {
    text-decoration: underline;
}