/* >>> RESET <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1.5; }
ol, ul { list-style: none; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5 { font-size: 13px; }
h6 { font-size: 12px; }/* = The 1Kb Grid = */     /* 12 columns, 60 pixels each, with 20 pixel gutter */

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }

.column {
	margin: 0 10px;
	overflow: hidden;
	float: left;
	display: inline;
}
.row {
	width: 960px;
	margin: 0 auto;
	padding: 0px 10px;
	overflow: hidden;
}
.row .row {
	margin: 0 -10px;
	padding: 0px;
	width: auto;
	display: inline-block;
}

/** Grid */
#grid {

    /* Vertical grid lines */
    /*background: url(../img/12_col.png) repeat-y 0 0;*/
    background: url(../img/12_col.png) repeat-y 0 0;

    /* Dimensions - same width as your grid with gutters */
    width: 960px;

    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -480px;

}

/**
 * Horizontal grid lines, defined by your base line height
 *
 * Remember, the CSS properties that define the box model:
 * visible height = height + borders + margins + padding
 */
#grid .horiz{
    /* 20px line height */
    height: 19px;
    border-bottom: 1px dotted #aaa;
    margin: 0;
    padding: 0;
}.button{
    font-weight: bold;
    color: #fff;
    height: 21px;
    width: 84px;
	margin-bottom: 3px;
	
    background-repeat: repeat-x;
	background-image: url("../img/buttonbg.png");
	
	border-width: 0px;
		
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);		
		
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

#submenu .textbox {
	width: 132px;
}

/* >>> QCODO STUFF <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
	td { border: 1px solid; }
	
	div.right TD {
		border: 0px !important;
		text-align: left; 
	}

    .error, .success, .warning {
		border: 1px solid #FFFFFF;
		font-size: 11px;
		margin: 0em;
		padding: 0.2em;
		text-align: center;
		vertical-align: middle;
	}
    
	.warning {
	    background-color: #FFF6BF;
        border-color:#FFD324;
        color:#514721;
    }

	.error {
	    color: #D8000C;
        background-color: #FFBABA; 
		border-color: #D8000C;
	}

	.success {
	    background-color: #E6EFC2;
        border-color: #C6D880;
        color: #264409;
	}

	/* Standard HTML Form Controls */
	input.textbox, textarea.textbox { font: 12px 'Arial', 'Helvetica'; width: 252px; background-color: #eee; border: 1px solid #ccc; padding: 2px 3px 2px 3px;}
	textarea.textbox { height: 120px; }
		input.textbox:focus, textarea.textbox:focus {background-color: #fff; border-color: #aaa;}

	select.listbox { font: 12px 'Arial', 'Helvetica'; width: 183px; background-color: #eee; border: 1px solid #ccc; }
		select.listbox:focus { background-color: #fff; border-color: #aaa;}
		a.listboxReset { font-family: verdana, arial, helvetica; font-size: 8pt; text-decoration: none; color: #337; }
		a.listboxReset:hover { text-decoration: underline; }

	/**
	 * Various QControl-specific Styles
	 */

	/* QFileAsset */
	div.fileassetDbox { border: 4px solid #333; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }
		div.fileassetDbox h1 { margin: 0; }
		div.fileassetDbox input { padding: 3px; margin-right: 5px; }

	/* QDialogBox */
	div.dialogbox { border: 4px solid #333; background-color: #fff; padding: 20px; width: 400px; overflow: auto; }

	/* QDateTimePicker */
	span.datetimepicker { }
		span.datetimepicker select { font: 12px 'Arial', 'Helvetica'; background-color: #eef; border: 1px solid #aaf; }
		span.datetimepicker select:focus { background-color: #fff; border-color: #aaf; }
		span.datetimepicker select.month { width: 45px; }
		span.datetimepicker select.day { width: 45px; margin-left: 8px; }
		span.datetimepicker select.year { width: 60px; margin-left: 8px; }
		span.datetimepicker select.hour { width: 45px; margin-left: 12px; margin-right: 2px; }
		span.datetimepicker select.minute { width: 45px; margin-left: 2px; margin-right: 2px; }
		span.datetimepicker select.second { width: 45px; margin-left: 2px; }

	/* QDataGrid */
	.datagrid { border: 1px solid #bbb; }
		.datagrid caption, table.datagrid tfoot { padding-bottom: 3px; overflow: auto; }
			.datagrid span.left { float: left; font-size: 10px; display: block; }
			.datagrid span.right { float: right; font-size: 10px; display: block; }
		/*
.datagrid tr { background-color: <?php echo BACKGROUND ?>; }
*/
		.datagrid tr.alternate { background-color: #eef; }
		.datagrid th { background-color: #dde; padding: 3px; text-align: left; }
			.datagrid th a { color: #000; text-decoration: none; }
			.datagrid th a:hover { color: #000; text-decoration: underline;}
		.datagrid td { padding: 2px; }
			.datagrid td a { color: #000; }
			.datagrid td a:hover { color: #000; text-decoration: none; }
		.datagrid tfoot { border-top: 1px solid #aaf;} 

	/* QPaginator */
	        .paginator { margin: 0; padding: 0; display: block; background: #efefef; width: 100%; }
		    .paginator span { list-style-type:none; display: inline; padding: 0; margin: 0; }
			.paginator .page a { text-decoration: none; color: #000000; padding: 0 3px 0 3px; margin: 0 2px 0 2px;}
			.paginator .page a:hover { background-color: #bbb; }
			.paginator .arrow { font-weight: bold; color: #ccc; margin: 0; padding: 0 3px 0 3px; }
			.paginator .arrow a { font-weight: bold; color: #000; text-decoration: none; }
			.paginator .selected { font-weight: bold; background-color: #ddd; padding: 0 3px 0 3px; margin: 0 2px 0 2px; border: 1px; border-style: solid; }
			.paginator .break { color: #666; margin: 0 5px 0 5px; }
			.paginator .ellipsis { color: #666; }

	/**
	 * Styles for Custom Render Functions as defined in QControl.class.php
	 */

	div.renderWithName { padding: 4px 0; height: 100%; clear: both; _zoom: 1; }
	div.renderWithName:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
		div.renderWithName div.left { float: left; width: 100px; margin-right: 15px; }
		div.renderWithName div.left span.instructions { font: 10px 'Verdana', 'Arial', 'Helvetica'; color: #999; font-style: italic; text-transform: none;}
		div.renderWithName div.right { /* float: left; */ }
		div.renderWithName div.right span.error { margin-left: 15px;}

	/**
	 * Form and Dashboard Draft-Specific Styles
	 * NOTE: because these are page specific, we use element IDs instead of element classes for most items here
	 * (e.g. we will never have more than one titleBar per page)
	 */

	#titleBar { border: 1px solid #337; margin-bottom: 18px; }
		#titleBar h2 { background-color: #337; font: 12px 'Georgia', 'Times New Roman', 'Times'; font-style: italic; font-weight: bold; color: #fff; margin: 0; padding: 2px 5px 2px 5px; float: none; }
		#titleBar #right { float: right; font: 10px 'Verdana', 'Arial', 'Helvetica'; font-style: normal; font-weight: normal; }
		#titleBar #right a { color: #fff; text-decoration: none; }
		#titleBar #right a:hover { text-decoration: underline; }
		#titleBar h1 { font: 28px 'Georgia', 'Times New Roman', 'Times'; color: #337; margin: 0; padding: 2px 0 2px 5px; font-weight: bold; }

	p.create { }
		p.create a { text-decoration: none; color: #337; font-weight: bold; }
		p.create a:hover { text-decoration: underline; }

	#draftList { }
		#draftList h1 { margin: 0; font: 20px 'Georgia', 'Times New Roman', 'Times'; font-weight: bold; }
		#draftList p { margin-top: 6px; margin-bottom: 18px;}

	#formControls { padding: 0px; }

	#formActions { padding: 10px; height: 20px; margin-top: 18px; }
		#formActions div#save { float: left; }
		#formActions div#cancel { margin-left: 10px; float: left; }
		#formActions div#delete { float: right; }

	#dashboard { }
		#dashboard div#left { float: left; width: 200px; height: 100px; font-size: 10px; background-color: #eef; border: 1px solid #000; padding: 5px; }
		#dashboard div#right { float: left; margin-left: 10px; width: 760px;}
		#dashboard div#right div#pnlList { margin-bottom: 10px; border: 1px solid #000; padding: 5px; height: 300px; overflow: auto; }
		#dashboard div#right div#pnlEdit { border: 1px solid #000; padding: 5px; background-color: #eef; height: 240px; overflow: auto; }
/* >>> END <<< */	BODY {
		background-color: #DEDEDE;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color: #111;
	}
	
	P {
		font-size: 14px;
		margin-bottom: 20px;
	}
	
	P IMG {
		-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);	
		margin: 3px;
	}
	
	H1, H2, H3, H4, H5, H6 {
		text-shadow:0 1px 1px #FFF;
		-moz-text-shadow:0 1px 1px #FFF;
		-webkit-text-shadow:0 1px 1px #FFF;
		font-family: Arial, Helvetica, FreeSans, sans-serif;
	}	
	
	#wrapper { 	
		margin: 0px auto;
		overflow: hidden;
	}	
	
	#container {
		width: 980px;
		overflow: visible;
		margin: 40px auto;
		background-color: #FAFAFA;
		
		-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23);
		-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23);
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.23);
 		 
		border: 1px solid #BBB;
		
		-moz-border-radius-bottomleft: 10px;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;
	}
	#header {
		width: 958px;		
		background-color: #FAFAFA;
		border: 1px solid #FFF;
		padding-top: 20px;	
	}
	
		#logo { 
			margin-bottom: 10px; 
			text-align: center; 
		}
		
		#tagline { width: 770px; } 
			#tagline H2 { 
				font-weight: bold;
				font-size: 17px;
				text-align: center;
				margin-top: 15px;
			}	
	
    #ribbon {
    	width: 1000px;
    	height: 42px; 
		background-color: #f30105;
		color: #FFF;
		overflow: visible;
		position: relative;
		left: -20px;
		top: 0px;
		background-image: url("../img/ribbonbg3.png");
		
		border-left: 1px solid #f97f80;
		border-right: 1px solid #f97f80;
		
		-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);		
		
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}	
	
	#ribbon .column {
		overflow: visible;
		margin: 0px;
	}	
	
	#middle { 
		width: 968px;
		padding-right: 0px;
		border-left: 1px solid #FFF; 
		border-right: 1px solid #FFF; 
		background-color: #F4F4F4;		
	}
		#content {
			background-color: #FAFAFA;
			border-left: 1px solid #CCC;
			width: 757px;
			padding: 20px;
			margin-right: 0px;
			min-height: 200px;
		}
			#content UL {
				margin-left: 20px;
				list-style: disc;
				list-style-type: disc;	
			}
			#content H1 { font-size: 18px; margin-bottom: 15px; }
	
	#footer {
		background-color: #EAEAEA;
		background-image: url("../img/footer.png");
		
		font-size: 13px;
		width: 898px;	
		height: 60px;
		padding: 40px;
		overflow: hidden;
		
		-moz-border-radius-bottomleft: 10px;
		-moz-border-radius-bottomright: 10px;
		-webkit-border-bottom-right-radius: 10px;
		-webkit-border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		border-bottom-left-radius: 10px;

		border-top: 1px solid #CCC; 
		border-bottom: 1px solid #FFF;
		border-left: 1px solid #EEE; 
		border-right: 1px solid #EEE; 
	}
		#footer .grid_2 { width: 120px;	text-align: right; padding-right: 35px; }	
		#footer .grid_3 { width: 204px;	}	
		#footer .grid_4 { width: 255px;	}	
		#footer A { color: #111; }	
		
	#logosy {
		width: 980px;
		margin: 0px auto 40px auto;
		text-align: center;
	}
	
	#menu {
		font-size: 15px;
		font-weight: bold;
		overflow:hidden;
		position: relative;
		top: 0px;
		left: 10px;
		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);	
		background-repeat: repeat-x;	
	}
		#menu A {
			display: block;
			float: left;
			padding: 10px 12px 10px 12px;
			text-decoration: none;
			color: #FFF;
		}
		#menu A:hover { background-image: url("../img/ribbonhover.png"); }
		#menu A.active { background-image: url("../img/ribbonhover.png"); }

	#submenu UL { 
		font-size: 13px;
		margin-top: 20px; 
		font-weight: bold;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);	
	}
	
	#submenu FORM { 
		margin-top: 20px; 
		font-size: 13px;
		text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);	
	}

	#submenu ul {
		list-style-image:none;
		list-style-position:outside;
		list-style-type:none;
	}
		#submenu ul li a {
			background-color: inherit;
			border-bottom: 1px solid #BBB;
			display: block;
			padding: 3px 10px;
			text-decoration: none;
			color: #111;
		}
		#submenu ul li a.subItem {
			padding-left: 20px;
			font-size: 14px;
		}
		#submenu ul li a:hover {
			background-color: #555;
			color: #FFF;
			text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);	
		}