/*
--------------------------------------------------------------------------------
What:	"Oranges in the sky" Styles(Table data design)
Who:	Krasimir Makaveev(krasi [at] makaveev [dot] com)
When:	15.09.2005(created)

--------------------------------------------------------------------------------
*/
:root {
--verydkcolorA: rgb(1, 7, 1);
--dkcolorA: rgb(62, 87, 65);
--medcolorA: rgb(78, 114, 101);
--ltcolorA: rgb(130, 138, 151);
--whitish: rgb(245, 245, 245);
--ltcolorB: rgb(189, 222, 231);
--medcolorB: rgb(145, 184, 210);
--dkcolorB: rgb(59, 94, 155);
--accent: rgb(141, 42, 27);

}

/* -- -- Section divider -- -- */
#secdiv {
	border-top: 2px solid var(--dkcolorA);
	clear: both;
	padding: 0;
	width: 40%;
	margin-left: auto;
    margin-right: auto;
	line-height: 1em;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	text-align: center;
	border-bottom: 2px solid var(--dkcolorA);
}


/*--- Main layout ---- */

#topsection{
	padding: 15px 15px 0px 15px;
/*height: 130px;*/ /*Height of top section*/
background-color:var(--verydkcolorA)} /* change color here behind nav bar color */

#topsection h1{
margin: 0;
padding: 0px;
font: bold 22px Helvetica, Verdana, sans-serif;
}

#maintext{	
font:  13pt Palatino, times, serif;
/* line-height: 2em; */
padding:0px 0px 0px 30px;
}
#maintext h3{
font: bold 16px Helvetica, Verdana, sans-serif; 
padding:10px 0px 0px 0px;
margin:0 2px 0 -20;/* set to 0 for no spaces between tabs */
color: var(--accent)
}

#maintext a{
color: var(--dkcolorB)
}
/*--- ---- Navigation menu ---- ---- */

#ddtitle{
margin-left: 20px;
font: bold 12px Helvetica; 
padding:0;
list-style:none;
}

#ddcolortabs{
/* height: 1px */
margin-left: 20px;
padding: 0px;
border-left: 200px transparent;/* color to the left */

}

#ddcolortabs ul{
font: bold 13px Helvetica, Verdana, sans-serif; 
color: var(--accent)
/* background-color: var(--dkcolorB); */ /*behind tabs*/
line-height: 1cm
border: 20px;
margin:0;
padding:0;
list-style:none;
}

#ddcolortabs li{
display:inline;
/* margin:0 2px 0 0; */
padding: 0;
text-transform:uppercase;
background: var(--accent)
}

#ddcolortabs a {
float:left;
background: var(--ltcolorA) url(media/color_tabs_left.gif) no-repeat left top; /*color of tabs*/
margin:0 2px 0 0;/* set to 0 for no spaces between tabs */
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;

}

#ddcolortabs a span{ 
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;/* space around text in buttons */
}

#ddcolortabs a span{
float:none;
}

#ddcolortabs a:hover{  /*when your mouse goes over the tab*/
background-color: var(--ltcolorB); 
color: var(--accent) /* font color */
}

#ddcolortabs a:hover span{
/* background-color: var(--ltcolorB); */

}

#ddcolortabs #current a, #ddcolortabs #current span{ /*currently selected tab*/
background-color: var(--dkcolorA);
}

#ddcolortabs #current a{
float:left;
color: white; /* font color */
}

#ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background-color: var(--dkcolorA); /* color of line under navigation tabs */
/*border-top: 1px solid #fff; */ /*Remove this to remove border between bar and tabs*/
}

#ddcolorline{
clear: both;
padding: 0;
width: 100%;
height: 2px;
line-height: 2px;
background: var(--ltcolorA);
}
</style>



/*--- ---- floating side notes ---- ---- */

sidenote1, sidenote2, sidenote3, sidenote4 {
}

#sidenote1,
#sidenote4 {
	padding: 5px 5px 5px 5px;
    width: 250px;
    font-size: 90%;
}

#sidenote1,{
	border: 1px solid var(--verydkcolorA);
 
}
#sidenote4 {
    border: 1px solid var(--dkcolorB);
	background-color: var(--ltcolorB);
	/*	height: 100%; -- run along entire left side, from insertion point on down*/
}

#sidenote1 h3,
#sidenote4 h3 {
	text-transform: uppercase;
	margin: 4px 0px 4px 0px;
	text-align: center
	font: bold 11px Helvetica, Verdana, sans-serif;
}

#sidenote3 {/* runs full height along left side */
	float: right;
	margin: 5px 10px 5px 5px;
	height: 40%; 
	background-color: var(--whitish);
    width: 15%;
	padding: 5px 5px 5px 5px;
	font: bold 11px Helvetica, Verdana, sans-serif;
}

#sidenoteleftthin {/* runs full height along left side */
	float: left;
	margin: 5px 10px 5px 5px;
	height: 35%; 
	/* background-color: var(--whitish); */
    width: 5%;
	padding: 5px 5px 5px 5px;
	font: bold 11px Helvetica, Verdana, sans-serif;
}

#sidenote4 {
    margin: 5px 10px 5px 5px;
    float: left;
}
#sidenote2 {/* runs full height along left side */
	float: left;
	margin: 5px 10px 5px 5px;
	height: 40%; 
	background-color: var(--whitish);
    width: 15%;
	padding: 5px 5px 5px 5px;
	font: bold 11px Helvetica, Verdana, sans-serif;
}

/* generic table */
table {
	font-family: Palatino, serif;
	border-collapse: collapse;
	width="65%";
	border-top: 1px solid var(--dkcolorB); 
	*color: var(--dkcolorA);
}

table caption {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	padding: 2px;
	text-align: left;
	background-color: var(--dkcolorA);
	border-bottom: 2px solid var(--dkcolorA);
}

table tfoot tr th, table tfoot tr td {
	text-transform: uppercase;
	*color: var(--whitish);
	font-weight: bold;
	background-color: var(--dkcolorA);
}

table thead tr th {
	text-transform: uppercase;
	border-top: 1px solid var(--dkcolorA);
	background: var(--medcolorA);
}

table tfoot tr th {
	width: 20%;
	background: var(--medcolorA);
}

table tfoot tr td {
	/* width: 80%; */
}

table tr td {
	/* border-bottom: 2px solid var(--medcolorB); */
}

table td, table th {
	/* *border-right: 1px solid #ccc; */
	/* *border-bottom: 1px solid #ccc; */
	padding: 5px;
	/* *line-height: 1.8em; */
	/* *font-size: 0.8em; */
	vertical-align: top;
	width: 20%;
	background: var(--ltcolorB);
}

table tr.odd th, table tr.odd td {
}

a {
	vertical-align: bottom;
	padding-bottom: none;
	text-decoration: none;
	border-bottom: 1px dotted var(--medcolorB);
	color: var(--verydkcolorA);
}
/* how nav buttons react */
A:visited {text-decoration: none; color: var(--dkcolorA);
}

A:hover {text-decoration: none; color: var(--dkcolorB);}

h1 {
	margin: 0;
	padding: 5px;
	font: bold 22px Helvetica, Verdana, sans-serif;
}

ul, ol {
	line-height: 1.4em;
}


/* -- -- TableR is for recipes page only-- -- */

tableR {
	font-family: Palatino, sans-serif;
	border-collapse: collapse;
	font-size: 1.3em;
     width: 50%;
	color: var(--whitish);
}

#tableR {
	font-family: Palatino, sans-serif;
	border-collapse: collapse;
	font-size: 1.3em;
     width: 60%;
	color: var(--whitish);
	/*border-bottom: 2px solid var(--dkcolorB); why doesn't this work?*/
	border-bottom: 2px solid var(--dkcolorA);
}

#tableR caption {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
 	vertical-align: bottom;
	line-height: .6em;
	/* letter-spacing: -1px; */
	margin-top: 6px;
	padding: 2px;
	text-align: left;
	background: transparent;
	border-bottom: 2px solid var(--dkcolorA);
}

#tableR thead tr th, #tableR thead tr td  {
	font-size: .8em;
	font-family: Helvetica, Verdana, Arial, sans-serif;
	background: white;
}


#tableR tr td {
	background: var(--whitish);
 	border-bottom: transparent;
	font-size: 1.2em;
}

#tableR td, #tableR th {
	padding: 5px;
	vertical-align: top;
	width: 20%;
	background: var(--whitish);
}

#tableR tr.odd th, #tableR tr.odd td {
	border-top: 2px solid var(--medcolorB);
 	line-height: 1.2em;
     background: var(--ltcolorB);
}