/* 
PAGE GENERATOR CLASSES
These styles are used by pages that are dynamically built by the page generator.
There are 4 types of pages created with the generator.  They are:
	-> Login Page where a user is asked for there login details (username and password),
	-> Forgot Login Page which is used when a user forgets there login and asks for their 
	   email address and sends there details to them.
	-> List page which returns a list of rows and allowing the user to select one or more to do operations on.
	-> Form page which is a page where the user can edit information and submit.
*/

/* All pages come in a <table>. */

.LoginTable,
.ForgotLoginTable,
.MenuTable,
.ListTable,
.CalendarTable,
.FormTable {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}


/* All pages have a <tr> which is set to the header row which contains the title of the page. */

.LoginHeaderRow,
.ForgotLoginHeaderRow,
.ListHeaderRow,
.CalendarHeaderRow,
.FormHeaderRow {
	font-weight: bold;
}

.LoginHeaderRow img,
.ForgotLoginHeaderRow img,
.ListHeaderRow img,
.CalendarHeaderRow img,
.FormHeaderRow img {
	margin: 0 2px;
}


/* List and Form pages have a <tr> which is set to the criteria row which describes how the page is filtered. */

.ListCriteriaRow td,
.CalendarCriteriaRow td,
.FormCriteriaRow td {
	padding: 4px 0;
}



/* All pages have a <tr> which is set to the description row which contains the description of the page. */

.LoginDescriptionRow td,
.ForgotLoginDescriptionRow td,
.ListDescriptionRow td,
.ListInstructionRow td,
.CalendarDescriptionRow td,
.CalendarInstructionRow td,
.FormDescriptionRow td,
.FormInstructionRow td {
	padding: 4px 0;
}



/* All pages have a <tr> which is set to the message row which contains any information, warning or error messages returned from a submit. */

.LoginMessageRow td,
.ForgotLoginMessageRow td,
.ListMessageRow td,
.CalendarMessageRow td,
.FormMessageRow td {
	padding-top: 4px 0;
}

.InformationMessage {
	color: Green;
}

.WarningMessage {
	color: Orange;
}

.ErrorMessage {
	color: Red;
}



/* List and Form pages have a <tr> which is set to the column header row which contains a title for each column. */

.ListColumnHeaderRow td,
.CalendarColumnHeaderRow td,
.FormColumnHeaderRow td {
	padding: 4px;
	font-weight: bold;
	font-size: smaller;
}

.FormColumnHeaderRow td {
	display: none;
}



/* All pages have multiple <tr>s which are set to the detail row which contains the details.
   The form and list have been broken down to odd and even rows which can be styled (perhaps different colors) so each row is distinguishable. */

.LoginDetailRow td,
.ForgotLoginDetailRow td,
.ListOddDetailRow td,
.ListEvenDetailRow td,
.CalendarDetailRow td {
	padding: 4px;
	font-size: smaller;
}

.ListOddDetailRow td {
	background-color: rgba(127,127,127,.075);
}

.ListOddDetailRow:hover td,
.ListEvenDetailRow:hover td {
	background-color: rgba(127,127,127,.15);
}



/* All pages except the list have multiple <td>s which are set to Name or Value cells 
   which contains the name (title) and value of the field in the detail row. Also, Name and Value cells
   may have be distinguished when a value is required. */

.LoginNameCell,
.ForgotLoginNameCell {
	width: 50%;
	font-weight: bold;
	text-align: right;
}

.LoginValueCell,
.ForgotLoginValueCell {
	width: 50%;
}

.FormNameCell, 
.FormNameCellWithRequiredValue {
	padding: 4px;
	padding-right: 15px;
	width: 25%;
	text-align: right;
	white-space: nowrap;
}

.FormNameCell a {
}

.FormNameCell .Information, 
.FormNameCellWithRequiredValue .Information {
	float: right;
	margin-right: -15px;
	padding-left: 2px;
}

.FormNameCellWithRequiredValue .Required {
	padding-right: 3px;
}

.FormValueCell,
.FormRequiredValueCell {
	padding: 4px;
	width: 75%;
}

.LoginValueCell #UserName {
	width: 250px;
}

.LoginValueCell #Password {
	width: 100px;
}

.ForgotLoginValueCell #EmailAddress {
	width: 250px;
}


/* Calendar Cells */
.CalendarCommandRow .ViewCommands {
	float: left;
	white-space: nowrap;
}
.CalendarCommandRow .PageCommands {
	float: right;
	white-space: nowrap;
}

.Day .CalendarCell {
}

.Week .CalendarCell,
.Month .CalendarCell {
	width: 14.25%;
}

.CalendarCell.PreviousMonth,
.CalendarCell.NextMonth
{
}

.CalendarCell.Today
{
}

.CalendarCell .Date,
.CalendarCell .Item {
	display: block;
}


/* In a list page there a record selectors (checkboxes) and editor (more info) columns. */

.ListRecordSelectorCell,
.ListRecordEditorCell {
	text-align: center;
}

.ListRecordSelectorCell {
	width: 22px;
}

.ListRecordEditorCell {
	width: 60px;
}



/* The following are all the different types of values that can be visible in the form and list value cells. */

.ListItemCell,
.ListCollectionCell,
.ListForeignCollectionCell,
.ListLinkingForeignCollectionCell,
.ListTextCell,
.ListMultipleLineTextCell,
.ListHTMLCell,
.ListURLCell,
.ListWebAddressCell,
.ListFileURLCell,
.ListImageURLCell,
.ListVideoURLCell,
.ListAudioURLCell,
.ListEmailAddressCell,
.ListPasswordCell,
.ListDecimalCell,
.ListIDCell,
.ListDurationCell,
.ListRankingCell,
.ListMoneyCell,
.ListPercentageCell,
.ListEnumerationCell,
.ListDateTimeCell,
.ListBooleanCell,
.ListGroupCell {
	width: auto;
}

.ListImageURLCell {
	width: 80px;
	text-align: center;
}

.ListImageURLCell image {
	border-style: solid;
	border-color: black;
	border-width: 1px;
	width: 80px;
	text-align: center;
}

.FormItemControl,
.FormCollectionControl,
.FormForeignCollectionControl,
.FormLinkingForeignCollectionControl,
.FormTextControl,
.FormMultipleLineTextControl,
.FormHTMLControl,
.FormURLControl,
.FormWebAddressControl,
.FormFileURLControl,
.FormImageURLControl,
.FormVideoURLControl,
.FormAudioURLControl,
.FormEmailAddressControl,
.FormPasswordControl,
.FormDecimalControl,
.FormIDControl,
.FormDurationControl,
.FormRankingControl,
.FormMoneyControl,
.FormPercentageControl,
.FormEnumerationControl,
.FormDateTimeControl,
.FormBooleanControl,
.FormGroupControl {
	width: 85%;
}

.FormLinkingForeignCollectionControl {
	border-style: solid;
	border-width: 1px;
	border-color: rgb(127,157,185);
	height: auto;
	max-height: 120px;
	overflow: auto;
	background-color: white;
	color: black;
}
.FormLinkingForeignCollectionControl div {
	height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.FormLinkingForeignCollectionControl div input[type="checkbox"] {
}
.FormLinkingForeignCollectionControl div span {
	cursor: default;
}




/* HTML and MultipleLineText readonly values */
.FormValueCell .HTML,
.FormValueCell .MultipleLineText
{
	max-height: 120px;
	overflow: auto;
	width: 85%;
}




/* Form pages have a <tr> which is set to the required message row which contains the required message for required fields. ie. All fields italicised are required.*/

.FormRequiredMessageRow td {
	font-size: smaller;
	text-align: center;
}



/* List pages have a <tr> which is set to the list page range row which contains the page and record ranges. ie. Page 2 of 9 : Records 20-40 of 175.*/

.ListPageRangeRow td {
	font-size: smaller;
	text-align: center;
}



/* All pages have a <tr> which is set to the command row which contains the commands (buttons) of the page. ie. Add New, Remove, Submit, Reset. */

.LoginCommandRow td,
.ForgotLoginCommandRow td,
.ListCommandRow td,
.CalendarCommandRow td,
.FormCommandRow td {
	text-align: center;
	vertical-align: middle;
}


.FormTable tr:hover td[title] {
	position: relative;
}

.FormTable tr:hover td[title]:after {
    content: attr(title);
	display: block;
	position: absolute;
	bottom: 120%;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(256, 256, 256, 0.1);
	padding: 3px 7px;
	max-width: 100%;
	white-space: normal;
	color: #fff;
	background-color: #888;
	-moz-box-shadow: 3px 3px 5px #bbb;
	-webkit-box-shadow: 3px 3px 5px #bbb;
	box-shadow: 3px 3px 5px #bbb;
	z-index: 3;
}





@media screen and (max-width: 599px) {
	.FormTable,
	.FormTable tbody,
	.FormTable tr,
	.FormTable td {
		clear: both;
		display: block;
		width: auto;
		text-align: left;
	}
	.FormColumnHeaderRow td {
		display: none;
	}
	.FormItemControl,
	.FormCollectionControl,
	.FormForeignCollectionControl,
	.FormLinkingForeignCollectionControl,
	.FormTextControl,
	.FormMultipleLineTextControl,
	.FormHTMLControl,
	.FormURLControl,
	.FormWebAddressControl,
	.FormFileURLControl,
	.FormImageURLControl,
	.FormVideoURLControl,
	.FormAudioURLControl,
	.FormEmailAddressControl,
	.FormPasswordControl,
	.FormDecimalControl,
	.FormIDControl,
	.FormDurationControl,
	.FormRankingControl,
	.FormMoneyControl,
	.FormPercentageControl,
	.FormEnumerationControl,
	.FormDateTimeControl,
	.FormBooleanControl,
	.FormGroupControl,
	.FormValueCell .HTML,
	.FormValueCell .MultipleLineText {
		width: 100%;
	}
}







/* All buttons used by the page generator. */

.ImageButton image {
	margin-left: 3px;
	margin-right: 3px;
	border-style: none;
	vertical-align: middle;
	cursor: hand;	
}

a.TextButton,
input[type="button"].TextButton,
input[type="submit"].TextButton,
input[type="reset"].TextButton,
button.TextButton {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	margin: 0;
	-webkit-box-shadow: 1px 1px 6px rgba(127, 127, 127, .1);
	-moz-box-shadow: 1px 1px 6px rgba(127, 127, 127, .1);
	box-shadow: 1px 1px 6px rgba(127, 127, 127, .1);
	border: 1px solid #ddd;
	border-color: rgba(127, 127, 127, .2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 6px 8px;
	width: auto;
	max-width: 100%;
	font-family: inherit;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	line-height: 1em;
	white-space: nowrap;
	vertical-align: baseline;
	color: #333;
	background-color: #fff;
	-webkit-transition: all linear .2s;
	-moz-transition: all linear .2s;
	-o-transition: all linear .2s;
	transition: all linear .2s;
	cursor: pointer;
}
input[type="button"].TextButton::-moz-focus-inner,
input[type="submit"].TextButton::-moz-focus-inner,
input[type="reset"].TextButton::-moz-focus-inner,
button.TextButton::-moz-focus-inner{
	border: 0;
	padding: 0;
}
a.TextButton:focus,
a.TextButton:hover,
input[type="button"].TextButton:hover,
input[type="button"].TextButton:focus,
input[type="submit"].TextButton:hover,
input[type="submit"].TextButton:focus,
input[type="reset"].TextButton:hover,
input[type="reset"].TextButton:focus,
button.TextButton:hover,
button.TextButton:focus{
	-webkit-box-shadow: 1px 1px 6px rgba(127, 127, 127, .3);
	-moz-box-shadow: 1px 1px 6px rgba(127, 127, 127, .3);
	box-shadow: 1px 1px 6px rgba(127, 127, 127, .3);
	outline: none;
	text-decoration: none;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(127, 127, 127, .05)), to(rgba(127, 127, 127, 0)));
	background-image: -webkit-linear-gradient(top, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0));
	background-image: -moz-linear-gradient(top, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0));
	background-image: -o-linear-gradient(top, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0));
	background-image: linear-gradient(to bottom, rgba(127, 127, 127, .05), rgba(127, 127, 127, 0));
	background-repeat: repeat-x;
	color: #000;
}

.ListCommandRow a.TextButton,
.ListCommandRow input[type="button"].TextButton,
.ListCommandRow input[type="submit"].TextButton,
.ListCommandRow input[type="reset"].TextButton,
.ListCommandRow button.TextButton,
.CalendarCommandRow a.TextButton,
.CalendarCommandRow input[type="button"].TextButton,
.CalendarCommandRow input[type="submit"].TextButton,
.CalendarCommandRow input[type="reset"].TextButton,
.CalendarCommandRow button.TextButton,
.FormCommandRow a.TextButton,
.FormCommandRow input[type="button"].TextButton,
.FormCommandRow input[type="submit"].TextButton,
.FormCommandRow input[type="reset"].TextButton,
.FormCommandRow button.TextButton {
	margin: 3px;
}



/* Button on the drop down list */
.DropDown
{
	padding-right: 15px;
	background-image: url(../userfiles/image/system/dropdownbutton.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
.DropDown:hover
{
	background-image: url(../userfiles/image/system/dropdownbuttonHover.gif);
}






/* The following is used on <span> tags and is used in a template to note that content is placed here. */

.Content {
	display: block;
}





/* New class tags used */

table.Object > caption,
table.Object > tr > *,
table.Object > * > tr > * {
    padding: 4px;
}
table.Object .Property .Name {
    width: 30%;
}

div.Object {
	display: block;
	text-align: center;
}

div.Object .Property {
	display: block;
	padding: 2px;
	text-align: left;
}

div.Object .Property .Name {
	display: inline-block;
	width: 30%;
}

div.Object .Property .Value {
	display: inline-block;
	width: auto;
}

div.Object .Property.Odd {
}

div.Object .Property.Even {
}

table.Object a.Method,
div.Object a.Method {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    margin: 0;
    -webkit-box-shadow: 1px 1px 6px rgba(127, 127, 127, .1);
    -moz-box-shadow: 1px 1px 6px rgba(127, 127, 127, .1);
    box-shadow: 1px 1px 6px rgba(127, 127, 127, .1);
    border: 1px solid #ddd;
    border-color: rgba(127, 127, 127, .2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 6px 8px;
    width: auto;
    max-width: 100%;
    font-family: inherit;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    line-height: 1em;
    white-space: nowrap;
    vertical-align: baseline;
    color: #333;
    background-color: #fff;
    -webkit-transition: all linear .2s;
    -moz-transition: all linear .2s;
    -o-transition: all linear .2s;
    transition: all linear .2s;
    cursor: pointer;
}
table.Object a.Method:hover,
div .Object a.Method:hover {
    color: #0e1176;
}

div.Collection .Object {
	display: block;
}

div.Collection .Object.Odd,
div.Collection .Object.Odd .Property.Odd,
div.Collection .Object.Odd .Property.Even {
}

div.Collection .Object.Even,
div.Collection .Object.Even .Property.Odd,
div.Collection .Object.Even .Property.Even {
}









/* DON'T PRINT */

@media print {
	.ListRecordSelectorCell,
	.ListRecordEditorCell,
	.ListMethodCell,
	.LoginCommandRow,
	.ForgotLoginCommandRow,
	.ListCommandRow,
	.FormCommandRow,
	.TextButton,
	.EmailFooter,
	.NoPrint {
		display: none;
	}
}








/* File Upload status bar */

#UploadDisplay {
	display: block;
	position: absolute;
	left: 400px;
	top: 300px;
   	border: solid 1px gray;
  	padding: 20px;
	width: 300px;
	height: 85px;
	z-index: 1;
	background-color: #f0f0f0;
}

#UploadDisplayFrame {
 	margin: 0px;
	border: 0px;
	padding: 0px;
 }

.UploadBarBody {
	background-color: #f0f0f0;
}

.UploadProgressBar {
	width: 99%;
}

.UploadHeading {
	white-space: nowrap;
}

.UploadBar {
	margin-top: 5px;
  	border: solid 1px #08086b;
	width: 99%;
	background-color: White;
}

.UploadBarPercent {
	background-color: #08086b;
}

.UploadStatus {
	margin-top: 5px;
	white-space: nowrap;
}

.UploadCancel {
	margin-top: 10px;
	text-align: center;
}











/* Styles here are used to define the menu and its items and sub-menus. */




/* Base Menu Styles - SHOULD NOT NEED TO MODIFY */

.Menu {
	margin: 0;
	padding: 0;
	cursor: default;
}

.Menu.Closed {
	display: none;
}

.Menu .Menu {
	z-index: 1;
}

.Menu .Menu .Menu {
	z-index: 2;
}

.Menu .Menu .Menu .Menu {
	z-index: 3;
}

.Menu li,
.Menu li li {
	margin: 0;
	list-style-type: none;
	list-style-image: none;
}

.Menu .Item .Name,
.Menu .Item .Description {
	display: block;
	cursor: hand;
}

.Menu .Item .Image {
	float: left;
	cursor: auto;
}

.Menu > .Item:hover > .Menu {
	display: block;
}


/* Horizontal Menu Styles - SHOULD NOT NEED TO MODIFY */

.HorizontalMenu .Line {
	display: inline;
}

.HorizontalMenu .Line hr {
	display: none;
}

.HorizontalMenu .Item {
	display: inline;
	position: relative;
	width: auto;
}

.HorizontalMenu .Menu .Menu {
	position: absolute;
	left: 0;
	height: auto;
}

.HorizontalMenu .Menu .Menu .Line,
.HorizontalMenu .Menu .Menu .Item {
	clear: both;
	display: block;
}

.HorizontalMenu .Menu .Menu .Line hr,
.HorizontalMenu .Menu .Menu .Item a {
	display: block;
}

.HorizontalMenu .Menu .Menu .Menu {
	top: 0;
}




/* Sub-Horizontal Menu Styles - SHOULD NOT NEED TO MODIFY */

.SubHorizontalMenu .Line {
	display: inline;
}

.SubHorizontalMenu .Line hr {
	display: none;
}

.SubHorizontalMenu .Item {
	display: inline;
	position: relative;
	width: auto;
}

.SubHorizontalMenu .Menu .Menu {
	position: absolute;
	left: 0;
}




/* Vertical Menu Styles - SHOULD NOT NEED TO MODIFY */

.VerticalMenu .Line {
	clear: both;
	display: block;
}

.VerticalMenu .Item {
	clear: both;
	display: block;
	position: relative;
}

.VerticalMenu .Item a {
	display: block;
}

.VerticalMenu .Menu .Menu {
	position: absolute;
	top: 0;
}




/* Sub-Vertical Menu Styles - SHOULD NOT NEED TO MODIFY */

.SubVerticalMenu .Line {
	clear: both;
	display: block;
}

.SubVerticalMenu .Item {
	clear: both;
	display: block;
	position: relative;
}

.SubVerticalMenu .Item a {
	display: block;
}








/* List Command Menu */
.ActionMenu #search {
    z-index: 1;
}
.ActionMenu nav {
    z-index: auto !important;
    margin: 0;
}
.ActionMenu nav ul {
    z-index: 1 !important;
    margin: 0;
}
.ActionMenu li {
	float: left;
	display: block;
	margin-right: 5px;
	margin-bottom: 5px;
	padding: 3px;
	border: 1px solid #d1d2d4;
	font-size: 10px;
	text-align: left;
	background-color: #fff;
	color: #666;
}

.ActionMenu li:last-child {
	margin-right: 0;
}

.ActionMenu li:hover {
	color: #333;
}

.ActionMenu li a {
	display: block;
	font-style: normal;
	color: #666;
}

.ActionMenu li a:hover {
	text-decoration: none;
	color: #333;
}

.ActionMenu li .Description {
	display: none !important;
	position: absolute;
	bottom: 100%;
	left: 0;
	border: solid 1px #d1d2d4;
	padding: 3px;
	width: 112px;
	background-color: #fff;
	color: #666;
}

.ActionMenu li:hover .Description {
/*	display: block; */
}

.ActionMenu ul ul {
	top: 100%;
	left: -1px !important;
	border: solid 1px #d1d2d4;
	width: 120px;
	background-color: #fff;
}

.ActionMenu li li {
	float: none;
	margin: 0;
	border: none;
	border-top: solid 1px #d1d2d4;
}

.ActionMenu li li:first-child {
	border: none;
}

.ActionMenu li li .Description {
/*	display: none; */
	top: -1px;
	bottom: auto;
	left: 100%;
}

.ActionMenu li li:hover .Description {
	display: block !important;
}

.ListRecordEditorCell.ActionMenu li {
	float: none;
	display: inline-block;
	margin: 0;
	width: 52px;
	text-align: center;
}

.ListRecordEditorCell.ActionMenu ul ul {
	left: auto !important;
	top: -1px !important;
	right: 100% !important;
}

.ListRecordEditorCell.ActionMenu li li {
	display: block;
	width: auto;
	text-align: left;
}

.ListRecordEditorCell.ActionMenu li li .Description {
	left: auto;
	right: 100%;
}




/* Note Styles */
.Note
{
	margin-bottom: 5px;
}
.Note .Date 
{
	font-weight: bold;
	margin-right: 5px;
}
.Note .Date:after
{
	content: ": ";
}
.Note .Content
{
	display: inline;
}
.Note .Author
{
	display: block;
	font-style: italic;
}






/* Image Gallery and Viewer Styles */
.ImageGallery a
{
	display: block;
	float: left;
	padding: 10px;
	width: 160px;
	height: 160px;
	text-align: center;
}

.ImageGallery a img
{
	margin: 0;
	border: none;
	padding: 0;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

.ImageGallery a span
{
	display: block;
}

#ImageViewer
{
	text-align: center;
	padding-bottom: 15px;
}

#ImageViewer img
{
	border: none;
	max-width: 100%;
}

#ImageViewer .Navigation
{
	padding-bottom: 10px;
}

#ImageViewer span
{
	display: block;
	padding: 5px;
	font-size: larger;
}



/* Star Ratings */
.Stars
{
	display: inline-block;
	width: 80px;
	height: 16px;
	background: url(../userfiles/image/system/stars.png) left -16px repeat-x;
}

.Stars span
{
	display: block;
	height: 16px;
	background: url(../userfiles/image/system/stars.png) left top repeat-x;
}



/* Captcha Image */
.CaptchaImage 
{
	width: 180px;
	height: 50px;
}



#SortEditor p > label,
#FilterEditor p > label {
	display: inline-block;
	width: 140px;
}

#SortEditor p > label + *,
#FilterEditor p > label + * {
	display: inline-block;
	font-weight: bold;
}

#FilterEditor #ExpressionConcatenator {
	display: none;
}

#FilterEditor #ExpressionConcatenator.Show {
	display: inline;
}

#FilterEditor #ExpressionValue select,
#FilterEditor #ExpressionValue input {
	display: none;
}

#FilterEditor #ExpressionValue select.Show,
#FilterEditor #ExpressionValue input.Show {
	display: inline;
}

#SortEditor #Commands,
#FilterEditor #Commands {
	text-align: center;
}