/* OK!  I THINK I GOT IT RIGHT THIS TIME! */



/*I started coding this site on my own in May of 2010.  I didn't know how to code (arguably still don't).  
I am sure that may come across in any number of places.  The original website that I had had up since 2006 was coded 
by Michele Lopatin.  She gave me a very basic structure to follow, and boy did I.  
Why didn't I just hire someone?  Well, it is a BIG part of my nature to learn how to do things on my own. 
So here I am trying to dispel my boredom by writing while I wait for the last batch of images to upload.


Here are some links that really helped me get this together:
http://www.dynamicdrive.com/dynamicindex17/ddaccordion_suppliment.htm
http://api.jquery.com/toggle/
http://www.learningjquery.com/2006/09/basic-show-and-hide

http://ask.metafilter.com/159402/Help-me-translate-my-name-into-as-many-languages-as-possible
http://ask.metafilter.com/158693/CSSHTML-LinkMarkupcode-hint-please
http://ask.metafilter.com/159262/How-do-I-tell-a-picture-story-on-my-website
http://ask.metafilter.com/133008/Web-coding-questions
http://ask.metafilter.com/55145/Help-an-artist-with-his-style
http://ask.metafilter.com/127695/Need-recommendations-to-learn-simple-Wordpress-to-modify-an-existing-webpage
http://ask.metafilter.com/143173/Looking-for-examples-and-advice-regarding-website-tour-video
http://ask.metafilter.com/143124/Explain-relationship-between-HTML-CSS-and-JavaScript-with-pretty-pictures

Here are some books that helped:
Learn JavaScript by w3 Schools ISBN 978-0-470-61194-4
JavaScript in 24 Hours ISBN 978-0-672-32879-4
HTML, XHTML, and CSS  ISBN 978-0-470-27436-1
 HTML for the World Wide Web ISBN 0-321-13007-3
HTML in 10 Minutes (insert a hearty snort and giggle at how stupid *that* title is) ISBN 0-672-32878-X

If you don't know about the good folks at metafilter (www.metafilter.com), you should.  
They are probably one of the kindest, most generous groups of people around.  
You can't talk about Ayn Rand with them (I am still unsure if one should talk about Ayn Rand with *anyone* 
but that is beside the point), but if that is one of the only downsides of any community... 
well... 
you are doing ok and in pretty good shape.   

Here I am: http://www.metafilter.com/user/92350

And off we go, my little website babies!*/



body { 
     background:rgb(210,210,210);
     /*background-image:url("images/tchad-xl-dk3-bg.jpg");*/
     }

body, div, p, td, th 
     {
     font:11pt sans-serif,arial; 
     color:#2e2e2e;
     }

#page { 
    width:765px;
     
     background-image:url("images/tchadbackgroundgrey85.jpg");
      background-color:rgb(225,225,225);
      /*background-repeat:repeat-x;*/
     background-position:top right;
     margin:20px auto 0 auto;
     border:2px solid rgb(70,70,70); 
     padding:20px;
        min-height:550px;
     height:auto;
     }

#page a {
     font-style:none;
     text-decoration:none;
     }

.innerpage #page {
      background-image:url("images/tchadbackgroundgrey70.jpg");
     }
     


/* SIGNATURE IS THE GIF OF MY HANDWRITING
******************************************************************/

.sig {
    /* background:url("images/signature copy.gif") no-repeat right bottom;*/
     width:110px;
     height:270px;
     float:left;
     padding:100px 0px 10px 130px;
     margin-right:10px;
      }
/*******************************************************************/


/* INDEXNAV IS THE CENTERED NAVIGATION THE FRONT PAGE! 
THIS IS WHERE THE MAIN LINKS LIVE - INSTEAD OF A DROP-DOWN MENU;
 WHICH IS HARD TO NAVIGATE ON A PHONE AND FRUSTRATING 
IF YOU WANT TO SEE THE WHOLE RANGE. 
*******************************************************************/

.indexnav {width:250px;
     float:right;
     padding:115px 260px 10px 5px;
     line-height:2;
     margin-top:0px;
     text-align:center;
     font:14pt sans-serif,arial;
     }

.indexnav a {
     display:block;
     background:rgb(210,210,210);
     border:1px solid rgb(140,140,140);
     margin: 15px 0px 15px 0px;
     text-align:center;
     padding:8px 8px;
     color: #2e2e2e;
     text-decoration:none;
     letter-spacing:3px;
     font: 14pt arial;}

.indexnav a:hover {background:#d0d0d0; font-style:italic; border:1px solid black;}
 
.indexnav  ul {margin:0; padding:0;}

.indexnav li {padding:0; list-style:none; margin:0 0 8px 0;}

.indexnav a:hover {color:#006699; font-style:italic; text-decoration:none;}

.indexnav p {text-align:left;}





/*
/* MAINNAV IS THE NAVIGATION BAR ON THE LEFT SIDE OF THE SCREEN OUTSIDE OF THE INDEX PAGE
*******************************************************************/
.mainnav { 
     float:left;
     width:160px;
     padding:0px 0px 20px 0px;
     margin-right:20px;
     }

.mainnav a {
     display:block;
     background:rgb(210,210,210);
     border:1px solid rgb(140,140,140);
     margin: 15px 0px 15px 0px;
     text-align:center;
     padding:4px 4px;
     color: #2e2e2e;
     text-decoration:none;
     letter-spacing:3px;
     font: 11pt arial;
     }

.mainnav.selected a {
    border-color:#000;
    color:#000;
    background:#d0d0d0;
     }

.mainnav a:hover {
     background:#d0d0d0; 
     font-style:italic; 
     border:1px solid black;
     }
 
.mainnav  ul {margin:0; padding:0;}

.mainnav li {padding:0; list-style:none; margin:0 0 8px 0;}

.mainnav a:hover {color:#006699; font-style:italic; text-decoration:none;}

.mainnav p {text-align:left;}

.mainnav .selected a {
    border-color:#000;
    color:#000;
    background:rgb(200,200,210);
     }

/* SUBMAINNAV is the indented navigation for sub-categories
******************************************************************
*/

.submainnav a:hover {
     background:#d0d0d0; 
     font-style:italic; 
     color:#006699;
     border:1px solid black;
     }

.submainnav ul {margin:0; padding:0;}

.submainnav a {
     display:block;
     background:rgb(205,205,205);
     border:1px solid rgb(140,140,140);
     margin: 10px 0px 10px 0px;
     text-align:center;
     padding:4px 4px;
     color: #2e2e2e;
     text-decoration:none;
     letter-spacing:3px;
     font: 10pt arial;
     }

.submainnav { 
     width:150px;
     }

/* 
******************************************************************
NAV2 IS THE CENTERED NAVIGATION FOR MORE SPECIFIC NAVIGATION! 
THIS IS WHERE THE LINKS GO WHEN YOU WANT TO SEE THE RANGE OF 
CLASSES (OR WHATEVER) - INSTEAD OF A DROP-DOWN MENU;
 WHICH IS HARD TO NAVIGATE ON A PHONE AND FRUSTRATING 
IF YOU WANT TO SEE THE WHOLE RANGE.
******************************************************************
*/

.simple-links .nav2   {width:350px;
     float:left;
     padding:10px 0px 10px 0px;
     line-height:2;
     margin-top:0px;
     margin-left:15px;
     /*min-height:350px;*/
     text-align:center;
     }

.nav2 a {

    display:block;
    background:rgb(220,220,220);
    border:1px solid #a6a6a6;

       width:300px;
     text-align:center;

    padding:10px 10px;

    color: #2e2e2e;

    text-decoration:none;

    letter-spacing:3px;
    
    font: 11pt arial;}

.nav2 a:hover {background:#d0d0d0; font-style:italic; border:1px solid black;}

.nav2  ul {margin:0; padding:0;}

.nav2 li {padding:0; list-style:none; margin:0 0 8px 0;}

.nav2 a:hover {color:#006699; font-style:italic; text-decoration:none;}

.nav2.sub a{

    display:block;
    background:rgb(210,210,210);
    border:1px solid #a6a6a6;

       width:200px;
     text-align:center;

    padding:10px 10px;

    color: #2e2e2e;

    text-decoration:none;

    letter-spacing:3px;
    
    font: 9pt arial;}


/* ***************************************************************** */
#footer {
    width:auto;
    margin:4px auto;
    font:9pt arial;
    padding:4px;
    text-align:center;
     }

/* ***************************************************************** */
/*DEXTRACONTENT FLOATS ON THE RIGHT SIDE OF THE PAGE!
******************************************************************
*/

.dextracontent {float:right !important;
         width:230px;
          padding:0px 0px 20px 0px;
          line-height:1.5;
          margin-left:12px;
          border-bottom:2px solid rgb(180,180,185);
          !important; }


.dextracontent a:hover {color:#006699; font-style:italic; text-decoration:none;}


.dextracontent a {color:#006699;
    text-decoration:underline;
    font: 11pt arial;
     }



/* ******************************************************************
NAV2 IS THE CENTERED NAVIGATION FOR MORE SPECIFIC NAVIGATION! 
THIS IS WHERE THE LINKS GO WHEN YOU WANT TO SEE THE RANGE OF 
CLASSES (OR WHATEVER) - INSTEAD OF A DROP-DOWN MENU;
 WHICH IS HARD TO NAVIGATE ON A PHONE AND FRUSTRATING 
IF YOU WANT TO SEE THE WHOLE RANGE. 
******************************************************************
*/

.nav2 {width:315px;
     float:left;
     padding:10px 0px 10px 0px;
     line-height:2;
     margin-top:0px;
     margin-left:15px;
     /*min-height:350px;*/
     text-align:center;
   /*text-indent:15px;*/
     }

.nav2 a {

    display:block;
    background:rgb(220,220,220);
    border:1px solid #a6a6a6;

    /*width:300px;*/
     text-align:center;

    padding:10px 10px;

    color: #2e2e2e;

    text-decoration:none;

    letter-spacing:3px;
    
    font: 11pt arial;}



.nav2 a:hover {background:#d0d0d0; font-style:italic; border:1px solid black;}
 
.nav2  ul {margin:0; padding:0;}

.nav2 li {padding:0; list-style:none; margin:0 0 8px 0;}

.nav2 a:hover {color:#006699; font-style:italic; text-decoration:none;}

.nav2 p {text-align:left;}


.tableblock {

}

/* ******************************************************************
USE CENTERCONTENT INSTEAD OF NAV2 FOR THE MIDDLE ROW if mostly text! 
******************************************************************
 */

.centercontent {width:300px;
     float:left;
     padding:10px 10px 10px 10px;
     line-height:1.25;
     margin-top:0px;
     margin-left:12px;
     /*min-height:350px;*/
     text-align:left;
     border-bottom:2px solid rgb(180,180,185);
     }

.centercontent a {color:#006699;

    text-decoration:underline;

    /*letter-spacing:3px;*/
    
    font: 11pt arial;}

.centercontent a:hover {color:#006699; font-style:italic; text-decoration:none;}

/* ******************************************************************
CREATE A CENTERCONTENT 2 FOR CENTERED TEXT IN MIDDLE OF ROWS AND TABLES!
******************************************************************
*/

.centercontent2 {width:340px;
     float:left;
     padding:10px 10px 10px 10px;
     line-height:2;
     margin-top:0px;
     margin-left:15px;
     /*min-height:350px;*/
     text-align:center;
     }

.centercontent2 a {color:#006699;

    text-decoration:underline;

    /*letter-spacing:3px;*/
    
    font: 11pt arial;}

.centercontent2 a:hover {color:#006699; font-style:italic; text-decoration:none;}

h1 {font: bold 12pt arial;

    letter-spacing:3px;

    margin:0 0 10px 0;

    padding:0;}



h2 { margin:0 0 4px 0;

    padding:0;

    font:bold 11pt arial;}

h3 {margin:0 0 2px 0;

    padding:0;

    font:bold 10pt arial;}

h4 {Font: bold 14pt arial;
    
     letter-spacing: 3px;
     Padding:0;
     text-align: center;
      }

h5 {Font: bold 12pt arial;
     
     text-align:center;
     letter-spacing:1px;
  }

.clear {
    clear:both;
    line-height:0;
    margin:0;
    padding:0;}

/* ***************************************************************** */
/* This is the question/answer section!  */
/* ***************************************************************** */

dt {
     font-weight:bold;
     }

dd {
     line-height:1.25;
     margin-bottom:8px;
     }
/* ***************************************************************** */
/*  This is the setup for the tables! */
/* ***************************************************************** */

.classes td {
  border:1px solid rgb(30,30,30);
    text-align:right;
    vertical-align:top;
    width:42px;
    padding:4px 4px 4px 4px;
    background:rgb(215,215,215);}



.classes th {
  border:1px solid rgb(30,30,30);
    text-align:center;
    vertical-align:top;
    width:42px;
    padding:4px 4px 4px 4px;
    background:rgb(205,205,205);}

/* ***************************************************************** */
/* PARICONTENT IS TO BE USED UNDER THE NAV AND MAIN STUFF, 
BUT STILL ACCOMMODATES  THE RIGHT SIDE*/
/* ***************************************************************** */
.paricontent {width:550px;
     background:rgb(240,240,240);
     float:right;
     padding:5px 0px 5px 5px;
     line-height:2;
    /* margin-top:10px;*/
     margin-left:0px;
     margin-bottom:5px;
     /*min-height:350px;*/
     text-align:left;
     border:2px solid rgb(180,180,185); }

.paricontent a {color:#006699;

    text-decoration:underline;

    /*letter-spacing:3px;*/
    
    font: 11pt arial;}

.paricontent a:hover {color:#006699; font-style:italic; text-decoration:none;}


.paricontentsub {width:500px;
     float:left;
     padding:0px 0px 5px 0px;
     line-height:2;
     margin-top:0px;
     margin-left:50px;
     margin-bottom:0px;
     /*min-height:350px;*/
     text-align:left;
     border:none; }

.paricontentsub a {color:#006699;

    text-decoration:underline;

    /*letter-spacing:3px;*/
    
    font: 11pt arial;}

.paricontentsub a:hover {color:#006699; font-style:italic; text-decoration:none;}

/* SUNCONTENT IS FULL-PAGE!!!  800 PIXELS!  */

.subcontent {width:auto;
     float:left;
     background:rgb(235,235,235);
     border:2px rgb(180,180,185);
     border-style:solid;
     padding:10px 10px 10px 10px;
     line-height:2;
     margin-top:0px;
     margin-left:0px;
     /*min-height:350px;*/
     text-align:left;
}

.subcontent a {color:#006699;

    text-decoration:underline;

    /*letter-spacing:3px;*/
    
    font: 11pt arial;}

.subcontent a:hover {color:#006699; font-style:italic; text-decoration:none;}


/* ***************************************************************** */

/*Stuff I want to save, comment on, and generally deal with here so I don't lose it:

******************************************************************
Basic format for Workshop pages after page and navigation divs:

<div class="paricontent">
<h5>2011</h5>

<strong>&bull;</strong> explain

<div class="paricontentsub">

      </div> <!-- of paricontentsub -->
     
</div> <!--of paricontent -->

******************************************************************


******************************************************************


******************************************************************

Footer for each page:

 <br class="clear" />
 <br class="clear" />

</div>
<div id="footer">
<br /><center><img src="images/tchad.gif" height="30" width="73" /></center>
<br />&copy; 2007-2010 Tchad LLC.  All Rights Reserved.   
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2747468-1"; urchinTracker(); </script></body>
</html>

*********************************************************************
</head>

<body>

<div id="page">
     <div class="mainnav">
           <br />
           <img src="images/signature.gif" height="72" width="175" />
                 <li><a href="index.html">Home</a></li>
                 <li class="selected"><a href="classes.html">Classes</a></li>
                 
                    <div class="submainnav">
                    <ul>
                    <li class="selected"><a href="classes.html">Workshops</a></li>
                    <li class="selected"><a href="classes.html">Basic Sewing</a></li>
                    <li class="selected"><a href="classes.html">Intermediate Sewing</a></li>
                    <li class="selected"><a href="classes.html">Language</a></li>
                    </ul>
                    <!--ends submainnav-->
          <div class="mainnav">
                 <li><a href="design.html">Design</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="blog.html">Blog</a></li>
                 <li><a href="contact.html">Contact</a></li>
                    
                 <br />
                 <br />
                 <br />
                 <li><a href="faq.html">FAQ</a></li>
                 <li><a href="mission.html">Mission</a></li>
               </div>

******************************************************************

 <center> <table class="classes">

            <tbody><tr>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
                <th>Sun</th>
            </tr>

            <tr>
                <td>3-6<br> 6-9</td>
                <td>3-6<br> 6-9</td>
                <td>3-6<br> 6-9</td>
                <td>3-6<br> 6-9</td>
                <td>No<br> Classes</td>
                <td>12-3<br>3-6</td>
                <td>12-3<br>3-6</td>
            </tr>
        </tbody></table></center>

******************************************************************
The front page used to read:


Beauty... is not always ...Functional.

Ingenuity... can be ...Classic.

Style... always trumps ...Fashion.

Trends... do not replace ...Integrity.

Function... can be ...Beautiful.

I still think this is a good mantra.  I plan on incorporating it elsewhere, but I wanted to cleanup the front page.  

******************************************************************

Lorem ipsum:

Hypatia anno 370 nata est et obiit anno 415 Alexandriae. Scientifica, magistra, et philosopha erat neoplatonica, 
qvae incremento mathematicae et astronomiae magnopere contribvit. Opera eivs perdita svnt.

Pater eivs fvit Theo Alexandrinvs, celeber mathematicvs astronomvsqve, qvi probabiliter in bibliotheca Alexandrina 
docebat et filiam scientiis ibi edvcavit. Didicit Hypatia historiam religionvm, rhetoricam, philosophiam, et artem 
docendi, et peregrinata est in Athenas Romamqve. Scholastici concvrrebant ad domvm Hypatiae a remotissimis locis. 
Vnvs ex eivs discipvlis erat Synesivs Cyrenaevs, episcopvs Ptolemaidis, qvi de Hypatia et operibvs eivs scripsit. 
Discipvlvs alivs, Hesychivs Hebraevs, de Hypatia qvoqve scripsit, et rettvlit vt magistratvs ad Hypatiam concvrrebant 
et eam consvlebant de rebvs administrationis diversibvs.

Anno 412 episcopvs Cyrillvs Alexandrinvs factvs est Patriarcha.
 Ille erat vir catholicissimvs, qvi paganitatem haeresemqve abhorrebat, et Hypatiam insimvlavit fascinationis. 
Anno 415, interfecta est Hypatia a tvrba monachorvm, qvi eam confixervnt et acvtis laceravervnt conchis et corpvs cremavervnt.


*/