﻿/* basic element styles */

body{
	background-color: #DDD;
	font-family: Arial;
	font-size: 12px;
	color: #000;
	margin: 2px;
}

a{
	color: #000;
	text-decoration: none;
}

a:hover{
	color: #08F;
}

a.caption{
	color: #FFF;
	text-decoration: underline;
}

hr{
	background-color: #CCC;
	color: #CCC;
	height: 1px;
}

table{
	width: 100%;
	max-width: 800px;
}

hr.hint{	
	border: 1px dotted #CCC;
	height: auto;
}

img.clickable{
	cursor: pointer;
}

img.header{
}

/* main styles */

div.mainCenter{
	text-align: center;
}

div.main{
	background-color: #FFF;
	clear: both;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

div.rowStretch{
	width: 100%;
}

div.rowCenter{
	text-align: center;
}

/* header and footer styles */

div.headerImage{
	float: left;
	width: 800px;
	background-image: url(Images/epwebc2logo3.png);
	background-position: top left;
	background-repeat: no-repeat;
}

div.headerLinks{
	float: left;
	min-height: 100px;
	vertical-align: middle;
}

div.footer{
	font-size: 1.0em;
	font-weight: bold;
	background-color: #CCC;
	width: 800px;
	clear: both;
	text-align: center;
}

/* basic row styles */

div.rowTitle{
	background-color: #369;
	color: #FFF;
	font-size: 1.4em;
	text-align: center;
	width: 800px;
	font-weight: bold;
	clear: both;
}

div.rowCaption{
	color: #369;
	font-size: 1.2em;
	width: 800px;
	clear: both;
	font-weight: bold;
	border-bottom: solid 1px #CCC;
	text-align: left;
}

div.rowInput{
	background-color: #FFF;
	width: 700px;
	clear: both;
	padding-left: 100px;
	text-align: left;
}

div.rowData{
	background-color: #FFF;
	width: 700px;
	clear: both;
	padding-left: 100px;
	text-align: left;
}

div.rowGrid{
	background-color: #FFF;
	width: 800px;
	clear: both;
	text-align: left;
}

div.rowBack{
	background-color: #FFF;
	width: 800px;
	float: left;
	text-align: right;
}

div.cellCaption{
	background-color: #FFF;
	width: 150px;
	float: left;
	height: 20px;
	font-weight: bold;
}

div.rowGridCompressed{
	background-color: #FFF;
	width: 800px;
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

div.cellInputCompressed{
	float: left;
	height: 20px;
	font-weight: bold;
	background-color: #FFF;
	width: 100%;
	min-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

div.cellCaptionCompressed{
	width: 50px;
	float: left;
	min-height: 20px;
	height: 20px;
	font-weight: bold;
	padding-right: 5px;
	text-align: right;
	vertical-align: text-bottom;
	background-color: #FFF;
}

div.cellInput{
	float: left;
	text-align: left;
}

div.cellRequired{
	float: left;
	color: #F00;
	padding-left: 5px;
	font-weight: bold;
}

div.cellNarrow{
	width: 50px;
}

/* event view styles */

div.eventCaptions{
	float: left;
	width: 150px;
	font-weight: bold;
	text-align: left;
}

div.eventValues{
	float: left;
}

/* location view styles */

div.locationCaption{
	width: 200px;
	float: left;
	height: 20px;
	font-weight: bold;
	text-align: left;
}

div.locationInput{
	float: left;
	text-align: left;
}

div.locationHeader{
	font-weight: bold;
	text-decoration: underline;
}

div.locationFeature{
	float: left;
	width: 300px;
	text-align: left;
}

div.locationFeatureQuantity{
	float: left;
	width: 100px;
	text-align: right;
}

div.locationSetupType{
	float: left;
	width: 300px;
	text-align: left;
}

div.locationSetupTypeCapacity{
	float: left;
	width: 100px;
	text-align: right;
}

/* find available space grid styles */

div.availableHeader{
	font-weight: bold;
	text-decoration: none;
}

div.availableLocation{
	float: left;
	width: 49%;
	text-align: left;
}

div.availableSetupType{
	float: left;
	width: 35%;
	text-align: left;
}

div.availableCapacity{
	float: left;
	width: 15%;
	text-align: center;
}

/* find event grid styles */

div.findHeader{
	font-weight: bold;
	text-decoration: none;
}

div.findEventName{
	float: left;
	width: 29%;
	text-align: left;
}

div.findLocation{
	float: left;
	width: 20%;
	text-align: left;
}

div.findDateTimes{
	float: left;
	width: 10%;
	text-align: center;
}

div.findCategory{
	float: left;
	width: 20%;
	text-align: left;
}

/* labor grid styles */

div.laborHeader{
	font-weight: bold;
	text-decoration: underline;
}

div.laborSubGroup{
	float: left;
	width: 20%;
	text-align: left;
}

div.laborLabor{
	float: left;
	width: 20%;
	text-align: left;
}

div.laborTimes{
	float: left;
	width: 10%;
	text-align: center;
}

div.laborDescription{
	float: left;
	width: 39%;
	text-align: left;
}

/* request styles */

div.requestThankyou{
	font-weight: bold;
	text-align: center;
}

/* booking calendar styles */

div.calendarRow{
	width: 800px;
	clear: both;
	min-height: 20px;
	border-bottom: solid 1px #AAA;
}

div.calendarMonth{
	width: 800px;
}

div.calendarLocation{
	float: left;
	width: 303px;
	background-color: #CCC;
	min-height: 20px;
	text-align: left;
}

div.calendarLocationMonth{
	width: 210px;
}

div.calendarCaption{
	background-color: #369;
	color: #FFF;
	border-bottom-color: #369;
}

div.calendarCenter{
	text-align: center;
}

div.calendarCell{
	float: left;
	clear: none;
	width: 71px;
	text-align: center;
	border-bottom: none 1px #CCC;
	min-height: 20px;
	padding: 0;
}

div.calendarCellMonth{
	width: 19px;
}

div.calendarItem{
	clear: both;
	cursor: default;
}

div.calendarItemBorder{
	border: 1;
	border-style: solid;
	border-width: 1px;
}

div.calendarItemClickable{
	cursor: pointer;
}

div.calendarNoBorder{
	border-bottom-style: none;
	border-bottom-width: 0;
}

div.calendarWeekend{
	color: #F00;
	background-color: #EEE;
}

div.calendarAlternate{
	color: #000;
	background-color: #EEF;
}

div.calendarWeekday{
	color: #000;
	background-color: #FFF;
}

div.calendarEvent{
}

div.hint {
	position: absolute;
	background: #ffd;
	border: 1px dotted #884;
	color: #884;
	padding: 5px;
	font-size: 0.8em;
}
