/* ============  NOTES ===================================================================================================== */

/* Noted that using doubleslash for a comment failed so I'm sticking to SlashStar--StarSlash  
*/

/* note don't nest comments or the outside one will end where the first inside one says to, and after that all hell breaks loose
*/


/*   RE: THE #WRAP METHOD 
The method we use to center the content is based on the fact 
that when an element’s left and right margins are set to auto, 
they will share whatever is left when the element’s width has 
been subtracted from that of its container. In this case the 
width of #wrap will be subtracted from the width of the browser 
window.
Note: for this method to work in Internet Explorer (version 6 and 
later only), the document must use a DOCTYPE that forces IE 
to use its standards mode. 
( http://www.alistapart.com/articles/doctype/ )
*
*/


/*  PUSH THE TWO MAIN AREAS LEFT AND RIGHT 
To make the two columns (#main and #sidebar) 
display side by side we float them, 
one to the left and the other to the right. 
We also specify the widths of the columns.
               #sidebar {
               float:left;
               width:250px;
               background:#c9c;
               }
               #main {
               float:right;
               width:500px;
               background:#9c9;
               }
*
*/


/* FIX THE FOOTER
The footer doesn’t get pushed down to the bottom of the content 
because of the way float works. When you float an element, it is 
removed from the document flow and doesn’t push elements that 
follow it down. 
In this case #footer will start right below #sidebar.
To avoid this we use the clear property to tell the footer 
that it can’t have any elements next to it.
... like this.. 
                  #footer {
                  clear:both;
                  background:#cc9;
                  }
*
*/

/* FIX THE BACKGROUND COLOUR 
At some point we can see that the shorter column doesn’t continue all the way 
down to the footer. To make it look like it does, we use the same 
background colour for #sidebar and #wrap.   (MIGHT ADJUST THIS TOO AT SOME POINT)
              #sidebar {
              float:left;
              width:250px;
              background:#99c;
              }
Also, if you take a look at this step in Internet Explorer 6 you may notice that 
the background colour of the footer is pushing up beside the main content. 
That will be taken care of later.
If you don't know which column is going to be the tallest, and you want both 
columns to have different backgrounds and look like they are going all the 
way to the bottom, you need to use a workaround. There are several ways 
to achieve that effect:
¦Faux Columns  http://www.alistapart.com/articles/fauxcolumns/
¦Creating Liquid Layouts with Negative Margins      http://www.alistapart.com/articles/negativemargins/
¦In search of the One True Layout   http://www.positioniseverything.net/articles/onetruelayout/
*
*/

/* Make the navigation bar horizontal
#menucloud contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it.
               #menucloud ul {
               margin:0;
               padding:0;
               list-style:none;
               }
               #menucloud li {
               display:inline;
               margin:0;
               padding:0;
               }
*
*/


/* Adjust margins and paddings, and make IE 6 cooperate
Almost done. Time to adjust the margin and padding of some 
elements to make the layout a little less cramped.
               #header {
               padding:5px 10px;
               background:#ddd;
               }
               h1 {
               margin:0;
               }
               #menucloud {
               padding:5px 10px;
               background:#c99;
               }
               #main {
               float:left;
               width:480px;
               padding:10px;
               background:#9c9;
               }
               h2 {
               margin:0 0 1em;
               }
               #sidebar {
               float:right;
               width:230px;
               padding:10px;
               background:#99c;
               }
               #footer {
               clear:both;
               padding:5px 10px;
               background:#cc9;
               }
               #footer p {
               margin:0;
               }
One thing to take note of here is that when we added padding 
to #main and #sidebar, we subtracted the width of the left 
and right paddings from each element’s width. This is how the 
CSS box model works – for more details on that, see 
Internet Explorer and the CSS box model.
*
And the final thing is to compensate for a float bug in Internet 
Explorer 6. If you look at step 6 in IE 6, you’ll notice that the 
footer is not always being pushed completely below #main. Scroll 
up and down a couple of times if you can’t see it immediately.
*
It is very noticeable in the template because every major element 
has a different background colour and everything is really tight. 
One way of fixing this problem is making sure the footer has an Internet 
Explorer concept called Layout. There are several ways of achieving this, 
but we’ll do it by using the Star HTML CSS hack to give the footer 
a height only in IE 6:
               * html #footer {
               height:1px;
               }
As strange as it may look, this does the job. Thanks to another bug in IE, 
the footer will not be just one pixel tall, but as tall as its content dictates.
*
*/

/* notes on structures 
aaa, bbb {
ccc:ddd;
eee:fff;
}
#ggg, bbb{
ccc:ddd;
eee:fff;
}
#ggg bbb{
ccc:ddd;
eee:fff;
}
bbb.xyz{
ccc:ddd;
eee:fff;
}
.xyz{
ccc:ddd;
eee:fff;
}

aaa is a html standard element like a or img or ul or li or any other 'normal' thang.
bbb is a html standard element like a or img or ul or li or any other 'normal' thang, comma separted, no idea what the limit might be.
ccc is a property name
ddd is the setting of the property
eee is a property name
fff is the setting of the property
#ggg (with the hash) is something that is referred to in the html code as .. blah id=ggg.... 
#ggg bbb (note no comma between) is a 'bbb' item (only) in an id'd ggg.  (so only affects li or ul if it's in div id=ggg for instance)
bbb.xyz is like font.effinghuge and in the page where you call font you add class="effinghuge" in the opening tag
.xyz is like setting a propery for any element, so font or hr or ??? could all be called with class="xyz" if xyz was relevent to those elements.
*
*/

/* 
Hmm.. probably don't center the content of the header div, as most of the content will be centered in the '#main' div.
I've also padded the #menucloud div on the left to move it's content more over the top of the #main div.
*
*/



/* ============= END NOTES  ================================================================================================ */


/* ======================================== */
/* ======================================== */
/* =========== VISUAL CLUE ! ============== */
/* ======================================== */
/* ==============ALL CODE ================= */
/* ======================================== */
/* =============== BELOW ================== */
/* ======================================== */
/* ================= IS==================== */
/* ======================================== */
/* ================ THE =================== */
/* ======================================== */
/* ==============REAL THING =============== */
/* ======================================== */
/* ======================================== */
/* ======================================== */



/* ============= SET UP SOME DEFAULTS ====================================================================================== */


    #wrapper   { width:1000px; margin:0px auto; border-width:2px; border-style:solid; border-color:#ff9c00;   }
    /* remove padding around base elements and set base page colour ----------------------- */
    /* background-color:rgba(220,220,220,1.0); */ 
	   body, html  { margin:0px;  padding:0px; color:#666666; background-color:#dbdbdb; }   
    /* body, html  { margin:0px;  padding:0px; color:#666666; background-color:#dbdbdb; background-image:url(/_pageart/xmas/xmas20x20.png);} */

    /* remove that mad padding around paragraphs ------------------------------------------ */
    p    {  margin:0px; padding:0px; }


/* some hr stuff - remove padding, and 'clear' any floats  */
        hr             { padding:0px 0px; clear:both; }
        hr.orange      { padding:0px; clear:both; border:0px; width:80%; color:#ff9c00; background-color:#ff9c00; height: 3px; }
        hr.dark        { padding:0px;  clear:both; border:0px; width:80%; color:#030303; background-color:#030303; height: 5px; }  

/*  Classes for FONTS */ 
        font            { font-family:"Trebuchet MS"; font-size:10pt; color:#666666; font-weight:normal; }  /* default font */ 
        .heading        { font-family:"Trebuchet MS"; font-size:18pt; color:#666666; font-weight:normal; }
        .subheading     { font-family:"Trebuchet MS"; font-size:12pt; color:#666666; font-weight:normal; }
        .normalfont     { font-family:"Trebuchet MS"; font-size:10pt; color:#666666; font-weight:normal; }
        .smallfont      { font-family:"Trebuchet MS"; font-size:8pt;  color:#666666; font-weight:normal; }
        .tinyfont       { font-family:"Trebuchet MS"; font-size:5pt;  color:#666666; font-weight:normal; }
        /* font modifications */
        .orange         { color:#EB9000;       }
        .darkorange     { color:#a93300;       }
        .brightorange   { color:#fb3a00;       }
        .dark           { color:#010101;       }
        .italic         { font-style:italic;   }
        .bold           { font-weight:bold;    }
        .italic         { font-style:italic;   }
        .underline      { text-decoration:underline}
        .indented       { text-align:left; padding-left:80px    }
        
/* ANYTHINGS */
        .tal            { text-align:left;     }
        .tac            { text-align:center;   }
        .tar            { text-align:right;    }
        .rightside      { margin-left:auto; margin-right:50px; }


    a:link             { color:#a93300; text-decoration:none; }  /* orange */
    a:visited          { color:#CB9000; text-decoration:none; }  /* similar orange */
    a:hover            { color:#5555ff; text-decoration:none; }  /* 5555FF=blue, #009900=green */
    a:active           { color:red; text-decoration:none; }      /* umm, red?.. doh! */


/* ============= TRICK TO MAKE THE UL / LI HORIZONTAL IN MENUCLOUD  */  /* there's other ways of doing this btw */
    /*  OVERRIDES PAGE DEFAULTS ---------------- */
	/*  -- list-style-type has no effect if 'display:inline' -- */ 
    #menucloud         {  font-family:"Trebuchet MS";   font-size:10pt; font-weight:normal;   color:#ffffff;   } /* color:#ff9c00; */ 
    #menucloud ul      {  margin:0px; padding:0px; list-style-type:disc;   }
    #menucloud li      {  margin:5px; padding:2px; 
					  border-style:solid;
					  border-width:2px; line-height: 190%;
					  background-color:#ffdfdf;   /* was #ffdfdf  */
					  display:inline;
					  font-family:"Trebuchet MS"; 
					  font-size:12pt; 
					  font-weight:normal; 
					  color:#ff9c00;
					  border-radius: 5px; /*  */
					  }
     
    #menucloud a:link             { color:#a93300; text-decoration:none; }  /* orange */
    #menucloud a:visited          { color:#CB9000; text-decoration:none; }  /* similar orange */
    #menucloud a:hover            { color:#009900; text-decoration:none; }  /* 5555FF=blue, #009900=green */
    #menucloud a:active           { color:red; text-decoration:none; }      /* umm, red?.. doh! */

    #menucloud a.med:link         { color:#EDA803; text-decoration:none; font-size:12pt; }
    #menucloud a.med:visited      { color:#CB9000; text-decoration:none; font-size:12pt; }
    #menucloud a.med:hover        { color:#ABCDEF; text-decoration:underline; font-size:12pt; }
    #menucloud a.med:active       { color:red; text-decoration:none; font-size:12pt; }

    #menucloud a.bigger:link      { color:#EDA803; text-decoration:none; font-size:15pt; }
    #menucloud a.bigger:visited   { color:#CB9000; text-decoration:none; font-size:15pt; }
    #menucloud a.bigger:hover     { color:#ABCDEF; text-decoration:underline; font-size:15pt; }
    #menucloud a.bigger:active    { color:#dd0000; text-decoration:none; font-size:15pt; }

	
	
	
	/* fb3a00 is orangy
	   fbood6 is purply
	*/
	
	
	/*  -- list-style-type has no effect if 'display:inline' -- */ 
    #shoppinglinks         {  font-family:"Trebuchet MS";   font-size:10pt; font-weight:normal;   color:#010101;   }
    #shoppinglinks ul      {  margin:0px; padding:0px; list-style-type:disc;   }
    #shoppinglinks li      {  margin:1px; padding:1px; 
					  border-style:solid;
					  border-width:2px; line-height: 190%;
					  background-color:#fb3a00; 			/* affects background around each 'cell'. */
					  display:inline;
					  font-family:"Trebuchet MS"; 
					  font-size:18pt; 
					  font-weight:normal; 
					  color:#010101;                        /* affects border around each 'cell'. */ 
					  border-radius: 5px; /*  */
					  }
     
    #shoppinglinks a:link             { color:#ffffff; text-decoration:none; }  
    #shoppinglinks a:visited          { color:#CB9000; text-decoration:none; }  
    #shoppinglinks a:hover            { color:#010101; text-decoration:none; }  
    #shoppinglinks a:active           { color:red; text-decoration:none; }