/* MAIN */

body{ 
	font: 60% "Trebuchet MS", sans-serif;
	margin: 16px auto;
	width: 960px;
/*
	height: 100%;
	overflow: hidden;
*/
}

table {
	width: 100%;
	border: none;
}

strong { font-weight: bold; }
em { font-style: italic; }

a {
	text-decoration: none;
}
a:hover {
}

h1 {
	font-size: 2em;
	font-weight: bold;
	color: #ccc;
}
h1:hover {
	color: white;
}
h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #ccc;
}

h3 {
	background: #000;
	padding: 8px 0.5em;
}

input {
	text-align: right;
	padding: 4px 0.25em;
	border: 2px solid black;
	color: #222;
	border-radius: 5px;
	font-weight: bold;
}

#recipe #rowName #JuiceNameTD,
input.userInput,
#QTotalTD #QTotal {
	color: #ddd;
	background: #222;
	font-size: 1.25em;
	text-align: right;
	font-weight: bold;
	padding: 4px 0.25em;
	border: 2px solid black;
	border-radius: 5px;
}
#QTotalTD #QTotal {
	color: #222;
	background: #ddd;
	margin-left: 4px;
}
#recipe #rowName #JuiceNameTD:hover,
input.userInput:hover,
#QTotalTD #QTotal:hover {
	color: white;
	background: #111;
	border-color: #0f0;
}
#QTotalTD #QTotal:hover {
	color: #111;
	background: white;
}

/* TOPBAR */

#topbar {
	overflow: auto;
	background: rgba(255,255,255,0.1);
	margin-bottom: 1em;
	border-radius: 7px;
}
#topbar #logo {
	width: 256px;
	hheight: 32px;
	float: left;
}

#topbarOptions {
}

.topbar {
	float: right;
	margin-left: 8px;
	height: 32px;
	border-radius: 7px;
	font-size: 1.3em;
	padding: 2px 4px;
}
.topbar label.topbarName {
	display: block;
	float: left;
	height: 12px;	/* 32px */
	padding: 8px 8px;
	border: 2px solid rgba(0,0,0,0.2);
	border-right: none;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	background: #ccc; color: #444;
}
.topbar label.topbarName:hover {
	background: #fff; color: #222;
}

.topbar .checkBox {
	float: right;
	width: 32px;
	height: 28px;
	border: 2px solid rgba(0,0,0,0.2);
	border-top: 2px solid rgba(255,255,255,0.2);
	border-left: none;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.topbar .checkBox {			background: #a00; background: url("../images/icon/delete.png") 4px 4px no-repeat #400; }
.topbar .checkBox:hover { 		background: #d00; background: url("../images/icon/delete.png") 4px 4px no-repeat #800; }
.topbar .checkBox.checked { 		background: #0a0; background: url("../images/icon/add.png") 4px 4px no-repeat #040;}
.topbar .checkBox.checked:hover { 	background: #0d0; background: url("../images/icon/add.png") 4px 4px no-repeat #080;}

.topbar input.userInput {
	border-radius: 0;
	height: 18px;
	padding: 4px 8px;
	margin: 0;
	bborder-color: #222;
}

#dropsic, #nicotic {
	float: left;
	background: #444;
	height: 28px;
	border-bottom: solid 2px #222;
	border-top: solid 2px #666;
}
.topbar label.dropsic, .topbar label.nicotic {
	padding-right: 8px;
}

/* INFOLINKS */

a.infolink {
	color: orange;
	font-weight: bold;
	display: none;		/* REMOVE : INFOLINKS */
}

/* ??? */

#dialog_linkBase,
#dialog_linkAdd,
#dialog_linkQuantity,
#dialog_linkBeacker,
#dialog_linkRecipe
{
	padding: .4em 5px;
	text-decoration: none;
	position: relative;
}

select.presets {
	width: 32px;
}
select.presets option {
	background: red;
}

/* COLLUMNS */

#layoutTable {
}

#col_left, #col_right {
	background: #ddd;
	border-radius: 5px;
	font-size: 1.25em;
}
#col_left {
	background: transparent;
}

/* BOX */

div.box {
	margin-bottom: 1em;
}
div.boxhead {
	background: #400;
	color: #fff;
	padding: 8px 0.5em;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-weight: bold;
}
div.boxhead a.infolink {
	float: right;
}
div.boxbody {
	background: #ddd;
	color: #222;
	padding: 8px 0.5em;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

/* COL LEFT */

#col_left {
}

#col_left table {
	border-collapse: separate;
	border-spacing: 4px;	
}

#col_left .inputTitle {
	background-color: #bbb;
	border-radius: 5px;
	width: 100%;
}
#col_left .inputTitle:hover {	background-color: #aaa; color: #000; }
#col_left .inputTitle label {
	display: block;
	background: transparent;
	color: #444;
	padding: 0.25em 8px;
	margin: 0.25em 0;
	font-weight: bold;
}

	/* Bases */

#col_left #inputBases .inputTitle td {
	border-radius: 5px;
}
	/* Additives */

#col_left #inputAdditives .valueTD {
	background: #222;
	color: #eee;
	border-radius: 5px;
	vertical-align: middle;
}
#col_left #inputAdditives .valueTD input {
	background: transparent;
	height: 100%;
	width: 48px;
}

#col_left #inputAdditives .percentTD {
	vertical-align: middle;
}

	/* Aromas */

#col_left #inputAromas .deleteTD,
#col_left #inputAromas .addTD {
	width: 16px;
	padding: 0em 8px;
	text-indent: -5000px;
}
#col_left #inputAromas .deleteTD {	background: url("../images/icon/delete.png") 4px 4px no-repeat; }
#col_left #inputAromas .addTD {		background: url("../images/icon/add.png") 4px 4px no-repeat; }


#col_left #inputAromas .inputTitle {
	padding: 0.5em 0px;
}
#col_left #inputAromas .inputTitle select {
	width: 92%;
	margin: 0 4%;
}
#col_left #inputAromas .inputTitle input {
	width: 90%;
	margin: 0 4%;
	margin-top: 0.5em;
	padding-left: 0;
	padding-right: 2%;
	border: none;

	background: #888;
	color: #222;
}

#col_left #inputAromas .deleteTD,
#col_left #inputAromas .addTD {
	background-color: #222;
	border-radius: 5px;
	min-width: 16px;
}
#col_left #inputAromas .deleteTD:hover,
#col_left #inputAromas .addTD:hover {
	background-color: #444;
}

#col_left #inputAromas .valueTD {
	background: #222;
	color: #eee;
	border-radius: 5px;
	vertical-align: middle;
}
#col_left #inputAromas .valueTD strong {
	margin-right: 8px;
}
#col_left #inputAromas .valueTD input {
	background: transparent;
	height: 100%;
	width: 48px;
}

#col_left #inputAromas .percentTD {
	vertical-align: middle;
}
#col_left #inputAromas #rowInputFinal td {
	vertical-align: middle;
}

#col_left #inputAromas #rowInputFinal span {
	color: #400;
}

#col_left .inputTitle .inputCustomAroma {
}

/* MID+RIGHT */

#col_right {
}

.recipePannel {
	background: transparent;
	color: #444;
}

#recipePannelBeacker {
	float: left;
	width: 18%;
	padding: 4px 1%;
}
#beacker {
	border-radius: 5px;
}

#recipePannelRecipe {
	margin-left: 20%;
}


/* RECIPE */

#recipe,
#recipeContent {
	border-collapse: separate;
	border-spacing: 4px;	
}

#recipe tr {
}

#recipe label,
#recipe input {
}

#recipe label {
}
#recipe label span {
}
#recipe input {
	border: none;
	background: transparent;
}

#recipe #rowName #JuiceName {
	text-align: left;
	font-style: italic;
	width: 100%;
	width: 97.5%;		/* Ugly !!! */
}
#recipe #rowName td {
}

#QTotalTD {
	vertical-align: middle;
	background: #222;
	border-radius: 5px;
	color: white;
	padding: 0;
}
#QTotalTD input {
	background: #000;
}

#recipe .ingredientRecipe,
#recipe .valueRecipe {
	background: #ccc;
	border: 2px solid rgba(0,0,0,0.2);
	border-radius: 5px;
	min-height: 1.5em;
}
#recipe .ingredientRecipe {
	padding: 0.5em 8px;
	font-style: italic;
	color: #400;
}
#recipe .ingredientRecipe strong {
	font-style: normal;
	color: black;
}
#recipe .ingredientRecipe div {		/* icons */
	width: 32px;
	height: 32px;
	background: #444;
	border-radius: 4px;
	float: left;
}

#JuiceMenuTD {
	background: #400;
	color: white;
	border-radius: 5px;
	text-align: center;
}

	/* ingredients colors */

#recipe #rowNicotin td.percentbar div,
#recipe #rowNicotin .ingredientRecipe div {	background: #844; }
#recipe #rowPG td.percentbar div,
#recipe #rowPG .ingredientRecipe div {		background: #484; }
#recipe #rowVG td.percentbar div,
#recipe #rowVG .ingredientRecipe div {		background: #448; }
#recipe #rowWater td.percentbar div,
#recipe #rowWater .ingredientRecipe div {	background: #848; }
#recipe #rowAlcohol td.percentbar div,
#recipe #rowAlcohol .ingredientRecipe div {	background: #884; }


#recipe .ingredientRecipe label {
	display: block;
	margin-left: 40px;
}
#recipe .ingredientRecipe span.aromaName {
	padding: 0em 8px;
	border-radius: 5px;
}
#recipe #nIngredientsRecipe { font-weight: normal; }

/* Value */

#recipe .valueRecipe {
	vertical-align: middle;
	text-align: right;
	padding: 0 8px;
}
#recipe .valueRecipe input {
	color: #400;
	font-size: 1.25em;
}

/* Percent */

#recipe .percentRecipe {
	max-width: 48px;
}
td.percentbar {
	width: 48px;
	min-height: 2.5em;
	border-radius: 5px;
	padding: 0.25em 4px;
}
td.percentbar span{
}
td.percentbar div {
	height: 1.5em;
	background: #fff;
	border: 2px solid rgba(0,0,0,0.2);
	border-radius: 5px;
}

/* Total */

#rowTotal {
}
#rowTotal td {
}

#rowTotal td.buttonTD {
	vertical-align: middle;
	text-align: center;
	background: #400;
	border-radius: 5px;
}
#rowTotal td.buttonTD:hover {
	background: #800;
}
#rowTotal td.buttonTD #buttonCalculate {
	background: transparent;
	font-weight: bold;
	height: 100%;
}

#rowTotal .ingredientRecipe {
/*	padding-left: 48px;*/
	background: #222;
	color: #ccc;
}
#rowTotal .ingredientRecipe strong {
	color: #ddd;
}
#rowTotal .valueRecipe {
	background: #222;
	color: #ccc;
}
#rowTotal .valueRecipe span {
	font-size: 1.25em;
}
#rowTotal .percentbar {
	background: #222;
	color: #ccc;
}

/* Error */

#recipe .error .iconRecipe,
#recipe .error .ingredientRecipe,
#recipe .error .valueRecipe,
#recipe .error .unitRecipe {
	border: 2px solid red;
	color: red;
}
#recipe .error .percentbar {	background: red; color: white; font-weight: bold; }
#recipe .error .ingredientRecipe label strong,
#recipe .error .valueRecipe input,
#recipe .error .percentRecipe {
	color: red;
}
#recipe .error .unitRecipe {
	background: red;
	color: white;
}
#recipe #rowPG.error td.percentbar div,
#recipe #rowVG.error td.percentbar div {
	background: white;	/* TODO : something nicer... */
}

#recipe .error input,
#recipe .error .percentbar {
}

/* TABS */

#tabs-2 a 	{ color: #600; }
#tabs-2 a:hover { color: #400; border-bottom: dotted 2px;}

/* FOOTER */

#footer {
	text-align: center;
	font-weight: bold;
	color: #400;
}