body {
	font-family        : Arial, Helvetica, sans-serif;
	font-size          : 11px;
	color              : #555555;
	background         : #ffffff;
	margin             : 8px;
}

h3 { 
	font               : italic 100% sans-serif;
	letter-spacing	   : 1px; 
	margin-bottom      : 0; 
	color              : #7D775C;
}

a:link { 
	font-weight        : bold; 
	text-decoration    : none; 
	color              : #ee0a0a;
}

a:visited {
	font-weight        : bold; 
	text-decoration    : none; 
	color              : #cccc88;
}

div {
	position           : relative;
}

/* Even/odd coloring of rows in a table */
tr.even {
	background-color   : white;
}
tr.odd {
	background-color   : #eeeebb;
}
tr.current {
	background-color   : #bbbb77;
}

/* borders on input elements aren't counted when setting width to 100% :(
 * Try CSS3 box-sizing property to compensate
 */
input.wide {
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;
}

/* Text buttons */
a.text_button {
	cursor             : pointer;
	background         : transparent url('../images/button_right.gif') no-repeat scroll top right;
	color              : #444;
	display            : block;
	float              : left;
	font               : normal 100% sans-serif;
	height             : 24px;
	margin-right       : 6px;
	padding-right      : 18px; /* sliding doors padding */
	text-decoration    : none;
}
a.text_button span {
	background         : transparent url('../images/button_left.gif') no-repeat;
	display            : block;
	line-height        : 14px;
	padding            : 5px 0 5px 18px;
}
a.text_button:active {
	background-position: bottom right;
	color              : #000;
	outline            : none; /* hide dotted outline in Firefox */
}
a.text_button:active span {
	background-position: bottom left;
	padding            : 6px 0 4px 18px; /* push text down 1px */
}

div.buttonbar {
	height             : 24px;
	margin             : 2px 0;
}

/* Container for a single content screen */
div.screen {
	padding            : 10px 0px 0px 10px;
	background         : #fffeef;
	margin-left        : 160px;
}

/* Title header bars */
div.titlebar {
	background-color   : #ee0a0a;
	color              : #555555;
	font-size          : 150%;
	font-weight        : bold;
	padding            : 3px 10px;
	margin-bottom      : 2px;
	background-position: right;
	background-repeat  : no-repeat;
}
div.open {
	background-image   : url(../images/arrow_down.png);
	cursor             : pointer;
}
div.closed {
	background-image   : url(../images/arrow_left.png);
	cursor             : pointer;
}
div.subtitlebar {
	background-color   : #ee0a0a;
	color              : #555555;
	font-weight        : bold;
	padding            : 3px 10px;
	margin-bottom      : 2px;
}

/* Title bar on top */
#title {
	background	   : #555555;
	color              : #ee0a0a;
	text-align         : center;
	/* font		   : 200% Bookman; */
	font-size          : 200%;
	padding            : 20px 0px;
	font-weight        : bold;
	border             : 0px solid #ee0a0a;
	border-top-width   : 5px;
}

/* Login details bar on top */
#login_details {
	background         : #cccc88;
	text-align         : right;
}
#login_details span {
	margin             : 20px;
	padding            : 10px;
}
#login_details a { 
	color              : #ee0a0a;
}

/* Menu */
#menu {
	position           : absolute;
	left               : 0;
	background-color   : #fffeef;
	text-align         : center;
	width              : 150px;
	border             : 5px solid #555555;
	color              : #ee0a0a;
	min-height         : 100%;
	font-size          : 120%;
}

.menu_entry {
	cursor             : pointer;
	padding            : 5px 0px;
}
.menu_entry:hover {
	background-color   : #fddbdb;
}
.menu_entry.active {
	background-color   : #ee0a0a;
	color              : #fffeef;
}

table.centered
{
	margin-left        : auto;
	margin-right       : auto;
}

/* User list */
tr.user {
	cursor             : pointer;
}

/* Recipe list */
#recipe_table {
	width              : 100%;
}
tr.recipe {
	cursor             : pointer;
}

/* tip list */
#tip_list_table {
	width              : 100%;
}
tr.tip {
	cursor             : pointer;
}

/* Recipe link "buttons" (PDF etc) */
.links {
	float              : right;
	top                : 0;
	line-height        : 20px;
	margin             : 5px 0;
}
.links table {
	border-spacing     : 10px 0;
	vertical-align     : middle;
}
a.red:link {
	color              : #ee0a0a;
}
a.red:visited {
	color              : #ee0a0a;
}
.links img {
	border-style       : none;
	height             : 20px;
}

/* Image lists */
#recipe_images div.content {
	height             : 120px;
	margin-bottom      : 3px;
}
#recipe_images div.content div.image {
        height             : 100px;
}
#edit_recipe_images div.content {
	height             : 144px;
	margin-bottom      : 3px;
}
#edit_recipe_images div.content div.image {
        height             : 124px;
}
div.image {
	float              : left;
	width              : 100px;
	padding            : 10px;
	text-align         : center;
	overflow           : hidden;
	cursor             : pointer;
}
div.image.active {
	background-color   : #fddbdb;
}
div.image:hover {
	background-color   : #fddbdb;
}
div.image div.buttonbar {
	position           : absolute;
	left               : 50%;
	bottom             : 0px;
}
div.image div.buttonbar a.text_button {
	position           : relative;
	left               : -50%;
}

/* Text on the intro screen */
div.introtext {
	padding            : 10px;
	text-align         : center;
	font-size          : 150%;
}

/* Overlay containers */
div.overlay_container {
	position           : fixed;
	top                : 0;
	left               : 0;
	width              : 100%;
	height             : 100%;
}
div.hidden {
	left               : -99999px;
}
div.overlay {
	top                : 10%;
	width              : 80%;
	height             : 80%;
	min-width          : 320px;
	min-height         : 240px;
	max-width          : 640px;
	max-height         : 480px;
	z-index            : 100;
	background-color   : #cccc88;
	border             : 2px solid #555555;
	padding            : 4px;
	left               : 0;
	right              : 0;
	margin-left        : auto;
	margin-right       : auto;
}

div.image_buttons {
	height             : 34px;
}
/* common style for all buttons */
div.image_buttons div {
	position           : absolute;
	top                : 5px;
	width              : 24px;
	height             : 24px;
	cursor             : pointer;
}
/* position and images for buttons */
div.image_back {
	left               : 40%;
	background         : transparent url('../images/back.png') no-repeat scroll top right;
}
div.image_forward {
	right              : 40%;
	background         : transparent url('../images/forward.png') no-repeat scroll top right;
}
div.image_close {
	right              : 10px;
	background         : transparent url('../images/close.png') no-repeat scroll top right;
}

div.image_content {
	width              : 100%;
	height             : 100%;
	overflow           : hidden;
}

div.image_content img {
	position           : absolute;
}