/* ============  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
#nav contains a regular unordered list of links. Since we don’t want it to look like an unordered list we restyle it.
               #nav ul {
               margin:0;
               padding:0;
               list-style:none;
               }
               #nav 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;
               }
               #nav {
               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 ..I'm guessing 
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 #nav 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 ====================================================================================== */
     body, html {                    /* remove padding around base elements and set base page colour ----------------------- */
        margin:0;
        padding:0;
        color:#abcdef;                  /* set default colour of text, -------------------------------------------------------- */
        background:#010101;             /* set background of whole page ------------------------------------------------------- */
     }
     p {                             /* remove that mad padding around paragraphs ------------------------------------------ */ 
       margin:0;
       padding:0;
     }
     hr {
        padding:0px 0px;
        clear:both;
     }
/* ========================================================================================================================= */

/* =============== SET UP THE OUTSIDE WRAPPER=============================================================================== */
     #wrapper {                      /* we have a wrapper div for centering called wrapper, these are it's properties ------ */
     width:1024px;
     margin:0 auto;
	 text-align:center;
     background:#010101;             /* set to same as 'body' colour so it blends in ok. ----------------------------------- */
     }
/* ========================================================================================================================= */

/* =========== SET UP THE FIVE? MAIN SHELLS WITH FIVE? MAIN DIVS ============================================================= */
     #header {                       /* one of the five "main" divs -------------------------------------------------------- */
     padding:0px 0px;
     clear:both;
     /* background:#400000;   (leave it to become the same as the wrapper colour) ------------------------------------------ */
     }
     #navbar { 
     clear:both;
	 position:fixed; top:00px;
     width:1024px; height:20px;
	 border-radius:0px 0px 20px 20px;
	 padding:0px 0px;
     background:#009c00;
     }     
	 
	 #gallerymenulists { 
     clear:both;
	 position:fixed; top:50px;
	 width:800px;
	 padding:0px 0px;
	 background:#009c00;
     }
     
	 #mainleft {  
     float:left;
     width:800px; 
     }
     #mainright { 
     float:right;
     width:224px;
     }
     #footer-a {
     clear:both;                      
     background:#080808;
     }
     #footer-b {                       
     clear:both;                      
     background:#080808;
     }
	 
	#floatingfooter {
    border-top:solid 0px #666;
	border-radius:35px 35px 0px 0px;
	background:#009c00;
    bottom:0px;
    width:1024px; height:35px;
    position:fixed;
    z-index:1000;
  }
/* ========================================================================================================================= */


/* ============= COOL TRICK TO MAKE THE UL / LI HORIZONTAL IN NAV ========= AND A HEAP OF NAV SPECIFIC OPTIONS ============= */
     /* only.. why would you bother? .. */
     #nav ul {
     margin:0;
     padding:0;
     list-style:none;
     }
     #nav li {
     display:inline;
     margin:0;
     padding:0;
     }
     #nav {                           /* reset defaults for the EVERYTHING nav div. OVERRIDES PAGE DEFAULTS ---------------- */
     font-family:"Trebuchet MS";
     font-size:10pt;
     font-weight:normal;
     color:#ff9c00;
     }
     #nav li {                           /* reset defaults for the LIST ITEMS nav div. OVERRIDES THE ABOVE ----------------- */
     font-family:"Trebuchet MS";
     font-size:14pt;
     font-weight:normal;
     color:#ff9c00;
     }
     
     #nav a:link           { color:#EB9000; text-decoration:none; }  /* orange */
     #nav a:visited        { color:#CB9000; text-decoration:none; }  /* similar orange */
     #nav a:hover          { color:#ABCDEF; text-decoration:none; }  /* lightblue */
     #nav a:active         { color:red; text-decoration:none; }      /* umm, red?.. doh! */

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

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


/* ========================================================================================================================= */

/* ************* */
/*  ANCHOR DECOR */
/* ************* */ 
/* ----------------------------- NOTE THERE'S SEPARATE INFO FOR #NAV ------------------------------------------------------- */
     a:link           { color:#EB9000; text-decoration:none; }  /* orange */
     a:visited        { color:#CB9000; text-decoration:none; }  /* similar orange */
     a:hover          { color:#ABCDEF; text-decoration:none; }  /* lightblue */
     a:active         { color:red; text-decoration:none; }      /* umm, red?.. doh! */
     /* modified versions.. call like this .. <a class="subscript" href="http://www.?.com.au/file.html">linktext</a> */
     /*
       a.subscript:link       { color:#EDA803; text-decoration:none; font-size:8pt; } 
       a.subscript:visited    { color:#CB9000; text-decoration:none; font-size:8pt; }
       a.subscript:hover      { color:#ABCDEF; text-decoration:underline; font-size:8pt; }
       a.subscript:active     { color:red; text-decoration:none; font-size:8pt; }
     */ 
     a.subscript:link       { color:#03E5ED; text-decoration:none; font-size:8pt; } 
     a.subscript:visited    { color:#03E5ED; text-decoration:none; font-size:8pt; }
     a.subscript:hover      { color:#ABCDEF; text-decoration:underline; font-size:8pt; }
     a.subscript:active     { color:red; text-decoration:none; font-size:8pt; }
     a.med:link       { color:#EDA803; text-decoration:none; font-size:12pt; }
     a.med:visited    { color:#CB9000; text-decoration:none; font-size:12pt; }
     a.med:hover      { color:#ABCDEF; text-decoration:underline; font-size:12pt; }
     a.med:active     { color:red; text-decoration:none; font-size:12pt; }
     a.bigger:link    { color:#EDA803; text-decoration:none; font-size:15pt; }
     a.bigger:visited { color:#CB9000; text-decoration:none; font-size:15pt; }
     a.bigger:hover   { color:#ABCDEF; text-decoration:underline; font-size:15pt; }
     a.bigger:active  { color:red; text-decoration:none; font-size:15pt; }
/* ========================================================================================================================= */






/* ********* */
/* ANYTHINGS */
/* ********* */ 
     .tal {
     text-align:left;
     }
     .tac {
     text-align:center;
     }
     .tar {
     text-align:right;
     }
     .rightside {  
     margin-left:auto;
     margin-right:50;
     }

     
     
/* ********* */
/*   DIVS    */
/* ********* */ 
     div.stackright {
     float:right;
     clear:left
     }

     div.stackleft {
     float:left;
     clear:right
     }

     div.ForCommentText {
     width:700px; padding:10px;  margin:0px; display:block; margin-left:auto; margin-right:auto;
     }


/* ****** */
/* IMAGES */
/* ****** */ 
     img {                      /* ALL images this .. ---------------------------------------------------------------------- */
     padding:0px;
     border:0px;
     border-style:none;
     margin:0px;
     }
     
     img.blocked {
     display:block;             /* THE display:block BIT IS USED TO PREVENT EXTRANEOUS SPACE IN THIS CASE ------------------ */
     }                          /* BUT, being a block, you then can't use this if you want images across as it assumes br -- */
     
     img.centerimage {          /* ONLY class="centerimage" GET THIS (WHICH WILL BE MOST OF THEM) -------------------------- */
     display:block;             /* THE display:block BIT IS USE TO MAKE THE IMAGE A BLOCK SO IT CAN BE CENTERED ------------ */
     margin-left:auto;
     margin-right:auto;
     }


/* ****** */
/*  FONTS --- Don't forget the actual 'font' tag has been deprecated.*/
/* ****** */ 
    .largefont {
    font-family:"Trebuchet MS";
    font-size:15pt;
    color:#afcfef;
    font-weight:bold;
    }
    .mediumfont {
    font-family:"Trebuchet MS";
    font-size:12pt;
    color:#afcfef;
    font-weight:bold;
    }
    .normalfont {
    font-family:"Trebuchet MS";
    font-size:10pt;
    color:#afcfef;
    font-weight:normal;
    }
    .smallfont {
    font-family:"Trebuchet MS";
    font-size:7pt;
    color:#afcfef;
    font-weight:normal;
    }
    .tinyfont {
    font-size:5pt;
    color:#afcfef;
    font-weight:normal;
    }
     
     
/* FONT MODIFIERS */     
     .lightfont {           
     font-family:"Trebuchet MS";
     color:#afcfef;
     }
     .darkfont {
     color:#640a0a;
     }
      .italic { 
     font-style:italic;
     }
    
    
/* ********* */
/*  PADDING  */
/* ********* */ 
     .leftpadded {
     padding-left:50px;
     }
     .rightpadded {
     padding-right:50px;
     }


/* ************* */
/* some hr stuff */
/* ************* */
     hr.orange{
     padding:0px;
     border:0px;
     width:80%;
     color:#ff9c00;
     background-color:#ff9c00;
     height: 5px;
     }
     hr.dark{
     padding:0px;
     border:0px;
     width:80%;
     color:#030303;
     background-color:#030303;
     height: 5px;
     }


/*     
  #floatinghomelink {
    border-top:solid 0px #666;
    bottom:0px;
    left:10;
    width:80px; height:20px;
    margin:50px;
    position:fixed;
    z-index:1000;
  }
*/ 
  
  /* 
  #floatingtoplink {
    border-top:solid 0px #666;
    bottom:0px;
	width:47px; height:33px;
    margin:0px 00px 0px 150px;
    position:fixed;
    z-index:1000;
  }
*/