/*
=====================================
Colours

#303030 Dark grey
#606060 Middle grey
#000 Black
#fff white
=====================================
*/

* html {margin:0; padding:0;}

/*
=====================================
=STRUCTURE & LAYOUT
=====================================
*/
body {
	margin:0; padding:0;
	font-style:normal; 
	font-family: Georgia, "Times New Roman", Times, serif; 
	color:#303030; 
	font-size:62.5%;
	background:url(../images/layout/border-top.jpg) repeat-x top left;
}

#wrapper {
    /*border: 1px solid orange;*/
	width: 99.9%;
	margin:0 auto;
	text-align:center;
	height:100%;
}

#mastHead {
    /*border: 1px solid blue;*/
    margin:0 auto;
    height: 143px;
    width:960px;
    background: transparent url(../images/layout/mastHead.jpg) no-repeat top left;
    text-align:left;
}

div.topButtons {
    /*border:1px solid red;*/
    float:right;
    margin:10px 0 0 0;
    font-size:1.5em;
    font-weight:bold;
    width:200px;
}

div.topButtons a.btnJoin {
    background: transparent url(../images/layout/btnJoin.jpg) no-repeat top left;
    width:175px;
    height:60px;
    float:right;
    margin:0px 30px 0 0;
}
div.topButtons a.btnJoin:hover {background: transparent url(../images/layout/btnJoin-over.jpg) no-repeat top left;} 

div.topButtons a.btnModels {
    background: transparent url("../images/layout/btnModels.jpg") no-repeat top left;
    clear:both;
    width:175px;
    height:60px;
    float:right;
    margin:0 30px 0 0;
}
div.topButtons a.btnModels:hover {background: transparent url(../images/layout/btnModels-over.jpg) no-repeat top left;} 


div.imgVicki {
    /*border:1px solid green;*/
    background: transparent url(../images/layout/vicki.jpg) no-repeat top left;
    float:left;
    height:150px;
    width:245px;
    margin:5px 0 -3px 52%;
	/*margin:5px 0 -3px 15%;*/
}


#contentOuter {width:99.9%;text-align:left;}

/* ========= Database page ========= */
#contentInner.viewDB {width:100%;text-align:left; font-size:1em;}

#contentInner {/*border:1px solid black;*/margin:0 auto; width:960px; padding: 10px; font-size:1.6em;
/*background: url(../images/layout/footer-bg.jpg) no-repeat bottom right; z-index:0;*/}
#footerWrap {/*border:1px solid black;*/ margin:0 auto; padding-top: 20px; width:500px; clear:both; }

/* ========= Home page ========= */
#leftColumn {width:284px; height:332px; float:left; margin:20px 5px 0 4.5%;}
#middleColumn {background: url(../images/layout/home-box.jpg) no-repeat top left;
width:284px; height:332px; float:left; margin:20px 5px 0 0;}
#rightColumn {width:284px; height:332px; float:left; margin:20px 5px 0 0;}

#middleColumn p {color:#fff; margin: 40px 0 0 5px;}
#middleColumn p a {color:#fff; text-decoration:underline;}
#middleColumn p a:hover {color:#fff; text-decoration:none; background:none;}

/* ========= Thumbnail page ========= */
#modelThumbsWrapper {float:left;margin:10px 0 0 240px; *margin:10px 0 0 0; font-size:1.3em;}
/**/

#modelThumbsWrapper span.modelThumb{ 
    /*border:1px solid green;*/
	background:url(../images/layout/thumbBG.jpg) no-repeat top left;
    float:left; 
    margin:2px; 
    padding:5px; 
    color:#fff; 
    background-color: #000; 
    text-align:center; 
    width:90px; 
    height:230px;
	}
	
	
#modelThumbsWrapper span.modelThumb img{border:1px solid #fff;}

/*classes for interest function*/
#modelThumbsWrapper span.selected { 	
	background:url(../images/layout/thumbBG.jpg) no-repeat top left;
    float:left; 
    margin:2px; 
    padding:5px; 
    color:#fff; 
    background-color: #000; 
    text-align:center; 
    width:90px; 
    height:230px;
	}
	
#modelThumbsWrapper span.selected img{border:1px solid #fff;}

#modelThumbsWrapper span.notSelected {display:none;float:left; margin:2px; padding:3px; color:#fff; 
background-color:#000; text-align:center; width:90px; height:235px;
/*filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;*/}

div.selectMe{background: url(../images/layout/select-bg.jpg) no-repeat top left; 
color:#FFF; padding:2px; border:none; height:23px; }

/* For IE and Safari */
html*#hidepage{
top:200px;
left:230px;
float:left;
background-color:#000; 
color:#fff; 
width:78%;
height:100%;
}

/* For Firefox */
#hidepage {background: #000 url(../images/layout/compPage-bg.jpg) repeat-x top left; position:absolute; color:#fff; width:100%;height:100%;}

/*Classes for fieldsets */
fieldset#gender, 
fieldset#ageRange, 
fieldset#interests, 
fieldset#num4, 
fieldset#num5 {float:left; width:160px;clear:both;margin:0 0 0 15px;border:1px solid #333333;z-index:900;}

fieldset#gender label, 
fieldset#ageRange label, 
fieldset#interests label, 
fieldset#num4 label, 
fieldset#num5 label{font-size:1.2em;}


fieldset#num4 p, fieldset#num5 p {font-size:1.2em;}


/*Legends for fieldsets*/
fieldset#gender legend,
fieldset#ageRange legend, 
fieldset#interests legend, 
fieldset#num4 legend, 
fieldset#num5 legend{background-color:transparent; font-size:1.8em; font-weight:bold; color:#fff; color:#000\9;}

/*Reset Link */
p.reset{margin:0 0 0 30px; padding:0;}
p.reset a{color:#fff; text-decoration:underline;}

#btnRequest { background: url(../images/layout/btnRequest.jpg) no-repeat top left; 
margin:15px; cursor:pointer; width:100px; height:44px; border:none;}
#btnRequest2 { background: url(../images/layout/btnRequestBlack.jpg) no-repeat top left; 
margin:15px; cursor:pointer; width:170px; height:44px; border:none; clear:both;}



#toolBox {
    *border:1px solid #000;
    position:absolute;
    color:#000;
	height:810px;
	width:211px;
	text-align:left;
	margin:10px 10px 0 10px;

}

:root *> #toolBox{
    position:absolute;
    background: url(../images/layout/tools-bg.jpg) top left no-repeat;
    color:#fff;
	height:810px;
	width:211px;
	text-align:left;
	margin:10px 10px 0 10px;


}




/*This is the tooltip box*/
img.popImage{border:1px solid #fff;float:left; margin:10px; padding:5px;width:250px;}
table.tbFlyOut {width:150px;float:right;margin-top:20px;}
table.tbFlyOut td {color:#fff; border-bottom: 1px solid #333333; padding:2px; background-color:transparent; text-transform:capitalize;}



/* ========= Model view page ========= */
body.modelViewPage{margin:0; padding:0; color:#fff;background: #000 url("../images/layout/compPage-bg.jpg") repeat-x top left;}
#wrapper.modelViewPageWrap {width: 100%; height:100%; font-size:1.4em; text-align:left;}
#wrapper.modelViewPageWrap p {margin:2px 0 0 25px;}
#modelView {border: 1px solid white;width: 28%;height: 600px;}
#wrapper.modelViewPageWrap img { position:absolute;margin:10px 30px 0 300px;}
#wrapper.modelViewPageWrap table {width: 200px; margin:10px 0 0 20px; font-size:1em; text-align:left;}
#wrapper.modelViewPageWrap table td {border-bottom:1px solid #666666; width:auto;}


/* ========= Model booking page ========= */
#lbModelDetails img{padding: 5px;float:left;}

p.chosenModels {
    float:left;
    width:100px;
    height:180px;
    text-align:center;
    border:1px solid gray;
}

p.chosenModels  {  
	float:left; 
    margin:2px; 
    padding:5px; 
    color:#fff; 
    background-color: #000; 
    text-align:center; 
    width:90px; 
    height:auto;}
	
#contentLeftColumn p.chosenModels img {margin:0; padding:0;border:1px solid #fff;}	

.clientDetails {
	width:70%; 
	*width:auto;/*IE7*/
	*margin-top:20px;
	background: url(../images/layout/detailsFormBG.jpg) top left no-repeat; 
	border:none; 
	height:310px; 
	}
	
.jobDetails {
	width:70%; 
	*width:auto;/*IE7*/ 
	*margin-top:20px;
	background: url(../images/layout/detailsForm2BG.jpg) top left no-repeat; 
	border:none; 
	height:410px;}
	
.chosenModels {width:70%; *width:auto; border:none;*margin-top:20px;}

input.jobDescription {text-align:left;padding-left:auto; overflow:scroll;}

.submitBtn {
	background:url(../images/layout/submit-btn.gif) no-repeat top left; 
	cursor:pointer; 
	border:0;
	width:95px; 
	height:30px; 
	margin:0 0 0 20px;}

/*IE7 and SF */
html*.clientDetails legend, html*.jobDetails legend, html*.chosenModels legend {color:#000; margin-top:-20px; }

/*FX */
.clientDetails legend, .jobDetails legend, .chosenModels legend {font-size:1.4em; margin-bottom: 20px;}

table.modelRequests {padding:5px; *margin:0 10px 0 10px;}
table.modelRequests td{background-color:none; padding:4px;color:#fff;font-size:.8em; }
table.modelRequests th{background-color:none; padding:2px;color:#fff; font-size:.8em;}



/* ========= Model details page ========= */
.textInputs {border:1px solid #666; background-color:#fff; color:#000;}
.checkBoxes {float:left;margin:0 15px 0 0;}
.modelDetails{border:1px solid #666;}
#btnSubmit {background-color:black; color:#fff; cursor:pointer;}



/* ========= Content pages ========= */
#contentLeftColumn, #contentMiddleColumn, #contentRightColumn {width:32%; height:auto; float:left; margin:0px 5px 0 0;}

/* ========= Database page ========= */
#DetailsView1 {display:inline;}

#GridView1{width:90%; margin:0 auto;}
#GridView2{width:90%; margin:0 auto;}
#GridView2 td, #GridView1 td  {border:3px solid white; padding:2px; margin:0;background-color:#c2c4c4;}
#GridView2 input {border:1px solid red; margin:0; padding:0; width:30px;}

.LogOut{float:right; margin:10px;}

/*
=====================================
=PRETTY STUFF & STYLES
=====================================
*/


/*Normal page links */
#contentInner a{color:#000; text-decoration:underline; padding:2px;}
#contentInner a:hover{color: #666;text-decoration:none; }
#contentInner p{padding: 5px;}
#contentInner img{padding:0;margin:0;}


/*Thumbnail spans links */
#modelThumbsWrapper  a{color: #fff; text-decoration:underline;}
#modelThumbsWrapper a:hover{color:#333; background-color:#000;text-decoration:none;}

a.compLink {text-decoration:none; border-bottom:1px dashed white;}

/*Comp card model page */
#wrapper.modelViewPageWrap a {color: #fff; text-decoration:underline;}
#wrapper.modelViewPageWrap a:hover {color:#000; background-color:#fff;text-decoration:none;}

.leftNoBorder{float:left; border:none; padding:10px;}
.clearAll{clear:both;border:none;}

h1 {/*background:transparent url("../images/layout/h1.jpg") no-repeat top left;*/ 
	font-size:2.4em; 
	margin:0 15px 10px 15px; 
	color:#000; 
	border-bottom:1px solid #000; 
	padding:3px; 
	height:40px; 
	text-align:center; 
	text-transform:lowercase;}
	
h2 {font-size:1.6em;color:#606060;padding:0 0 3px 10px;}
h3 {font-size:1.4em;color:#303030;padding:0 0 3px 10px;}

span.name{color:#000000; font-size:1.3em;}

/* force scroll bar in Firefox to fix jogging bug */
html {overflow: -moz-scrollbars-vertical !important; }

/*Block Quote*/
q {
	quotes:none;
	background: url(../images/layout/quote-start.jpg) top left no-repeat;
	padding:5px 0 0 35px;
	font-size:1.4em;
	line-height:1.2em;
}

q.testimonials {
	quotes:none;
	background: url(../images/layout/quote-start.jpg) top left no-repeat;
	padding:5px 0 0 35px;
	font-size:1.1em;
	line-height:1.2em;
	
}
.endQuote
{
	border:1px solid white;/*HACK need this for IE */
	background:url(../images/layout/quote-end.gif) bottom right no-repeat;
	padding-right:35px;
	padding-top:10px;
	border:0;
	/*margin-right:50px;Need to specify margin for IE*/

}


#contentLeftColumn img, #contentMiddleColumn img, #contentRightColumn img {margin-left:10px; border:1px solid #000; padding:3px;}

/* Table data */

/* Forms 
legend {font-weight:bold;font-size:1.2em;}
#toolBox label {font-size:1.4em;vertical-align:bottom;}*/

/* Footer links */
#footerWrap ul li{list-style-type:none;display:inline;padding:5px;font-size:1.4em;}
#footerWrap ul li a{color: #000; text-decoration:underline; padding:2px;}
#footerWrap ul li a:hover{color:#666; text-decoration:none;  }

/* Force scroll bar to fix jogging bug */
html {overflow: -moz-scrollbars-vertical !important; }

/* Styles for custom checkboxes */
label.checkbox span.holder {height: 61px; /* Total height of your checkbox image */
background: url(../images/layout/checkboxes.png) 0 -1px no-repeat; /* Path to your checkbox image */
}
	
html>/**/body label.checkbox:hover span.holder,
html>/**/body label.radio:hover span.holder { top: -21px; } /* Background position on mouseover, ugly hack to hide it from the IEs */
	
label.checked span.holder,
label.checked span.holder { top: -42px !important; } /* Background position when checked */

label.list {float: left; clear: left;margin: 0 0 5px 0;}
label.inline {float: left; margin: 0 10px 0 0;}
input.hiddenCheckbox {position: absolute; left: -10000px; /* Hide the input */}
label.prettyCheckbox span.holderWrap {
    display: block; float: left;
    position: relative;
    margin-right: 5px;
    overflow: hidden;
}
		
label.prettyCheckbox span.holder {
    display: block;
    position: absolute;
    top: 0; left: 0;
}

/* Images on merchandise page */
#contentLeftColumn img.merchImg, #contentMiddleColumn img.merchImg {vertical-align:middle; border:none;}

/*
=====================================
=NAVIGATION
=====================================
*/

#menuWrap {width:100%;border-top:5px solid #303030;height:41px;clear:both;}

ul#menu
{
	margin:0 auto;
	padding:0;
	list-style-type:none;
	width:960px;
	height:100%;
	font-size:1em;
	font-weight:bold;
	text-transform:lowercase;
	background: transparent url("../images/layout/nav-bg-whole.jpg") no-repeat top left;
}

ul#menu li{float:left;display:inline;margin:0;padding:0;}

ul#menu li a.first {margin-left:7px;}/* This fixes the first hover going outside the background */
	
ul#menu li a
{
    display:block;
	color:#fff;
	font-size:1.4em;
	text-decoration:none;
	font-weight:bold;
	padding:10px 8px 0 8px;
	height:24px;
}
ul#menu li a:hover{color:#fff; background:transparent url("../images/layout/nav-over.jpg") no-repeat top right;}

.canberraPhotoBooth {display:none;}