/* ****************************************************************************** */
/* Generic page elements */
/* ****************************************************************************** */
html {
	height: 100%;
}

body {
	height: 100%;
	background: #FFFFFF;
	margin: 0px;
	/* This is a Google font and requires special link in class_page_2015.php */
	font-family: 'Open Sans', sans-serif;
	color: #8C8C8C;
	font-size: 14px;
}

.droid {
	/* Placeholder for reference to elements that want to use this style - NOT YET USED */
	font-family: 'Droid Serif', serif;
}

#pageHeaderDiv_fullWidth {
	width: 100%;
	/* This must be a couple of px more high than pageHeaderDiv_centre so the pageContentSeparatorBandDiv is visible */
	height: 122px;
	/* 	background: #000000; */
	/*
	 background: #000000;
	 opacity: 0.5;*/
	/* Specifying a z-index here ensures that any page content with relative positioning which is scrolled will
	 * not appear over the header - had been a problem!:
	 */
	z-index: 1000000;
}

.pageHeaderDiv_centre {
	color: #FFFFFF;
	margin: 0px auto;
	width: 1440px;
	/* This must be a couple of px less high than pageHeaderDiv_fullWidth so the pageContentSeparatorBandDiv is visible */
	height: 120px;
	/* So content can be positioned absolutely if necessary: */
	position: relative;
}

.pageHeaderLayoutTable {
	/* two pixels less tall than above to make way for separator band: */
	height: 118px;
}

.pageBreadcrumbDiv {
	/* NB: This is placed INSIDE pageHeaderDiv_centre in terms of the DOM, so that it will remain static
	 * when page is scrolled (like the header, thanks to jquery sticky code), however we want it to
	 * appear UNDER the header separator bar visually, and page content should scroll underneath it in terms of z-index.
	 * Use absolute positioning to achieve this.
	 */
	position: absolute;
	top: 122px;
	/*	left: 44px;*/
	/* Try to align start of inner content with the centre of star logo in header: */
	padding-left: 44px;
	background: #FFFFFF;
	width: 100%;
	color: #8C8C8C;
	height: 22px;
}

.pageContentSeparatorBandDiv {
	/* A thin orange band to separate the header and footer from the main page content */
	width: 100%;
	height: 2px;
	background: #E77D23;
}

.pageHeaderNavbarDiv {
	/* Position the strip absolutely within the parent pageHeaderDiv_centre */
	position: absolute;
	bottom: 10px;
	width: 600px;
	left: 200px;
	vertical-align: bottom;
	height: 18px;
	font-size: 14px;
	color: #FFFFFF;
	border: solid 1px red;
}

.headerLinkTable {
	position: relative;
	top: -10px;
}

.navLink {
	margin-left: 40px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 14px;
}

.navLinkFooter {
	margin-left: 40px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 14px;
}
.navLinkCurrentLocation {
	font-weight: bold;
	text-decoration: underline;
}

.navLinkOtherLocation {
	font-weight: normal;
}

.navLink:hover, .navLinkFooter:hover {
	text-decoration: underline;
}

#pageContentDiv_fullWidth {
	/*	border: solid 1px blue;*/
	width: 100%;
	background: #FFFFFF;
}

#pageContentDiv_centre {
	/*border: solid 1px red;*/
	padding-top: 40px;
	padding-bottom: 5px;
	width: 1440px;
	margin: auto;
	/* NB: It's important NOT to have position:relative in order for sticky header to work (if this is set to relative,
	 * it appears behind the header as if header is translucent for some reason! */
	/*	position: relative;*/
	color: #8F8F8F;
	/*	color: #FF0000;*/
	font-size: 14px;
	margin-bottom: 40px;
}

#pageFooterDiv_fullWidth {
	/* CSS FOR FIXED POSITION */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	/* END CSS FOR FIXED POSITION */
	/* 	background: #000000; */
	/*
	 width: 100%;
	 height: 40px;
	 */
	/*
	 background: #000000;
	 opacity: 0.5;*/
}

#pageFooterDiv_centre {
	width: 1440px;
	margin: 0px auto;
	height: 40px;
	/* In case anything wants to position absolute:*/
	position: relative;
	/*	background: #000000;
	 opacity: 0.5;*/
	font-size: 14px;
	color: #FFFFFF;
}

.pageFooterLayoutTable {
	/* two pixels less tall than above to make way for separator band: */
	height: 38px;
}

.translucentBlack {
	/* This is used e.g. for header and footer. It is a way of making the background translucent without
	 * affecting the foreground colours, e.g. if 'opacity' was used instead, white fonts become duller.
	 */
	/* Fallback for web browsers that don't support RGBA */
	background: rgb(0, 0, 0);
	/* RGBA with 0.5 opacity */
	background: rgba(0, 0, 0, 0.5);
	/* For IE 5.5 - 7*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

.sticky-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
}

a {
	color: #E77D23;
	text-decoration: none;
}
a:hover {
	text-decoration: underline
}

/* For things that LOOK like hyperlink but may be e.g. spans etc */
.link {
	cursor: pointer;
	color: #E77D23;
}
.link:hover {
	text-decoration: underline
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* Landing pages (i.e. non-ordering)
 /* ****************************************************************************** */
/*
 H1.landingPage {
 font-weight: normal;
 font-size: 21px;
 letter-spacing: 2px;
 margin-top: 20px;
 margin-bottom: 0px;
 padding: 0px;
 }

 H1.landingPageCompact {
 font-weight: normal;
 font-size: 21px;
 letter-spacing: 0px;
 margin-top: 20px;
 margin-bottom: 0px;
 padding: 0px;
 }
 */

H1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #8C8C8C;
	margin-bottom: 0px;
}

H2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #8C8C8C;
	margin-bottom: 0px;
}

/*
 p.landingPage {
 font-family: 'Droid Serif', serif;
 font-size: 16px;
 font-style: italic;
 color: #8C8C8C;
 line-height: 23px;
 }
 */

.normal {
	font-family: 'Droid Serif', serif;
	font-size: 16px;
	font-style: italic;
	color: #556A77;
	letter-spacing: 0px;
	line-height: 24px;
}

.small {
	color: #8C8C8C;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For input controls / UI:
 /* ****************************************************************************** */
.controlLabel {
	font-size: 14px;
}

.controlValidationErrorMessage {
	font-size: 14px;
}

DIV.roundedControl {
	display: inline-block;
	border-radius: 0.4em;
	border: solid 1px #778C99;
	background: #FFFFFF;
	padding: 5px;
}

.roundedControl INPUT[type=text], .roundedControl INPUT[type=password] {
	border: none;
	background: #FFFFFF;
	font-family: 'Open Sans';
	font-size: 12px;
}

.roundedControl TEXTAREA {
	border: none;
	background: #FFFFFF;
	font-family: 'Open Sans';
	font-size: 12px;
}

.roundedControl SELECT {
	border: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/*	appearance: none;*/
	background: url('../images/generic_page_ui/dropdown_arrow.png') no-repeat;
	background-position: right center;
	font-family: 'Open Sans';
	font-size: 12px;
	height: 20px;
}

.roundedControl INPUT[type=text].innerLabel, .roundedControl INPUT[type=password].innerLabel {
	color: #8C8C8C;
	font-weight: 300;
}

.roundedControl INPUT[type=text]:focus, .roundedControl INPUT[type=password]:focus {
	outline: 0;
}

.roundedControl SELECT:focus {
	outline: 0;
}

.otherControlText {
	font-family: 'Open Sans';
	font-size: 12px;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For buttons (see also inc/utils_gui.php : utils_gui_getButtonHTML()) */
/* ****************************************************************************** */
a.button {
	text-decoration: none;
	display: inline-block;
	color: #8C8C8C;
}

.button:hover {
	/* See inc/utils_gui.php : utils_gui_getButtonHTML() (or js client-side counterpart) - the main button elements are written out by
	 * that function since width and graphic to left of button must be decided on a case-by-case basis.
	 * This just sets the hover state:
	 */
	color: #000000;
	/*	font-weight: 600;*/
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For product options - controls usually rendered by optionManager.js */
/* Controls will only be displayed for development purposes now (compared with
 * old site) and in a narrower region of screen space: */
/* ****************************************************************************** */
table.optionTable {/*border: solid 1px red;*/
	text-align: right;
}

td.optionLabelContainer {/*	width: 30%;*/
	text-align: right;
	vertical-align: top;
	font-size: 14px;
	padding-right: 2px;
	/*	font-weight: bold;*/
	/*border-bottom:dotted 1px #888888;*/
}

td.optionPromptContainer {/*	width: 30%;*/
	vertical-align: top;
	/*	border-bottom: dotted 1px #888888;*/
}

td.optionControlContainer {
	width: 500px;
	text-align: left;
	vertical-align: top;
	/*	border-bottom: dotted 1px #888888; */
}

td.optionThumbnailContainer {
	width: 100px;
	text-align: center;
	/*	border-bottom: dotted 1px #888888; */
}

td.optionBrowseButtonContainer {
	width: 40px;
	/*	border-bottom: dotted 1px #888888;*/
}

td.optionHelpButtonContainer {
	width: 40px;
	vertical-align: top;
	/*	border-bottom: dotted 1px #888888; */
}

td.optionPriceContainer {
	text-align: center;
	vertical-align: top;
	/*	border-bottom: dotted 1px #888888; */
}

.optionLabelContainer, .optionPromptContainer, .optionControlContainer, .optionThumbnailContainer, .optionHelpButtonContainer, .optionBrowseButtonContainer {/*	border-bottom: dotted 1px #888888; */

}

img.optionThumbnail {
	width: 90%;
}

.optionTable select {
	width: 100%;
}

.optionControlCaption {
	font-size: 12px;
}

.optionTable textarea {
	width: 100%;
}

/* ****************************************************************************** */

/* ****************************************************************************** */
/* For product info pages */
/* ****************************************************************************** */
.productInfoHeaderBox {
	width: 300px;
	/*	height: 40px;*/
	/*		border: solid 2px #AAAAAA;*/
	text-align: center;
	/*	background: #DDDDDD;*/
	font-size: 22px;
	font-weight: bold;
	/*	line-height: 37px;*/
	/*	color: #556A77;*/
}

.productInfoLabel {
	font-size: 15px;
	font-weight: bold;
}

table.infoPanel {
	/*border: solid 1px #E77D23;*/
	/*border: solid 1px #DDDDDD;*/
	/*	border-radius: 5px;*/
	background: #EEEEEE;
}

table.infoPanel td {
	padding: 10px;
}

table.infoPanel ul {
	list-style-image: url('../images/generic_page_ui/bullet.gif');
}

table.infoPanel li {
	margin-top: 20px;
}

img.infoPanel {
	width: 100px;
}

.productInfoMainText {
	margin-top: 0px;
	font-size: 13px;
}

.productInfoSmallText {
	font-size: 10px;
}

.dataTable {
	border-collapse: collapse;
	border: solid 1px #DDDDDD;
	font-size: 10px;
}

.dataTable th {
	font-size: 10px;
}

.dataTable td {
}

.dataTable td, .dataTable th {
	border: solid 1px #DDDDDD;
	padding: 2px;
}

/* For non-clickable panels that show info e.g. mount personalisation options but do not launch order wizard */
table.infoPanelWide {
	/*	border: solid 1px #8C8C8C;*/
	height: 180px;
}

.infoPanelWideHeaderText_firstChar {
	font-size: 30px;
	font-weight: bold;
}

.infoPanelWideHeaderText {
	vertical-align: 40%;
	font-size: 15px;
	font-weight: bold;
}

table.infoPanelWide td {
	padding: 5px;
}

td.infoPanelWide_lhs {
	vertical-align: top;
	width: 350px;
}

td.infoPanelWide_centre {
	width: 350px;
	text-align: center;
	vertical-align: middle;
}

td.infoPanelWide_rhs {
	width: 350px;
}

img.infoPanelWide {
	width: 300px;
	display: inline-block;
}

/* For clickable panels that e.g. show a whole product and launch order wizard */
table.infoPanelClickable {
	/* UI may want to stack panels side-by-side */
	display: inline-block;
	margin: 5px;
	border: solid 1px #8C8C8C;
	cursor: pointer;
}

.infoPanelClickableHeader {
	/* UI may want to stack panels side-by-side */
	text-align: center;
	height: 30px;
	background: #8C8C8C;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	line-height: 18px;
	font-size: 15px;
	padding: 0px;
	margin: 0px;
}

td.infoPanelClickableImageCell {
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}

td.infoPanelClickableDescriptionCell {
	padding: 10px;
	/*	text-align: justify;*/
}

table.galleryItem {
	display: inline-block;
	cursor: pointer;
	border: solid 1px #8C8C8C;
	margin: 15px;
	border-collapse: collapse;
}

td.galleryItemImageCell {
	width: 262px;
	height: 262px;
}

td.galleryItemImageCell img {
	max-width: 250px;
	max-height: 250px;
}

td.galleryItemNameCell {
	height: 24px;
	font-size: 14px;
	text-align: center;
	background: #8C8C8C;
	color: #FFFFFF;
}

table.galleryItemLarge {
	width: 1000px;
}

td.galleryItemLargeHeader {
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	height: 30px;
}

td.galleryItemLargeImageCell {
	width: 620px;
	height: 700px;
}

/*
 The actual file is looked at by server code and scaled to proportion now:
 td.galleryItemLargeImageCell img {
 max-width: 600px;
 max-height: 600px;
 }
 */

table.galleryItemLargeOptionsTable {
	margin: 0px auto;
}

table.galleryItemLargeOptionsTable th {
	padding: 4px;
	font-size: 12px;
	background: #8C8C8C;
	color: #FFFFFF;
}

table.galleryItemLargeOptionsTable td {
	padding: 4px;
	font-size: 12px;
	vertical-align: top;
}

.galleryItemLargePhotographerCredit {
	font-size: 12px;
}

.galleryItemLargeDescription {
	font-size: 12px;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For order wizard */
/* ****************************************************************************** */
td.orderLineItemWizardContainerTableCell {
	/* SUITABLE WIDTH FOR WEBSITE - MAY DIFFER ON PLAN B */
	border-right: solid 2px #E77D23;
	padding-top: 40px;
	background: #EEEEEE;
}

td.orderLineItemLineItemOverviewContainerTableCell {
	/* SUITABLE WIDTH FOR WEBSITE - MAY DIFFER ON PLAN B */
	padding-left: 10px;
	padding-top: 40px;
	background: #DDDDDD;
}

DIV.wizardPageDIV_lineItemWizard {
	/* SUITABLE WIDTH FOR WEBSITE - MAY DIFFER ON PLAN B */
	width: 800px;
	padding: 5px;
	text-align: left;
}

div.overlayToContainWizardPage {
	width: 820px;
	height: 600px;
}

div.overlayToContainWizardPageInnerDIV {
	/* The same as above, minus some height for the 'close' button */
	width: 820px;
	height: 570px;
	overflow: auto;
}

#divLineItemOverview {
	/*	border: solid 1px black;*/
	width: 600px;
}

/* These are for the LHS of the order wizard, i.e. the actual wizard pages themselves rather than the line item overview to the right: */

/* For special cases where option value thumbnail images need to be even smaller, e.g. for album spreads detail: */
img.optionThumbnailSmall {
	max-width: 70px;
	max-height: 70px;
}

span.wizardPageTitle {
	font-size: 14px;
	font-weight: bold;
}

span.wizardPageSubTitle {
	font-size: 12px;
	font-weight: normal;
}

div.filterButtonContainer {
	height: 26px;
	border: solid 1px #888888;
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	cursor: pointer;
}

div.filterButtonContainer img {
	width: 18px;
}
/*
 div.filterButton_unselected {
 text-align: center;
 width: 200px;
 height: 26px;
 overflow: hidden;
 display: inline-block;
 background: #444444;
 color: #8C8C8C;
 font-family: 'Open Sans', sans-serif;
 font-size: 18px;
 border: solid 2px #888888;
 cursor: pointer;
 }

 div.filterButton_selected {
 text-align: center;
 width: 200px;
 height: 26px;
 overflow: hidden;
 display: inline-block;
 background: #44FF44;
 color: #FFFFFF;
 font-family: 'Open Sans', sans-serif;
 font-size: 18px;
 border: solid 2px #44FF44;
 cursor: pointer;
 }
 */
table.selectableValueBlock {
	width: 188px;
	margin: 5px;
	display: inline-block;
	vertical-align: top;
	background: white;
	border: solid 1px #8C8C8C;
}

table.selectableValueBlock_unavailable {
	width: 188px;
	margin: 5px;
	display: inline-block;
	vertical-align: top;
	background: white;
	border: solid 1px #8C8C8C;
	opacity: 0.4;
	filter: alpha(opacity=40); /* For IE8 and earlier */
}

td.selectableValueActionIcon {
	width: 18px;
	height: 20px;
	background: #8C8C8C;
	padding: 0px;
	padding-left: 3px;
}

td.selectableValueActionIcon img {
	/* The images are usually at 16px or 32 px, however we want them 12 px for this context as this seems to look best */
	width: 12px;
}

td.selectableValueTitle {
	text-align: center;
	width: 100%;
	height: 20px;
	/*overflow: hidden;*/
	vertical-align: top;
	background: #8C8C8C;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	line-height: 18px;
	font-size: 12px;
	padding: 0px;
	/*	border: solid 2px #8C8C8C;*/
}

td.selectableValueFooter {
	cursor: pointer;
	text-align: center;
	width: 100%;
	height: 20px;
	overflow: hidden;
	vertical-align: top;
	color: #8C8C8C;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	padding: 0px;
}

img.selectableOptionThumbnailImage {
	vertical-align: middle;
	max-width: 100px;
	max-height: 100px;
}
/*
 .selectableOptionThumbnailImageAlternativeText {
 font-family: 'Open Sans', sans-serif;
 font-size: 20px;
 color: #8C8C8C;
 }

 div.selectableOptionInfo {
 vertical-align: top;
 margin-bottom: 20px;
 }
 */

/* These are for the RHS of the order wizard, showing values that HAVE BEEN selected,
 * i.e. these are for things outside of a wizard page: */
table.selectedValueBlock {
	width: 188px;
	margin: 5px;
	display: inline-block;
	vertical-align: top;
	background: white;
	border: solid 1px #8C8C8C;
	cursor: pointer;
}

table.selectedValueBlock_uneditable {
	/*Same as editable for now*/
	width: 188px;
	margin: 5px;
	display: inline-block;
	vertical-align: top;
	background: white;
	border: solid 1px #8C8C8C;
	cursor: default;
}

td.selectedValueTitle {
	text-align: center;
	width: 188px;
	height: 20px;
	vertical-align: top;
	background: #8C8C8C;
	color: #FFFFFF;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	padding: 0px;
	/*	border: solid 2px #8C8C8C;*/
}

td.selectedValueFooter {
	cursor: pointer;
	text-align: center;
	width: 188px;
	overflow: hidden;
	vertical-align: top;
	color: #8C8C8C;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	padding: 0px;
}

img.selectedOptionThumbnailImage {
	vertical-align: middle;
	max-width: 80px;
	max-height: 80px;
}

/* ****************************************************************************** */

/* ****************************************************************************** */
/* FOR PRODUCT TREE (class_producttree.php) */
/* Note that as a rule, no DIMENSION info is declared here, as the code that generates
 * visuals for the product tree items changes their size and needs to calculate dimensions */
/* ****************************************************************************** */
a.productTreeBreadcrumb {
	font-size: 12px;
	text-decoration: none;
	color: #E77D23;
}

span.productTreeBreadcrumb {
	font-size: 12px;
	color: #8C8C8C;
}

div.productTreeGroupContainer {
	/* Any DIMENSION info will be calculated and set in main pages */
	margin: 0px auto;
	text-align: left;
	/*	border: dotted 1px #CCCCCC;*/
}

div.productTreeItemOuterContainer {
	/* Any DIMENSION info will be calculated and set in main pages */
	display: inline-block;
	border: solid 1px #8C8C8C;
	cursor: pointer;
}

div.productTreeItemImageContainer {
	/* Any DIMENSION info will be calculated and set in main pages */
	text-align: center;
}

img.productTreeItemImage {
	/* Any DIMENSION info will be calculated and set in main pages */
	/* There will be a vertical align helper to left of the image */
	display: inline-block;
	vertical-align: middle;
	margin: 0px auto;
}

div.productTreeItemNameContainer {
	/* Any DIMENSION info will be calculated and set in main pages */
	/* There will be a vertical align helper to left of text */
	background: #8C8C8C;
	color: #FFFFFF;
	text-align: center;
}

/* ****************************************************************************** */

/* ****************************************************************************** */
/* MISC ICONS ETC */
/* ****************************************************************************** */
.warningTriangleNormal {
	width: 32px;
}

/* ****************************************************************************** */

/* ****************************************************************************** */
/* MISC HELPERS ETC FOR GENERAL USE */
/* ****************************************************************************** */

/* For tables used purely to position elements:*/
.layoutTable {
	border-collapse: collapse;
}

.layoutTable  TD {
	padding: 0px
}

/* To help vertically centre things within a div */
.verticalAlignHelper {
	/* An empty span is placed to left of thumbnail image / text etc, inline-block and 100% height, so
	 * that the image (also inline-block, as default) can be vertically centred.
	 */
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For price guide / other printable stuff */
/* ****************************************************************************** */
@media screen {
	.displayOnlyWhenPrinting {
		display: none;
	}
	.displayOnlyWhenNotPrinting {
		display: inherit;
	}
}

@media print {
	@page {
		size: landscape
	}
	.displayOnlyWhenPrinting {
		display: inherit;
	}
	.displayOnlyWhenNotPrinting {
		display: none;
	}

	#pageHeaderDiv_fullWidth {
		display: none;
	}

	#pageFooterDiv_fullWidth {
		display: none;
	}

	.priceGuideUnit {
		page-break-inside: avoid;
	}
}

.priceGuideTable td {
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: top;
	font-size: 12px;
}

span.priceGuideSubHeader {
	font-size: 10px;
	position: relative;
	top: -6px;
}

.priceGuideTable tr:nth-child(even) {
	background: #EEEEEE;
}

.priceGuideTable tr:nth-child(odd) {
	background: #FFFFFF;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For overlays (popovers) */
/* ****************************************************************************** */
div.overlay {
	display: none;
	border: solid 2px #8C8C8C;
	/*	border-radius: 10px;*/
	background: #FFFFFF;
	padding: 10px;
}

.popupMessage {
	font-size: 14px;
	color: #8C8C8C;
}

/* Iframes for overlays will appear inside the above div */
iframe.overlay {
	border: none;
}

span.popoverTitle {
	font-size: 14px;
	font-weight: bold;
}

.popoverControlLabel {
	font-size: 12px;
}

span.closePopover {
	font-size: 12px;
	cursor: pointer;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For 'fancy' input controls / UI:
 /* ****************************************************************************** */
DIV.roundedControl {
	display: inline-block;
	border-radius: 0.4em;
	border: solid 1px #8C8C8C;
	background: #FFFFFF;
	padding: 5px;
}

.roundedControl INPUT[type=text], .roundedControl INPUT[type=password] {
	border: none;
	background: #FFFFFF;
	font-family: 'Open Sans';
	font-size: 12px;
}

.roundedControl TEXTAREA {
	border: none;
	background: #FFFFFF;
	font-family: 'Open Sans';
	font-size: 12px;
}

.roundedControl SELECT {
	border: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	/*	appearance: none;*/
	background: url('../images/generic_page_ui/dropdown_arrow.png') no-repeat;
	background-position: right center;
	font-family: 'Open Sans';
	font-size: 12px;
	height: 20px;
}

.roundedControl INPUT[type=text].innerLabel, .roundedControl INPUT[type=password].innerLabel {
	color: #8C8C8C;
	font-weight: 300;
}

.roundedControl INPUT[type=text]:focus, .roundedControl INPUT[type=password]:focus {
	outline: 0;
}

.roundedControl SELECT:focus {
	outline: 0;
}

.otherControlText {
	font-family: 'Open Sans';
	font-size: 12px;
}
/* ****************************************************************************** */

/* ****************************************************************************** */
/* For misc uses:
 /* ****************************************************************************** */
.verticalText {
	background: #FF0000;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	/* Should be unset in IE9+ I think. */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.alternateBackgroundTable tr:nth-child(even) {
	background: #EEEEEE;
}

.alternateBackgroundTable tr:nth-child(odd) {
	background: #FFFFFF;
}

/* ****************************************************************************** */