/*******************************************************************
CSF SHARED STYLESHEET
By Lawrence Whiteside
(c) Copyright 2008/9
6-9-2008/09
********************************************************************

Contents:
0. Colors
1. General Styles
2. Shared Partials
	a. Top Navigation
	b. Asset Bar
	c. Footer
3. Rows & Columns
4. Forms
5. Buttons
6. Images
7. Typography
8. Tables
9. Specifics

/* 0. Colors */
.color0 {color: #000;} 	 	 	 	 	 	 	 	 /* Black */
.bgcolor0 {background-color: #000;} 	 /* Black */
.color1 {color: #fff;}								 /* White */
.bgcolor1 {background-color: #fff;} 	 /* White */
.color2 {color: #efefef;} 						 /* Very Light Grey */
.bgcolor2 {background-color: #efefef;} /* Very Light Grey */
.color3 {color: #bbb;}								 /* Light Grey */
.bgcolor3 {background-color: #bbb;} 	 /* Light Grey */
.color4 {color: #999;}								 /* Grey */
.bgcolor4 {background-color: #999;}		 /* Grey */
.color5 {color: #444;}								 /* Dark Grey */
.bgcolor5 {background-color: #444;}		 /* Dark Grey */
.color6 {color: #333;} 	 	 	 	 	 	 	 	 /* Very Dark Grey */
.bgcolor6 {background-color: #333;}		 /* Very Dark Grey */
.bgcolori {background-color: inherit;}

.color7 {color: #ff7f00;} 						 /* Orange */
.color8 {color: #fff134;} 						 /* Yellow */
.color9 {color: #ee2232;} 						 /* Red */
.color10 {color: #fdd;}    						 /* Pink */
.color11 {color: #ffefef;} 						 /* Light Pink */

/* 1. GENERAL STYLES */
body, textarea {margin: 0px; font-family: "Lucida Grande","Lucida Sans Unicode", helvetica, verdana, arial, sans-serif; font-size: 12px;}
a img {border: none;}
h1, h2, h3, h4, p {margin: 0px; padding: 0px;}
p {font-size: 12px;}
ul {list-style: none; padding: 0px; margin: 0px;}
p.caption {font-size: 9px; margin: 0px;}
a, span.hot { color: #000; cursor: pointer;}
a:hover, span.hot:hover {color: #ff7f00;}
.pointer, .swapImage {cursor: pointer;}
.hidden {display: none;}
.up {text-transform: uppercase;}
.bold {font-weight: bold;}
h1 {font-size: 18px;}
h2 {font-size: 14px;}
h3 {font-size: 11px;}
h4 {font-size: 8px;}
.left {float: left;}
.right {float: right;}
.textLeft {text-align: left;}
.textRight {text-align: right;}
.textCenter {text-align: center;}
.textJustify {text-align: justify;}
.vTop td {vertical-align: top; }
.vMid td {vertical-align: middle;}
.vBot td {vertical-align: bottom;}
.marR {margin-right: 5px;}
.marL {margin-left: 5px;}
.marT {margin-top: 100px;}
.padR {padding-right: 20px;}
.padL {padding-left: 20px;}
.padA {padding: 20px;}
.tdHPad td {padding: 0 4px;}
img.border {border: 1px solid #999; padding: 2px;}
.middle {margin-left: auto; margin-right: auto;}
.bdr {border: 1px solid #000;}
.strikethrough {text-decoration: line-through;}
.draggable {cursor: move;}

/* 2a. TOP NAVIGATION (shared/_top_nav) */
#topNav {width: 100%; height: 20px; background-image: url(/images/csf_bg_header.gif); background-repeat: no-repeat; padding: 2px 0; position: fixed;}
#topNav a {color: #fff;text-decoration: none; background-color: transparent; border: none;}
#topNav a:hover {color: #ff7f00;}
#topNav p {margin: 0px;}

#topMenu {position: absolute; background-color: #000; width: 80px;margin-left: 80px;}
#topMenu ul {padding: 5px; margin: 0px;}
#topMenu hr {	background-color: #fff; border: none;}
#topMenu a {color: #fff; text-decoration: none; line-height: 1.3em; display: block;}
#topMenu a:hover {color: #ff7f00;}

#allCont {padding-top: 25px;}

.error {color: #fff954;}
.notice {color: #fff954;}
#errorDisplay {position: absolute; right: 100px;}
#loginLogout {position: absolute; right: 10px; }

/* 2b. ASSET BAR (shared/_asset_bar) */
#assetBar {position: fixed; bottom: 0px; height: auto; width: 100%; z-index: 100;}
#assets {margin: 5px; height: 90px; width: 3000px;}
#assets li {float: left; width: 90px; height: 90px; background-color: #000; margin: 0px 5px;}
.assetThumb {width: 100px; height: 100px; background-color: #000; margin: 0px 20px; text-align: center;}
.assetCarousel {height: 110px; width: 100%; margin: 0px; padding: 10px 0 0 0; border-top: 4px solid #000; overflow: hidden;}
#assetsBG {background: transparent url(/images/bg_assetCont.png) repeat-x; width: 100%; border-top: 5px solid #000; display: none;}
#assetsCont {overflow: auto; width: 100%;}
#uploadBut {margin-right: 0px;}
#assetButtons a {color: #fff; margin-left: 30px; border-bottom: none;}
#assetButtons a:hover {color: #ff7f00;}
#assetButtons {background: url(/images/bg_assetpanel.png) no-repeat right; margin-top: 0px; width: 100%; text-align: right; height: 30px;}
#assetSearchTF {border: none; width: 140px; display: inline; height: 15px; padding: 2px}
#assetButtons img {vertical-align: bottom; padding-top: 3px;}

/* 2c. FOOTER (shared/footer) */
#footer {color: #333; font-size: 9px; margin: 3px; text-align: center; position: fixed; bottom: 0px;margin-left: 120px;}
#homeFooter #footer {text-align: center; color: #333; font-size: 9px; width: 100%;}
#projectsCont #footer {text-align: left; margin-top: 18px; margin-left: 0px;}

/* 3. ROWS & COLUMNS */
.col1 {width: 200px;}
.col2 {width: 350px;}
.col3 {width: 500px;}
.col4 {width: 650px;}
.col5 {width: 1000px;}
.col10 {width: 10%;}
.col12 {width: 12.5%;}
.col15 {width: 15%;}
.col20 {width: 20%;}
.col25 {width: 25%;}
.col33 {width: 33%;}
.col40 {width: 40%;}
.col50 {width: 50%;}
.col60 {width: 60%;}
.col67 {width: 67%;}
.col75 {width: 75%;}
.col80 {width: 80%;}
.col90 {width: 90%;}
.col100 {width: 100%;}
.row1 {height: 200px;}
.row2 {height: 350px;}
.row3 {height: 500px;}
.row4 {height: 650px;}
.row5 {height: 1000px;}
.row25 {height: 25%;}
.row33 {height: 33%;}
.row40 {height: 40%;}
.row50 {height: 50%;}
.row60 {height: 60%;}
.row67 {height: 67%;}
.row75 {height: 75%;}
.row100 {height: 100%;}
.floatCentered {margin: auto;}

	
/* 4. FORMS */
label {color: #fff; text-transform: lowercase; background-color: #333; padding: 1px 3px; font-size: 10px; border: solid #000; border-width: 1px 1px 0px 1px;}
input, textarea, select {border: 1px solid #000; padding: 2px 0px;}
select {font-size: 10px; padding: 2px 1px 2px 1px;}	
form p {margin: 10px 0;}
.smallText {font-size: 9px;}
.newForm {border-bottom: 3px solid #000; padding-bottom: 4px;}
p.checkbox {margin: 10px 0px;}
p.checkbox input {width: auto;}
p.checkbox input[type=checkbox] {float: left; margin: 0px 7px 0 4px; display: inline;}
p.checkbox input[type=hidden] {display: none;}

/* 5. BUTTONS */
button, *.button {padding: 2px 4px; color: #fff; background: #999 url(/images/bg_button.gif) repeat-x; cursor: pointer; border: 1px solid #000; font-size: 11px; text-decoration: none; text-transform: none; line-height: 20px;}
button:hover, *.button:hover {color: #ff7f00; background: #000; border-color: #ff7f00;}
a.edit {float: right; margin: 2px 2px 0 0; padding: 4px;}
.buttonsCont {text-align: right;}

/* CALENDARS */
.ui-datepicker { width: 200px; padding: .2em .2em 0; background-color: #efefef; border: 3px solid #000; display: none;}
.ui-datepicker .ui-datepicker-header { position:relative;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 3px; width: 14px; height: 14px; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 2px; }
.ui-datepicker .ui-datepicker-prev { left:2px; background: url(/images/btn_calendar_prev.png) no-repeat;}
.ui-datepicker .ui-datepicker-next { right:2px; background: url(/images/btn_calendar_next.png) no-repeat;}
.ui-datepicker .ui-datepicker-prev-hover { background: url(/images/btn_calendar_prev_over.png) no-repeat;}
.ui-datepicker .ui-datepicker-next-hover { background: url(/images/btn_calendar_next_over.png) no-repeat;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0; line-height: 1.8em; text-align: center; font-size: 12px; background-color: #000; color: #bbb; font-weight: bold;}
.ui-datepicker .ui-datepicker-title select { float:left; font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker .ui-datepicker-title select.ui-datepicker-year { float: right; }
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: 0; text-align: center; font-weight: bold; border: 0; font-size: 12px; }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
.ui-state-hover {background-color: #ddd;}
.ui-state-hightlight {background-color: #efefef;}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* CLOCK PICKER */

#CP_hourcont { padding: 0px; position:absolute; border:2px solid #000; background-color:#f2f2f2; }
#CP_minutecont { padding: 1px; position:absolute; background-color:#bbb; width:45px; } 
.floatleft { float:left; }
.CP_hour { padding:3px; font-size:10px; white-space:nowrap; cursor:pointer; width:35px; }
.CP_minute { padding:2px; background-color:#bbb; font-size:9px; white-space:nowrap; cursor:pointer; width:auto; }
.CP_over { background-color:#FFFFFF; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}

/* AUTO COMPLETE */
.ac_results { padding: 0px; border: 1px solid #000; background-color: #fff; overflow: hidden; z-index: 99999; }
.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0; }
.ac_results li { margin: 0px; padding: 2px 5px; cursor: default; display: block; font: menu; font-size: 12px; line-height: 16px; overflow: hidden; }
.ac_loading { background: #fff url('/images/indicator.gif') right center no-repeat; }
.ac_odd { background-color: #eee; }
.ac_over { background-color: #000; color: #ff7f00; }

.helpText {padding: 10px; margin: 5px;text-align: justify; border-top: 1px solid #ccc; border-left: 1px solid #ccc;}

/* FEEDBACK */
#feedback {position: fixed; bottom: 4px; left: 4px; padding: 5px; border: 1px solid #000; text-decoration: none; display: block; width: 100px;}
#feedback:hover {border-color: #ff7f00;}
#feedback img {vertical-align: bottom; margin-right: 5px;}
#feedbackCont {width: 400px; padding: 8px;}
#related_url_error {margin-left: 46px;}
#feedback_comment_error {margin-left: 70px;}

/* 500.html */
#error500 p {margin: 5px 0;}
#feedback500 {margin-top: 20px; padding: 20px;}
#feedback500 h1 {margin-left: 5px;}
#ajaxFeedback500 {}

.formError {position: absolute; margin-top: -9px;}
.formError img {float: left;}
.formError p {float: left; background: transparent url(/images/bg_formerror.png) repeat-x; margin: 0px; height: 28px; font-size: 10px; color: #fff; line-height: 17px;}

#ajaxError {width: 400px; padding: 5px;}
#ajaxError a {color: #000;}
#ajaxError a:hover {color: #ff7f00;}

#login_error {margin-left: 21px;}
#password_error {margin-left: 44px;}