/* Fatty Matty Brewing Recipe Saver (Theme) */





body { 

margin:0; 

padding:0; 

line-height: 1.4; 

font-family: Verdana, Arial, Helvetica, sans-serif; 

color: #000000; font-size: 11px; 

background-image: url(../images/Recipe_Saver/beer_bubbles_400x158.gif); background-repeat: repeat; 

}



p, blockquote, li	{ 

font-family: Verdana, Arial, Helvetica, sans-serif; 

color: #000000; 

font-size: 11px;

}



tr, td	{ 

font-family: Verdana, Arial, Helvetica, sans-serif; 

color: #000000;

vertical-align: top;

border-collapse: collapse;

font-size: 11px;

}





/* ------------------  form styles ------------------  */

input, select, textarea		{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }

.submit 			        { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }

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



/* ------------------ global link styles ------------------  */

a:link 				{ color: #28639f; text-decoration: none; }

a:visited 			{ color: #28639f; text-decoration: none; }

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

a:active 			{ color: #ff7200; text-decoration: none; }



/* ------------------  layout divs ------------------  */



#maincontainer {

width: 760px;

margin-right: auto;

margin-left: auto;

margin-top: 5px;

margin-bottom: 5px;

padding: 0px;

text-align: left;

border: 1px solid #000000;

}



/* Not used -- keep just in case, you know?

#leftgutter {

position: absolute;

float: left;

width: 20px;

padding: 0px;

}



#rightgutter {

position: relative;

float: right;

width: 20px;

padding: 0px;

}

*/



/* ------------------  header elements ------------------  */

#header {

background-image:  url("../images/Blue/header_bknd.jpg"); 

background-repeat: no-repeat;

height: 100px;

background-position: bottom left;

}

/* ------------------  Fatty Matty Brewing logo ------------------  */

.fmb_logo {

padding-left: 10px;

padding-top: 15px;

padding-bottom: 5px;

}


.titleText {

font-size: 20px; 

color: #000000; 

font-weight: bold;

padding-left: 10px;

padding-top: 30px;

padding-bottom: 0px;

}



.quoteText {

padding-left: 10px;

font-size: 10px;

font-style: italic;

color: #000000; 

}



#subtitle {

height: 50px;

width: 500px;

padding: 5px 0px 0px 3px;

margin-top: 0px;

margin-bottom: 0px;

font-size: 18px;

font-weight: bold;

border-right: 1px dashed #96bde4;

}



#subtitleWide {

height: 50px;

width: 100%;

padding: 5px 0px 0px 3px;

margin-top: 0px;

margin-bottom: 0px;

font-size: 18px;

font-weight: bold;

}



#breadcrumb {

height: 25px;

width: 500px;

padding: 0px 0px 0px 3px;

border-right: 1px dashed #96bde4;

font-size: 9px;

}



#breadcrumbWide {

height: 25px;

width: 100%;

padding: 0px 0px 0px 3px;

font-size: 9px;

}



#paginate {

text-align: right;

padding: 8px 0px 0px 3px;

font-size: 9px;

}



/* ------------------ main navigation ------------------ */

#nav { background: #28639f; margin-top: 0; padding: 7px 10px 0; font-size: 9px; height: 23px; }



#LeftAlign {

   float: left;

}



#RightAlign {

   float: right;

} 



#nav a:link 		{ color: #FFFFFF; text-decoration: none; }

#nav a:visited 		{ color: #FFFFFF; text-decoration: none; }

#nav a:hover 		{ color: #d3e3f3; text-decoration: none; }

#nav a:active 		{ color: #d3e3f3; text-decoration: none; }





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

#dropmenudiv			{ position: absolute; border: 1px solid #aaaaaa; border-bottom-width: 0;  line-height:15px; z-index:100;  background-color: #bbbbbb; }

#dropmenudiv a 			{ color: #bbbbbb; width: 100%; display: block; text-indent: 2px; border-bottom: 1px solid #aaaaaa; padding: 1px 0; text-decoration: none; }

#dropmenudiv a:hover	{ background-color: #aaaaaa; text-decoration: none; color: #28639f; }







/* ------------------ content elements ------------------ */

#contentwrapper {

float: left;

width: 750px;

padding: 8px 5px 5px 5px;

background-color: #FFFFFF;

margin-top: 0px;

}



#contentwrapperAdmin {

float: left;

width: 750px;

padding: 8px 5px 5px 5px;

background-position: top left;

background-color: #FFFFFF;

margin-top: 0px;

}



#contentcolumn { 		/* main content - holds procedure, recipe, mash, etc. */

margin-right: 250px; 

margin-top:  0px;

width: 503px;

border-right: 1px dashed #96bde4;

}



#contentWide { 			/* if no sidebar content */

margin-right: 250px; 

margin-top:  0px;

width: 743px;

padding: 0px 0px 2px 3px;

}



#rightcolumn {  		/* sidebar content - holds links, brewlog lists, recipe lists, upcoming brewing sessions, etc. */

float: left;

width: 245px;

margin-left: -245px; 

margin-top:  0px;

padding: 8px 0;

vertical-align: top;

}





#dataContainer {		 /* container for main content - holds procedure, recipe, mash, etc. */

width: 100%;

margin-left: 0px;

padding: 0px 0px 0px 0px;

margin-bottom: 30px;

}



.dataHeading {			 /* header element for data includes - procedure, recipe, mash, etc. */

font-weight: bold;

padding: 6px 4px 6px 4px;

}



.dataLabel {			 /* data label style for two column layout */

font-weight: bold;

width: 90px;

padding-top: 2px;

}



.dataLabelWide {		 /* data label if only one column layout */

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-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

margin-left: 0px;

}



#dataWrapperInner {		 	/* for Typical CO2 Saturation and any other table within the main data table. */

width: inherit;

background-color: #efefef;

border: 1px solid #96bde4;

padding: 2px 2px 2px 2px;

font-size: 10px;

}





.dataTableAltColors {		/* use for alternate color list tables */

width: 100%;

border-collapse: collapse;

border-style: none;

border-width: 0px;

}



.dataList {					/* Use for Alternate Color Lists */

padding: 6px 4px 6px 4px;

}





.colorTable {				/* Use for display of SRM color  */

width: 35px;

border-collapse: collapse;

border-style: none;

border-width: 0px;

margin-top: 0px;

padding: 0px 0px 0px 0px;

text-align: center;

}



#colorDisplay {

float: right;

position: absolute;

margin-left: 70px;

margin-top: 0px;

width:20px;

}





.data {						/* Use for display of most data with a preceding label (in conjunction with dataLabel element */

padding: 2px 0px 2px 10px;

}



.dataMeas {					/* Use for Measurement data preferences */

width: 90px;

padding-top: 2px;

}



.left {

text-align: left;

}



.right {

text-align: right;

}



.center {

text-align: center;

}



#help {						/* Use for Help/Info Popups */

float: left;

position: absolute;

margin-left: -18px;

width: 16px;

text-align: center;

font-size: 9px;

}





#helpInline {				/* Use for Inline Help/Info Popups */

width: 16px;

text-align: center;

margin-right: 6px;

}



/* ------------------ footer elements ------------------ */

#footer {

clear: left;

width: 100%;

background: #28639f;

padding: 5px 0px 5px 0px;

text-align: center;

font-size: 10px;

color: #FFFFFF;

}



#footer a { 

color: #FFFFFF; 

}



#footerInclude {

font-size: 9px;

margin-top: 5px;

}





/* ------------------ content display ------------------ */



#headerContent {

clear: left;

width: 489px;

height: 20px;

background: #efefef;

padding: 5px 5px 5px 3px;

text-align: left;

border-bottom: 1px dashed #96bde4;

font-size: 14px;

color: #000000;

font-weight: bold;

margin-bottom: 5px;

}



#headerContentAdmin {

clear: left;

width: 740px;

height: 20px;

background: #efefef;

padding: 5px 5px 5px 3px;

text-align: left;

border-bottom: 1px dashed #96bde4;

font-size: 14px;

color: #000000;

font-weight: bold;

margin-bottom: 15px;

margin-top: 15px;

}



/* ------------------ tools and reference elements  ------------------ */



#wideWrapper {  			/* Use for tools and reference pages */

width: 735px;

text-align: left;

background: #d3e3f3;

border: 1px solid #96bde4;

padding: 2px 2px 2px 2px;

margin-top: 3px;

}



#referenceWrapper{

text-align: left;

margin-left: 5px;

margin-top: 5px;

}



#wideWrapperReference {  			/* Use for tools and reference pages */

width:493px;

text-align: left;

background: #eeeeee;

border: 1px solid #96bde4;

padding: 2px 2px 2px 2px;

margin-top: 3px;

}



.carbonationTable { /* specialized style for carbonation tables */

text-align: center;

font-size: 9px;

background: #FFFFFF;

width: 100%;

border-collapse: collapse;

}



/* ------------------ sidebar elements  ------------------ */



#sidebarWrapper {

width: 235px;

background: #d3e3f3;

border: 1px solid #96bde4;

padding: 2px 2px 2px 2px;

margin-top: 5px;

}



#sidebarHeader {

background: #96bde4;

padding: 2px 2px 2px 4px;

font-size: 11px;

font-weight: bold;

color: #000000;

margin-bottom: 3px;

}



#sidebarHeaderSmall {			/* use for inner table div within dataTables */

background: #aac9f9;

height: 15px;

padding: 3px 3px 3px 3px;

font-size: 11px;

font-weight: bold;

color: #000000;

}



#sidebarInnerWrapper {

width: 100%;

font-size: 10px;

}



#labelImageLarge {

margin-top: 15px;

margin-bottom: 10px;

}



.labelImage {

width: 233px; 

border: 1px solid #000000;

}



.listLeftAlign {

width: 95%;

text-align: left;

}



.listRightAlign {

width: 5%;

text-align: right;

}





/* ------------------ overall theme colors ------------------ */

.ultra_lt	 		{ color: #d3e3f3; }

.lt	 				{ color: #aac9f9; }

.mid		 		{ color: #96bde4; }

.dk			 		{ color: #28639f; }



.bknd_white			{ background-color: #FFFFFF; }

.bknd_ultra_lt		{ background-color: #d3e3f3; }

.bknd_lt			{ background-color: #aac9f9; }

.bknd_mid			{ background-color: #96bde4; }

.bknd_dk			{ background-color: #28639f; }



/* ultra light border styles */

.bdr1_ultra_lt			{ border: 1px solid #d3e3f3; }

.bdr1_ultra_lt_dashed 	{ border: 1px dashed #d3e3f3; }

.bdr1_ultra_lt_dotted	{ border: 1px dotted #d3e3f3; }

.bdr2_ultra_lt			{ border: 2px solid #d3e3f3; }

.bdr2_ultra_lt_dashed 	{ border: 2px dashed #d3e3f3; }

.bdr2_ultra_lt_dotted 	{ border: 2px dotted #d3e3f3; }

.bdr1L_ultra_lt			{ border-left: 1px solid #d3e3f3; }

.bdr1L_ultra_lt_dashed	{ border-left: 1px dashed #d3e3f3; }

.bdr1L_ultra_lt_dotted	{ border-left: 1px dotted #d3e3f3; }

.bdr1R_ultra_lt			{ border-right: 1px solid #d3e3f3; }

.bdr1R_ultra_lt_dashed	{ border-right: 1px dashed #d3e3f3; }

.bdr1R_ultra_lt_dotted	{ border-right: 1px dotted #d3e3f3; }

.bdr1T_ultra_lt			{ border-top: 1px solid #d3e3f3; }

.bdr1T_ultra_lt_dashed	{ border-top: 1px dashed #d3e3f3; }

.bdr1T_ultra_lt_dotted	{ border-top: 1px dotted #d3e3f3; }

.bdr1B_ultra_lt			{ border-bottom: 1px solid #d3e3f3; }

.bdr1B_ultra_lt_dashed	{ border-bottom: 1px dashed #d3e3f3; }

.bdr1B_ultra_lt_dotted	{ border-bottom: 1px dotted #d3e3f3; }



/* light border styles */

.bdr1_light				{ border: 1px solid #aac9f9; }

.bdr1_light_dashed 		{ border: 1px dashed #aac9f9; }

.bdr1_light_dotted		{ border: 1px dotted #aac9f9; }

.bdr2_light				{ border: 2px solid #aac9f9; }

.bdr2_light_dashed 		{ border: 2px dashed #aac9f9; }

.bdr2_light_dotted 		{ border: 2px dotted #aac9f9; }

.bdr1L_light			{ border-left: 1px solid #aac9f9; }

.bdr1L_light_dashed		{ border-left: 1px dashed #aac9f9; }

.bdr1L_light_dotted		{ border-left: 1px dotted #aac9f9; }

.bdr1R_light			{ border-right: 1px solid #aac9f9; }

.bdr1R_light_dashed		{ border-right: 1px dashed #aac9f9; }

.bdr1R_light_dotted		{ border-right: 1px dotted #aac9f9; }

.bdr1T_light			{ border-top: 1px solid #aac9f9; }

.bdr1T_light_dashed		{ border-top: 1px dashed #aac9f9; }

.bdr1T_light_dotted		{ border-top: 1px dotted #aac9f9; }

.bdr1B_light			{ border-bottom: 1px solid #aac9f9; }

.bdr1B_light_dashed		{ border-bottom: 1px dashed #aac9f9; }

.bdr1B_light_dotted		{ border-bottom: 1px dotted #aac9f9; }



/* midtone border styles */

.bdr1_mid				{ border: 1px solid #96bde4; }

.bdr1_mid_dashed 		{ border: 1px dashed #96bde4; }

.bdr1_mid_dotted		{ border: 1px dotted #96bde4; }

.bdr2_mid				{ border: 2px solid #96bde4; }

.bdr2_mid_dashed 		{ border: 2px dashed #96bde4; }

.bdr2_mid_dotted 		{ border: 2px dotted #96bde4; }

.bdr1L_mid				{ border-left: 1px solid #96bde4; }

.bdr1L_mid_dashed		{ border-left: 1px dashed #96bde4; }

.bdr1L_mid_dotted		{ border-left: 1px dotted #96bde4; }

.bdr1R_mid				{ border-right: 1px solid #96bde4; }

.bdr1R_mid_dashed		{ border-right: 1px dashed #96bde4; }

.bdr1R_mid_dotted		{ border-right: 1px dotted #96bde4; }

.bdr1T_mid				{ border-top: 1px solid #96bde4; }

.bdr1T_mid_dashed		{ border-top: 1px dashed #96bde4; }

.bdr1T_mid_dotted		{ border-top: 1px dotted #96bde4; }

.bdr1B_mid				{ border-bottom: 1px solid #96bde4; }

.bdr1B_mid_dashed		{ border-bottom: 1px dashed #96bde4; }

.bdr1B_mid_dotted		{ border-bottom: 1px dotted #96bde4; }



/* dark border styles */

.bdr1_dark				{ border: 1px solid #28639f; }

.bdr1_dark_dashed 		{ border: 1px dashed #28639f; }

.bdr1_dark_dotted		{ border: 1px dotted #28639f; }

.bdr2_dark				{ border: 2px solid #28639f; }

.bdr2_dark_dashed 		{ border: 2px dashed #28639f; }

.bdr2_dark_dotted 		{ border: 2px dotted #28639f; }

.bdr1L_dark				{ border-left: 1px solid #28639f; }

.bdr1L_dark_dashed		{ border-left: 1px dashed #28639f; }

.bdr1L_dark_dotted		{ border-left: 1px dotted #28639f; }

.bdr1R_dark				{ border-right: 1px solid #28639f; }

.bdr1R_dark_dashed		{ border-right: 1px dashed #28639f; }

.bdr1R_dark_dotted		{ border-right: 1px dotted #28639f; }

.bdr1T_dark				{ border-top: 1px solid #28639f; }

.bdr1T_dark_dashed		{ border-top: 1px dashed #28639f; }

.bdr1T_dark_dotted		{ border-top: 1px dotted #28639f; }

.bdr1B_dark				{ border-bottom: 1px solid #28639f; }

.bdr1B_dark_dashed		{ border-bottom: 1px dashed #28639f; }

.bdr1B_dark_dotted		{ border-bottom: 1px dotted #28639f; }



/* non-theme specific border styles */

.bdr1_black				{ border: 1px solid #000000; }

.bdr1_white				{ border: 1px solid #FFFFFF; }

.bdr1_red				{ border: 1px solid #FF0000; }





/* 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; }





/* ------------------ error or caution colors ------------------ */

.red		 		{ color: #FF0000 }

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



#shadowbox {

width: 250px;

position: absolute;

background: url(../images/25black.png) repeat;

float: right;

top: 235px;

right: 235px;

}



#caution {

top: -4px;

left: -4px;

background-color: #FFFAE5;

border-top: 3px solid #FFcc00;

border-left: 3px solid #FFcc00;

border-right: 3px solid #E6B800;

border-bottom: 3px solid #E6B800;

padding: 10px 10px 10px 10px;

text-align: justify;

font-size: 10px;

background-repeat: no-repeat;

position: relative;

}



#labelImageEnlarge {

text-align: center; 

padding: 5px 0px 5px 0px;

}



#labelImageEnlarge a {

border-width: 0;

}



#labelImageEnlarge a img {

height: 0px; 

width: 0px; 

border-width: 0;

}



#labelImageEnlarge a:hover img {

position: absolute; 

top: 75px; 

right: 50px;

border: 2px #000000;

height: auto;

width: auto;

z-index: 100;

}





#moreInfo a span {

display: none;

}



#moreInfo a:hover span {

display: block;

position: absolute; 

height: auto;

padding: 5px; 

z-index: 100;

color: #000000;

}



#psiWrapper {

width: 99%;

background: #ffffff;

border: 1px solid #96bde4;

padding: 2px 2px 2px 2px;

margin-top: 3px;

margin-right: 5px;

}



/* ------------- New as of 2.1 ----------------- */



#calculateContainer {		 	/* (v2.1) container for calculator popups content */

width: 743px;

padding: 3px 5px 0px 5px;

margin-bottom: 10px;

margin-top: 10px;

margin-left: 5px;

margin-right: 5px;

}



.dataTableTop {					/* (v2.1) for header tables in reference areas */

width: 500px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 5px;

margin-left: 0px;

}



#referenceHeader {				/* (v2.1) Use for tools and reference pages */

background: #96bde4;			/* use the mid or dark color */

padding: 2px 2px 2px 4px;

font-size: 11px;

font-weight: bold;

color: #000000;

margin-bottom: 3px;

}



.center {

text-align: center;

}

/* Calendar classes */



.calendarTitleTable {			 

 width: 100%;

 border-collapse: collapse;

 padding: 0px;

 margin-top: 0px;

 margin-right: 0px;

 margin-bottom: 0px;

 margin-left: 0px;

 border-left: 1px solid #000000;

 border-right: 1px solid #000000;

 border-top: 1px solid #000000;

}



.calendarHeader {

 font-family: inherit;

 font-size: inherit;

 font-weight: bold;

 background-color: #96bde4;

 border-bottom: 1px solid #000000;

 border-left: 1px solid #000000;

 border-top: 1px solid #000000;

}



.calendarHeaderMonth,.calLink {

 font-family: inherit;

 font-size: 13px;

 font-weight: bold;

 color: black;

 text-decoration: none;

}



.calendarToday {

 font-family: inherit;

 font-size: inherit;

 font-weight: bold;

 background-color: #96bde4;

 border-left: 1px solid #000000;

 border-bottom: 1px solid #000000;

 padding: 4px;

}



.calendar {

 font-family: inherit;

 font-size: inherit;

 color: black;

}



.calendarCleanLink {

 font-family: inherit;

 font-size: 9px;

 color: black;

 text-decoration: none;

}



.calendarContent {

 font-family: inherit;

 font-size: 9px;

 color: black;

 text-decoration: none;

}



.InfoText {

 font-size: 9px;

}



.calendarTable {			 

 width: 100%;

 border-collapse: collapse;

 margin-top: 0px;

 margin-right: 0px;

 margin-bottom: 0px;

 margin-left: 0px;

}



.dayBG1 {

 background-color: #d3e3f3;

 padding: 4px;

 border-left: 1px solid #000000;

 border-bottom: 1px solid #000000;

}



.dayBG2 {

 background-color: #aac9f9;

 padding: 4px;

 border-left: 1px solid #000000;

 border-bottom: 1px solid #000000;

}



/* Recipe Calculator Styles */

hr { 

color: #000000;

height: 1px;

width: 100%;

}



#calculate {

width: 350px;

position: absolute;

background: url(../images/25black.png) repeat;

float: right;

top: 155px;

right: 100px;

z-index: 2;

}



#calculateInner {

top: -4px;

left: -4px;

background-color: #d3e3f3;

border-top: 3px solid #96bde4;

border-left: 3px solid #96bde4;

border-right: 3px solid #28639f;

border-bottom: 3px solid #28639f;

padding: 10px 10px 10px 10px;

text-align: left;

font-size: 10px;

background-repeat: no-repeat;

position: relative;

}



#hide {

display: none;

}



.bdr1L_black { 

border-left: 1px solid #000000; 

}