/*------------------------------------------------------------------
[Master Stylesheet]

Project:	A Photo Folio
Last change:	06/04/2008
Primary use:	APF Administration
-------------------------------------------------------------------*/

@import url('../javascripts/tc/tablecloth.css');
@import url('lightbox.css');

/*------------------------------------------------------------------
[Color codes]

Background:	    #ffffff (white)
Content:	    #f2f2f2 (light gray)
Header h1:	    #333333 (dark grey)
Various Orange:	#ff8a00
-------------------------------------------------------------------*/

/************************************************
	GLOBAL STYLES
************************************************/
body 
{background: #fff; margin: 0; padding: 0; font: 75% Helvetica, Arial, Verdana, sans-serif;}
#container 
{width: 732px; margin: 0 auto; position: relative;}
p, h1, h2, h3 
{margin: 0; padding: 5px;}
form 
{margin: 0; padding: 0;}
code 
{font-size: 10pt;}
.tip_message 
{padding: 10px 20px 10px; font: 10px "Lucida Grande", Arial, sans-serif; background: #fff; border: 1px solid #f0f0f0;}
.tip_message h2 
{font-size: 13px; line-height: 15pt;}
a img
{border: none;}
a:link, a:visited
{text-decoration: none; color: #ff8a00;}
a:hover
{text-decoration: underline; color: #ff8a00;}
h1 
{font: normal 36px "Lucida Grande", Arial, sans-serif; color: #727272;}
h2 
{font: normal 1.75em "Lucida Grande", Arial, sans-serif; color: #727272;}
h3 
{font-size: 1.3em; color: #666;}
legend
{font: normal 20px "Helvetica Neue", Arial, sans-serif; color: #555;}
.f-right
{float: right;}
.grip:hover
{cursor: move;}

/************************************************
	LOGIN STYLES
************************************************/
body#login
{font: 100% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; background: #fff; color: #555;}
body#login #container 
{width: 400px; margin: 150px auto 0px auto;}
body#login #container p 
{font-size: 10px; margin-top: -20px;}
body#login #dialog 
{background: #fff; padding: 10px; width: 400px; height: 324px; background: url('../images/login-bg.jpg') no-repeat;}
body#login form
{margin: 165px 0 0 78px;}
body#login #dialog dt
{float: left; width: 130px; color: #d3d3d3; text-align: right; font-size: 12px; position: relative; top: 6px; left: -10px;}
body#login #dialog p, body#login #dialog strong
{color: #d3d3d3; text-align: right; font-size: 12px; position: relative; top: 6px; left: -10px;}
body#login #dialog dd 
{line-height: 24px; margin: 0px 0px 5px 130px;}
body#login #error 
{background: #E77802; font-size: 12px; margin:72px 0px -75px;}
body#login a, body#login a:link, body#login a:visited 
{color: #ff8a00;}
body#login a.forgot 
{font-size: 11px; color: #ff8a00; text-decoration: underline;}
body#login a:hover.forgot
{text-decoration: none;}

/************************************************
	TITLE STYLES
************************************************/
#title_contain 
{background: #fff url(../images/top_bg.jpg) repeat-x scroll center bottom;}
#title 
{width: 700px; margin: 0 auto;}
#title h1 
{padding:0px 0px 10px 15px; font: 30px Georgia, "Times New Romain", serif; color: #727272; position: relative; top: 5px; width: 400px;}
#title h1 span 
{font: 15px "Lucida Grande", Arial, sans-serif; color: #727272; position: relative; top: 0px; margin-left:5px;}
#title img 
{border: none; margin-left: 5px; position: relative; top: 10px;}


/************************************************
	HEADER/NAV STYLES
************************************************/
#header 
{float: left; width: 100%; background: #fff url("../images/tab_bg.jpg") repeat-x bottom; font-size: 1em; line-height: normal;}
#header ul 
{margin: 0px; padding: 10px 10px 0; list-style: none;}
#header li 
{float: left; background: #fff; margin-right: 0px; padding-left: 1px;}
#header a 
{float: left; display: block; background: #fff; padding: 7px 20px 3px 19px; text-decoration: none; color: #999;}
/* Commented Backslash Hack
   hides rule from IE5-Mac \*/
#header a 
{float:none;}
/* End IE5-Mac hack */
#header a:hover 
{color: #ff8a00; }
#header #current 
{background-image: url("../images/left_on.jpg");}
#header #current a 
{margin-right: 1px; background-image: url("../images/right_on.jpg"); color: #ff8a00; padding-bottom: 0px; height: 20px; font-weight: 700;}
#logout 
{margin: -3px -15px 0 0; float: right;}
#logout a 
{color:#ccc;}

/************************************************
	SUB-NAV STYLES
************************************************/
#side 
{clear: both; padding-top: 15px; background:#F2F2F2 none repeat scroll 0%;  border-width:0px 1px; border-style:solid; border-color:#CCCCCC;}
#side ul 
{margin: 0; padding: 0 0 20px 10px;}
#side li 
{display: inline; list-style-type: none; margin: 0; padding: 0;}
#side a:link, #side a:visited 
{float: left; line-height: 14px; font-weight: bold; margin: 0 10px 4px 10px; text-decoration: none; color: #999;}
#side a.active, #side a:hover 
{padding-bottom: 2px; background: transparent; color: #555;}

/************************************************
	MAIN CONTENT STYLES
************************************************/
#main
{background: #f2f2f2 no-repeat top left; width:670px; padding: 15px 30px; border-width:0px 1px 1px; border-style:solid; border-color:#CCCCCC;}
#main h1
{font: normal 24px "Trebuchet MS", Arial, sans-serif; color: #555; border-bottom: 3px solid #DDDDDD; margin:0px 0px 10px;}
#main #editPane, #main #editPane2 
{background: #F2F2F2; margin: 0 10px 10px 10px; padding: 3px;}
body#pages #editPane, body#pages #editPane2
{margin: 0; padding: 0;}
#editBtn
{float:right;}
#infoPane ul 
{list-style: none; margin:0px 0px 20px 20px;}
#infoPane li
{list-style-type: none; padding: 15px 0px; margin-left: -40px; border-bottom: 1px solid #ccc; color: #ff8a00; font: bold 12px "Lucida Grande", sans-serif !important;}
span.label, #editPane label {	
	color: #888888;
    display: inline-block;
    font: bold 12px "Lucida Grande",sans-serif;
    margin: 5px 0 5px 0;
    vertical-align: top;
    width: 240px;
}
#colorSettings #editPane li {
	padding: 15px 0px;
	font: bold 12px "Lucida Grande", sans-serif !important;
	border-bottom: 1px solid #ccc;
}
#colorSettings #editPane .color {
	color: #333;
	width: 70px;
	height: 20px;
	border: none;
	cursor: default;
	text-align: center;
	margin-left: 7px;
}
span.label
{padding-left: 6px;}
span.swatch-label
{width: 70px; font: bold 12px "Lucida Grande", sans-serif; display: -moz-inline-box; display: inline-block;}
#editPane ul, #editPane2 ul 
{list-style: none; /*margin: 10px 0 0 14px;*/ padding-left: 10px;}
body#pages #editPane ul, body#pages #editPane2 ul 
{margin: 0; padding: 0;}
#editPane li, #editPane2 li 
{margin: 0; padding: 5px 0px; color:#999;}
#editPane legend, #editPane2 legend 
{margin-left: -10px; }
body#pages #editPane legend, #editPane legend #editPane2 legend 
{margin: 0;}
#editPane fieldset, #editPane2 fieldset 
{width: 600px; margin-top: 25px; border: none;}
span.tip 
{font-size: 11px; color: #aaa; margin-left: 10px;}
span.tip strong 
{color: #c00;}
div.swatch 
{width: 25px; height: 10px; border: 1px dotted #2b2b2b; display: -moz-inline-box; display: inline-block; margin-left: 25px;}
div#qTip 
{padding: 5px; border: 1px solid #AAA; border-right-width: 2px; border-bottom-width: 2px; display: none; background: #FFF; color: #555; font: bold 12px Helvetica, Verdana, Arial, Helvetica, sans-serif; text-align: left; position: absolute; z-index: 1000; width: 570px; line-height: 15px;}
div#qTip table td {
	text-align:center;
	width:20px;
}
div#qTip table .tdodd {
	background: #f3f3f3;
}
div#qTip table .tdeven {
	background: #f9f9f9;
}
div#qTip h2 
{margin: 0; padding: 5px 0; font: normal 16px Verdana, Arial, Helvetica, sans-serif;}
p.pageDel 
{float: right;}
#addGallery, #addGallery1
{display: inline;}
strong.sub-title
{display: block; padding: 0px 0px 0px 0px; font: 20px "Helvetica Neue", Arial, sans-serif; color: #555;}
#editPane ul li em input, #editPane ul li textarea, #editPane table textarea
{border: 4px solid #E2E2E2; padding: 4px;}
#editPane ul li input[type="submit"].sub, #editPane ul li input[type="file"], #editPane ul li input[type="image"]
{border: none;}
#editPane ul li input.i-text
{width: 296px; border: 4px solid #E2E2E2; padding: 4px;}
#editPane label
{position: relative; top: 3px; font: bold 12px "Lucida Grande", sans-serif; color: #888; width: 200px;}

/************************************************
	PAGE STYLES
************************************************/
#pageContainer 
{width: 640px; margin: 0 auto;}
#pageStatus 
{margin-top: 10px;}
div.pageOrderItem
{margin: 5px 0px; padding: 5px; font-weight: bold; background: #ddd;}
div.pageOrderItem p 
{margin: 0px; padding: 2px 0px;}

/************************************************
	GALLERY STYLES
************************************************/

#catContainer
{width: 640px; margin: 0px auto;}
#uploader
{margin: -1px 0pt 0pt 1px; background: #F2F2F2 none repeat scroll 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 637px; visibility: visible;}
#imageBankActions 
{font: 9px Verdana, Arial, Helvetica, sans-serif; margin: 10px 0px 20px;}
#imageBankActions select, #imageBankActions input 
{font: 10px Verdana, Arial, Helvetica, sans-serif;}
input.imageCheck 
{margin-right: 3px;}
div.thumbLayer 
{float: left; padding: 0; background: url('../images/sml-thm-bg.jpg') no-repeat; width: 161px; height: 182px; margin: 5px 2px; overflow: hidden; text-align: center;}
div.thumbLayerLarge
{background: url('../images/large-thumb-bg.jpg') no-repeat; height: 275px; width: 328px; margin-left: 4px; float: left;}
div.thumbLayer p 
{margin: 0px; padding: 2px 4px; font-size:9px; white-space: nowrap;}
div.thumbLayer a 
{color: #000000; text-decoration: none; font-weight: bold;}
div.thumbLayer a:hover 
{color: #000099; text-decoration: underline;}
div.thumbLayer img 
{margin: 0 auto;}
#galStatus, #catStatus 
{margin-top: 10px;}
div.catOrderItem 
{margin: 5px 0px; padding: 3px; font-weight: bold; background: #ddd;}
div.catOrderItem p 
{margin: 0px; padding: 2px 0px;}
div.galOrderItem 
{margin: 0px 0px 5px 40px; padding:3px; font-weight: bold; width: 598px; height: 34px;}
div.galOrderItem p 
{margin: 0px; padding: 2px 0px;}
#imgContainer 
{width: 420px; margin-left: -5px;}
div.imgOrderItem 
{margin: 5px -4px; font-weight: bold;}
div.imgOrderItem p 
{font-size: 10px; margin: 0px; padding: 2px 0px;}
@media screen and (-webkit-min-device-pixel-ratio:0) 
{#bankDelete {position: relative; top: 4px;}}
.highlight
{font-size: 11px; color: #000;}
#select-all-images
{font-size: 10px; text-transform: uppercase; position: relative; top: -3px;}
@media screen and (-webkit-min-device-pixel-ratio:0) 
{#select-all-images {top: 0px;}}
#image_bank .thumbLayer
{margin: 5px 3px;}

/************************************************
	FOOTER STYLES
************************************************/
#footer 
{background:#FFF; margin-top:2px; color: #8c8c8c; font: 11px "Lucida Grande", Arial, sans-serif;}
#footer a 
{color: #8c8c8c; text-decoration: none;}
#footer a:hover 
{text-decoration: underline;}

/************************************************
	DIV FLOAT
************************************************/
#divFloat
{position: absolute; background-color: #F2F2F2; border: 1px solid #ccc; width: 180px; padding: 10px 10px 20px 10px;}

/************************************************
	for Template Settings page
************************************************/
.property_div {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:#FFF none repeat scroll 0 0;
	border:5px solid #E5E5E5;
	padding:4px;
	width:550px;
	margin:5px 0 20px;
}
.property_div img {
	position:relative;
	top:4px;
	margin:0 0 0 11px;
}
.property_div select {
	margin:10px 5px 8px 2px;
}
h3.property_title {
	font-family:'Lucida Grande',Arial,sans-serif;
	font-size:15px;
	color:#A5A5A5;
	padding:0px;
	margin:0 0 5px 2px;
	text-shadow:0 1px 0 #FFFFFF;
	display:inline;
}
span.property_title {
	color:#999999;
	font-size:10px;
	text-shadow:0 1px 0 #FFFFFF;
	font-style:italic;
}
#easyTooltip {
	padding:5px 10px;
	border:1px solid #fff300;
	background:transparent url(images/famfamfam/icons/hud-bg3.png) repeat;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	font-family:'Lucida Grande',Arial,sans-serif;
	font-size:12px;
	color:#333;
}

/************************************************
	for Select Elements
************************************************/

.property_div textarea, .property_div input[type=text], .property_div select {
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border-style:solid;
	border-width:0px;
	font-family:"Helvetica Neue", Arial,"Bitstream Vera Sans",sans-serif;
	color:#444;
	border-color:#DDD;
	background:#EEE;
	font-size:11px;
	font-weight:bold;
	padding:2px;
}
.property_div select {
	width:60px;
}
.property_div textarea, .property_div input[type=text] {
	width:56px;
	margin:10px 5px 8px 2px;
}