/*-----------------------------------------------------------------------------
Karens Images Core Style Sheet

version:   1.0
author:    Flow Interactive, http://www.flowinteractive.com.au

/*----------------------------------------------------------------------------
COPYRIGHT, ALL RIGHTS RESERVED. THIS FILE MAY NOT BE COPIED OR ALTERED IN ANY WAY
-----------------------------------------------------------------------------*/

/* = General
--------------------------------------------------------*/
body {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 76%;
	color: #666;
	background: #fff;
	margin: 0;
	line-height: 150%;
	text-align: center;
}
a {
	color: #FE6800
}
a img {border: none}
#footer a {color:#666 }
.cntr {text-align:center}
.mtop {margin-top: 5px}
.float {float: left}
.right {text-align:right}

/* = Typography
--------------------------------------------------------*/
h1 {font-weight: normal; color: #E78A3A; font-size: 2em; margin: 5px 0}
#header h1 {position:relative; left:0px; top: 40px; text-indent: -9000px; background:transparent url(../i/logo.png) left top no-repeat; width:240px; height:81px}
h2 {font-weight: bold;font-size: 1.3em; color: #FE7D20}
.weddings h2 {text-indent: -9000px; background:transparent url(../i/weddingstitle.gif) left top no-repeat; width:121px; height:49px; margin-top: 0}
.portraits h2 {text-indent: -9000px; background:transparent url(../i/portraitstitle.gif) left top no-repeat; width:121px; height:49px; margin-top: 0}
.commercial h2 {text-indent: -9000px; background:transparent url(../i/commercialtitle.gif) left top no-repeat; width:175px; height:49px; margin-top: 0}
.projects h2 {text-indent: -9000px; background:transparent url(../i/projectstitle.gif) left top no-repeat; width:175px; height:49px; margin: 0}
.faq h2 {text-indent: -9000px; background:transparent url(../i/faqtitle.gif) left top no-repeat; width:175px; height:49px; margin-top: 0}
.testimonials h2 {text-indent: -9000px; background:transparent url(../i/testimonialstitle.gif) left top no-repeat; width:175px; height:49px; margin-top: 0}
.about h2 {text-indent: -9000px; background:transparent url(../i/abouttitle.gif) left top no-repeat; width:175px; height:49px; margin-top: 0}
.contact h2 {text-indent: -9000px; background:transparent url(../i/contacttitle.gif) left top no-repeat; width:175px; height:49px; margin-top: 0}
h3 {font-size: 1em; color:#333; text-transform:uppercase; font-weight:bold}
h4 {font-size: 1.2em; color:#FE6800; font-weight: bold; margin: 0}
ul {list-style: disc url(../i/discbul.gif); margin-left: 1.5em}
li {margin-bottom:0.6em}
p {font-size: 1em}
#tel p {font-size: 2em; text-align:center; margin: 0; line-height:1.2em}
#header #tel p {text-align:right}
.hlight {font-weight: bold; color:#FE6800;}
.big {font-size: 2em}
blockquote {font-weight: bold; font-style:italic; color:#CC6600; margin-left: 5px}
.testimonial {font-style:italic; font-size: 1em; color:#FE6800;}
/* = Menu
----------------------------------------------*/
#menuContainer {
	position: relative;
	width: 800px;
	background: #E2E2E2 url(../i/menubg.jpg) repeat-x;
	z-index:1;
	height: 40px
}
ul#menu {margin: 0 auto; padding: 0; line-height:1; list-style-type:none; width: 710px; z-index:100; position: absolute; left: 100px; top: 155px}
ul#menu li, ul#menu ul li {float:left; position: relative; z-index:3}
ul#menu li a {
padding: 0.5em 1.1em 0.25em 1.1em;
color: #333;
display:block;
font-size: 1.1em;
text-decoration:none;
text-align:center;
}
#menu li a:hover, #menu li a:active, #menu li a.sel {
	color:#FE6800;
	text-decoration:underline
}
#menu li a.sel {font-weight: bold}
#menu li a.drop {padding-left: 12px; background: transparent  url(../i/menudrop.gif) left 65% no-repeat}
/*Drop downs*/
ul#menu li ul { /* second-level lists */
	position: absolute;
	background: transparent url(../i/ddmenubg.png);
	border: 1px solid #ccc;
	width: 13em;
	display:none;
	z-index:1000
}
ul#menu ul {margin: 0 auto; padding: 0; line-height:1; list-style-type:none; }
ul#menu li ul li a {/*padding: 0.25en 0 0.25em 0.25em;*/ width: 11em; margin:0; text-align:left; display:block}

ul#menu li:hover ul, ul#menu li a:hover ul, ul#menu li.sfhover ul {
	display:block
}
/* = Containers
----------------------------------------------*/
#wrapper {position: relative; margin:0 auto; width: 900px; text-align:left; background:#fff url(../i/wrapperbg.jpg) top left no-repeat}
#container {position: relative; margin:0 auto; width: 800px; text-align:left}
#watermark {position:absolute; top: 1px; left: 0; background: transparent url(../i/watermark.png) no-repeat; width:300px; height:224px; z-index: 50}
.col1, .col1wide {float: left; width: 290px; margin: 10px 0 0 20px; font-size:1em}
.col2 {float: right; width: 260px;}
#colHome {float: left; width: 225px; margin: 10px 0 0 0}
#colHome a {display:block; float: left; margin: 0 10px 5px 0}
#colHomeContent {margin: 10px 0 0 250px; width: 460px}
#colGallery {margin: 10px 0 0 225px; width: 575px; height: 428px}
.col1wide {width: 450px}
#sectionFlash, #sectionGallery {float: left; width:205px}
#header {
	position: relative;
	height: 145px;
	background: transparent url(../i/headerbg.jpg) bottom repeat-x;
}
#content {
	position: relative;
	width: 100%;
}
#tel {position: relative; margin:1em auto 0 auto; width: 800px}
#header #tel {position: absolute; right: 70px; top: 50px; width: 500px}
/*.weddings {margin: 20px 0 40px 0; background:#fff url(../i/weddingside.jpg) left top no-repeat}
.portraits {margin: 20px 0 40px 0; background:#fff url(../commercial/side/Flash-comm1.jpg) left top no-repeat}*/
a#clientLogin {display:block; position:absolute; top: 10px; right: 20px; padding: 0 0 0 20px; background: #fff url(../i/bullet_key.png) 0 50% no-repeat; color:#666}
#footer {
	position:relative;
	margin:20px auto 0 auto; 
	width: 800px;
	font-size: 0.8em;
	color:#666;
	padding: 5px 10px 0 10px;
	text-align:left;
	background: #fff url(../i/bodybg.jpg) left bottom repeat-x;
}
#fl, #fr {float: left; width: 40%; top: 0; }
#fr {float: right; width: 55%; text-align:right}
.imgFloat {float: left; margin: 0 15px 10px 0}
.imgFloat2 {float: right; margin: 0 0 10px 15px}
/* = Forms
----------------------------------------------*/
form {width: 400px}
#contactform label {float: left; width: 15em; font-weight: bold; color:#333}
#contactform label.txtLabel {width: 7em}
#contactform input.txt {float: left; width: 14em; color:#333; margin: 0 10px 5px 0; border: 1px solid #ccc}
#contactform br {clear: both}
#contactform fieldset {font-weight: bold; color:#000; border: 1px solid #ccc; padding: 10px}
.err, .req {font-weight:bold; color:#f00; font-size: 1em; float:left}
.err {margin-right: 5px}
.hide {display:none}
textarea {font-family: Arial, helvetica, sans-serif; color:#333; font-size: 1em}
#sendForm {position: relative; top: -5px}
#contactform .float {width: 48%}
#contactform #contactpage label {width: auto; float:none}
/* = Tables
----------------------------------------------*/
.alt {background:#FFEAEA}

/* = Easy Clearing
----------------------------------------------*/
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */