@charset "utf-8";
/* CSS Document */

@import url('html_elements.css');
@import url('layout.css');

.sidebarHeader {
	margin: 0;
}

#LeftAlign 	{ 
	float: left; 
}

#RightAlign { 
	float: right; 
} 

.left {								
	text-align: left;					
}

.right {						
	text-align: right;					
}

.center {						
	text-align: center;				
}

.submit { 
	font-family: inherit; 
	font-size: 1em; 
}

.radiobutton { 
	border: none; 
	padding-bottom:	2px;
}

.text_area	{ 
	font-family: inherit;
	font-size: 1em; 
}

/* ***************************** Universal Nav Elements ***************************** */

#nav {
	margin-top: 0px;
	font-size: 90%;
}
#nav ul 
{
	padding: 0;
	margin: 0;
}

#nav li
{
	margin: 0;
	display: inline;
	list-style-type: none;
	padding: 0 15px 0 0;
}


/* ***************************** Data Display Elements ***************************** */

.split-container {
	width: 100%;
	margin: 0 0 20px 0;
	display: block;
	
}
.split-left-two-column {
	float: left;
	width: 280px;
	padding: 10px 0 10px 0;
	
}

.split-right-two-column {
	float: right;
	width: 280px;
	padding: 10px 10px 10px 0;
}

.data-item-container {
	padding: 0 0 1.2em 0;	
}

.data-label {
	margin-right: 10px; 
	min-width: 100px;
	white-space: nowrap;
	display: block; 
	float: left; 
	text-align: left; 
	position: relative;
	font-weight: bold;
	vertical-align: middle;
}

.data-regular {	
	display: block; 
	text-align: left; 
	position: relative;
	vertical-align: middle;
}

.color-display {
	padding: 2px 10px 2px 10px;
	text-align: center;
	border: 1px solid #000;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}

.data-container {		 	/* container for main display of content - holds procedure, recipe, mash, etc. */
	width: 100%;
	margin-left: 0px;
	padding: 0px 0px 0px 0px;
	margin-bottom: 20px;
}

.data {						/* Use for display of most data with a preceding label (in conjunction with dataLabel element */
	padding: 5px 0px 5px 10px;
}

.dataHeading {			    /* use in conjunction with the .data class */
	font-weight: bold;
	padding: 10px 0px 5px 10px;
	white-space: nowrap;
}

.dataHeadingLeft {			 /* use in conjunction with the .data class  */
	font-weight: bold;
	padding: 10px 0px 5px 0px;
	white-space: nowrap;
}

.dataHeadingList {			 /* use in conjunction with the .dataList class  */
	font-weight: bold;
	padding: 5px 3px 5px 3px;
	white-space: nowrap;
}

.dataLeft {					/* use in conjunction with the .data class  */			
	padding: 5px 0px 5px 0px;
}

.dataLabel {			  	/* use in conjunction with the .data class  */
	font-weight: bold;
	white-space: nowrap;
	width: 5%;
	padding: 5px 0px 5px 10px;
}

.dataLabelLeft {			  	/* use in conjunction with the .data class  */
	font-weight: bold;
	white-space: nowrap;
	width: 5%;
	padding: 5px 3px 5px 0px;
}

.data-icon {				/* use in conjunction with the .data class  */	
	padding: 5px 0px 5px 0px;
	width: 1%;
	white-space: nowrap;
}

.dataMeas {					/* Use for Measurement data preferences */
	white-space: nowrap;
	width: 5%;
}

.dataList {					/* Use for Alternate Color Lists */
	padding: 5px 3px 5px 3px;
}

.dataListLeft {				/* Use for Alternate Color Lists */
	padding: 5px 3px 5px 0px;
}

.dataListLabel {
	padding: 5px 3px 5px 3px;
	font-weight: bold;
	width: 5%;
	white-space: nowrap;
}

.dataListLabelLeft {
	padding: 5px 3px 5px 0px;
	font-weight: bold;
	width: 5%;
	white-space: nowrap;
}

.data-icon-list {			/* Use for Alternate Color Lists */
	padding: 5px 3px 5px 3px;
	width: 1%;
	white-space: nowrap;
}

.dataLabelWide {		 /* data label if only one column layout */
	white-space: nowrap;
	font-weight: bold;
	padding-top: 2px;
}

.dataTable {			 /* for all data tables - procedure, etc. */
	width: 100%;
	border-collapse: collapse;
	border-style: none;
	border-width: 0px;
	margin: 0;
}

.dataTable th {

}

.dataTable td {

}

.dataTable-sidebar {	 /* for all data sidebar tables */
	width: 100%;
	border-collapse: collapse;
	border-style: none;
	border-width: 0px;
	margin: 0;
}

.dataTable-sidebar th {
	height: 22px;
	vertical-align: bottom;
	padding: 4px;
}

.dataTable-sidebar td {
	padding: 4px;	
}

.listLeftAlign {		/* UNIVERSAL */
	width: 95%;
	text-align: left;
	font-size: inherit;
	padding: 2px 0 2px 0;
}

.listRightAlign {		/* UNIVERSAL */
	white-space: nowrap;
	text-align: right;
	font-size: inherit;
	padding: 2px 0 2px 0;
}

/* ------------------ drop-down menu elements ------------------ */

div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
  	display: inline;
}

div.menuBar {
  	text-align: left;
}

div.menuBar a.menuButton {
	  background-color: transparent;
	  cursor: pointer;
	  left: 0px;
	  margin: 1px;
	  position: relative;
	  text-decoration: none;
	  top: 0px;
	  z-index: 100;
}

div.menuBar a.menuButton:hover {
  	background-color: transparent;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {

}

div.menu {
	  position: absolute;
	  visibility: hidden;
	  z-index: 100;
	  margin: 0;
}

div.menu a.menuItem {
	  cursor: default;
	  display: block;
	  padding: 3px;
	  text-decoration: none;
	  white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
  	cursor: pointer;
}

div.menu a.menuItem span.menuItemText {

}

div.menu a.menuItem span.menuItemArrow {
	padding: 0 0 0 10px;
}

div.menu div.menuItemSep {
  	margin: 5px;
}

/* ***************************** Misc. Elements *****************************  */


.colorTable {					/* Use for display of SRM color UNIVERSAL */
	width: 35px;
	border-collapse: collapse;
	border: 1px solid #000000;
	margin: 0;
	padding: 2px;
	text-align: center;
	font-size: inherit;
}

.colorTableRef {				/* Use for display of SRM color on Reference page UNIVERSAL  */
	width: 100%;
	height: auto;
	border-collapse: collapse;
	margin: 2px 0px 1px 0px;
	padding: 10px;
	text-align: center;
}

.colorTableRef2 {				/* UNIVERSAL */	
	height: 25px;
	padding: 10px;
	text-align: center;
}

.colorTableRef3 {				/* UNIVERSAL */	
	height: 25px;
	padding: 10px;
	text-align: center;
	color: #FFFFFF;
}


#colorDisplay {					/* UNIVERSAL */	
	float: right;
	position: absolute;
	margin-left: 75px;
	margin-top: 0px;
}

.calcButton 		{ margin: 0; border: 0; }

.calcNav {
	margin: 1em 0 1em 0;
	text-align: center;
	font-size: .85em;
}
/* ***************************** Help Elements *****************************  */


#help {						
	float: left;
	position: absolute;
	margin-left: -18px;
	width: 16px;
	text-align: center;
	font-size: 80%;
}

#helpInline {				
	width: 1%;
	white-space: nowrap;
	padding: 3px;
}

#icon {						
	float: left;
	position: absolute;
	margin-top: 5px;
	margin-left: -18px;
	width: 16px;
	text-align: center;
	font-size: 80%;
}

.labelImageLarge {
	margin-top: 15px;
	margin-bottom: 10px;
}

.labelImage {			
	width: 225px;
	border: 1px solid #000000;
}

/* ***************************** Error Elements *****************************  */

.red { 					/* UNIVERSAL */
	color: #FF0000 
}

.error { 				
	padding-bottom: 10px; 
	text-align: left; 
	font-weight: bold; 
	font-size: 1.1em; 
	color: #FF0000; 
} 

#hide {
	display: none;
}

.bdr1L_black { 
	border-left: 1px solid #000000; 
}

.bdr1B_black { 
	border-bottom: 1px solid #000000; 
}

#quickEdit  { padding: 5px; width: 229px; }
.quickEdit 	{ font-size: .9em; height: auto; margin: 2px 0px 2px 2px; }
.quickEdit2 { font-size: .9em; font-weight: bold; margin: 4px 0px 2px 2px; }

/* alternate text styles */
.text_9 			{ font-size: 9px;  }
.text_9_bold		{ font-size: 9px;  font-weight: bold; }
.text_10			{ font-size: 10px; }
.text_10_bold 		{ font-size: 10px; font-weight: bold; }
.text_11			{ font-size: 11px; }
.text_11_bold 		{ font-size: 11px; font-weight: bold; }
.text_12	 		{ font-size: 12px; }
.text_12_bold 		{ font-size: 12px; font-weight: bold; }
.text_13	 		{ font-size: 13px; }
.text_13_bold 		{ font-size: 13px; font-weight: bold; }
.text_14	 		{ font-size: 14px; }
.text_14_bold 		{ font-size: 14px; font-weight: bold; }
.text_15	 		{ font-size: 15px; }
.text_15_bold 		{ font-size: 15px; font-weight: bold; }
.text_16			{ font-size: 16px; }
.text_16_bold		{ font-size: 16px; font-weight: bold; }
.text_18 			{ font-size: 18px; }
.text_18_bold 		{ font-size: 18px; font-weight: bold; }
.text_24 			{ font-size: 24px; }
.text_24_bold 		{ font-size: 24px; font-weight: bold; }
.text_white_10 		{ font-size: 10px; color: #ffffff; }
.text_white_10_bold	{ font-size: 10px; color: #ffffff; font-weight: bold; }
.text_white_11 		{ font-size: 11px; color: #ffffff; }
.text_white_11_bold	{ font-size: 11px; color: #ffffff; font-weight: bold; }
.text_white_12 		{ font-size: 12px; color: #ffffff; }
.text_white_12_bold	{ font-size: 12px; color: #ffffff; font-weight: bold; }
.text_white_14 		{ font-size: 14px; color: #ffffff; }
.text_white_14_bold	{ font-size: 14px; color: #fefffe; font-weight: bold; }
.text_white_18 		{ font-size: 18px; color: #ffffff; }
.text_white_18_bold	{ font-size: 18px; color: #fefffe; font-weight: bold; }

/* Add Elemnet Buttons - First used in the Bitterness calculator, v 2.3.2 */

.button, 
.button:link, 
.button:visited, 
.button:hover, 
.button:active, 
.button:focus  {
	border: none;
	background-color: transparent;
	cursor: pointer;
}

.add-button, 
.add-button:link, 
.add-button:visited, 
.add-button:hover, 
.add-button:active, 
.add-button:focus  {
	border: none;
	background-color: transparent;
	padding: .5em .5em .5em 2.2em;
	background-image: url(../images/add.png);
	background-position: .5em;
	background-repeat: no-repeat;
	cursor: pointer;
}

.update-button, 
.update-button:link, 
.update-button:visited, 
.update-button:hover, 
.update-button:active, 
.update-button:focus  {
	border: none;
	background-color: transparent;
	padding: .5em .5em .5em 2.2em;
	background-image: url(../images/page_save.png);
	background-position: .5em;
	background-repeat: no-repeat;
	cursor: pointer;
}