/*----------------------------------------------*/
/* General styles to carry through the document */
/*----------------------------------------------*/

body
{
    background-image: url(./images/tsbg.jpg); 
    background-color: #1D8484;
    color: black;
    font-family: Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    
    margin: 0px;
    border: 0px;
    padding: 0px;
}

h1 { font-size: 1.5em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.0em; }
h4 { font-size: 1.0em; }
h5 { font-size: 1.0em; }

img
{
    border: 0px;
}

a { background: transparent; color: #1D8484; }
a:hover { background: transparent; color: #6BC8C8; }
a:visited { background: transparent; color: #004848; }

/*--------------------------------------------------------------------------------------------*/
/* Frame blocks                                                                               */
/*--------------------------------------------------------------------------------------------*/

#block-sitetitle, #block-menu, #block-msgerror, #block-msgsuccess, #block-linkbuttons
{
    background: white;
    color: black;
    width: 722px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

/*----------------------------------------------*/
/* Site title block                             */
/*----------------------------------------------*/
#block-sitetitle
{
    margin-top: 20px;
    margin-bottom: 0px;
    border: 2px ridge #1D8484;
}

#block-sitetitle img
{
    margin: 5px 10px;
    border: 0px;
    padding: 0px;
}
/*----------------------------------------------*/
#block-sitetitle #info-login
{
    width: 370px;
    margin: 10px 10px 0px 10px;
    border: 0px;
    padding: 0px;
    font-size: 0.8em;
    text-align: right;
    float: right;
}

#block-sitetitle #info-login fieldset
{
    border: 0px;
    padding: 0px;
}

#block-sitetitle #info-login fieldset p
{
    margin: 15px 0px 0px 0px;
    border: 0px;
    padding: 0px;
    font-size: 0.8em;
    font-weight: bold;
}

#block-sitetitle #info-login input
{
    font-size: 0.8em;
    margin-left: 2px;
    margin-right: 2px;
}

#block-sitetitle #info-login label
{
    font-size: 0.8em;
    font-weight: bold;
    margin-left: 6px;
    margin-right: 0px;
}
/*----------------------------------------------*/
#block-sitetitle #info-user
{
    width: 370px;
    margin: 10px 10px 0px 10px;
    border: 0px;
    padding: 0px;
    font-size: 0.8em;
    text-align: right;
    float: right;
}

#block-sitetitle #info-user p
{
    margin: 5px 0px 10px 0px;
    border: 0px;
    padding: 0px;
    font-weight: normal;
    font-style: italic;
    background: transparent;
    color: #666666;
}

#block-sitetitle #info-user p b
{
    background: transparent;
    color: black;
    font-style: normal;
} 

#block-sitetitle #info-user p a
{
    font-style: normal;
}

/*----------------------------------------------*/
/* Menu block                                   */
/*----------------------------------------------*/
#block-menu
{
    background: #1D8484;
    color: white;
    margin-top: -2px;
    margin-bottom: 0px;
    border: 2px outset #1D8484;
    font-size: 10pt;
    clear: both;
}

#block-menu a { background: transparent; color: #FFFFFF; text-decoration: none; }
#block-menu a:hover { background: transparent; color: #6BC8C8; text-decoration: underline; }

#block-menu li ul li a { background: transparent; color: #1D8484; text-decoration: none; }
#block-menu li ul li a:hover { background: transparent; color: #6BC8C8; text-decoration: underline; }

#block-menu ul
{
    margin: 0px 12px;
    padding: 0px;
    height: 22px;
    line-height: 20px;
    list-style: none;
}

#block-menu li
{
    float: left;
    position: relative;
    padding: 0px 12px;
}

#block-menu-nav li ul li
{
    display: block;
    background: white;
    border: 2px ridge #1D8484;
    width: 80px;
}

#block-menu li ul 
{
  display: none;
  position: absolute; 
  top: 1em;
  left: 0;
}

#block-menu li > ul 
{
    top: auto;
    left: auto;
}

#block-menu li:hover, #block-menu li.over
{
    
}
#block-menu li:hover ul, #block-menu li.over ul { display: block; }

/*----------------------------------------------*/
/* Ad bar block                                 */
/*----------------------------------------------*/
#block-ad
{
    background: transparent;
    color: white;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    margin-top: 6px;
    margin-bottom: 0px;
    border: 0px;
    /* border: 2px outset #1D8484; */
    font-size: 0.75em;
    text-align: center;
    vertical-align: middle;
    clear: both;
}

#block-ad img
{
    margin: 0px 3px;
    border: 2px outset #1D8484;
    padding: 0px;
}

/*----------------------------------------------*/
/* Message bar blocks                           */
/*----------------------------------------------*/
#block-msgerror, #block-msgsuccess, #block-msg
{
    margin-top: 4px;
    margin-bottom: 6px;
    border: 2px ridge #1D8484;
    padding: 2px 0px;
    font-weight: bold;
    text-align: center;
    font-size: 0.8em;
}

#block-msgerror
{
    background: #FFCCCC;
    color: #660000;
}

#block-msgsuccess
{
    background: #CCFFCC;
    color: #006600;
}

#block-msg
{
    background: #FFFFFF;
    color: #000000;
}

/*----------------------------------------------*/
/* Link buttons block                           */
/*----------------------------------------------*/
#block-linkbuttons
{
    background: transparent;
    color: white;
    margin-top: 20px;
    margin-bottom: 0px;
    border: 0px;
    clear: both;
    text-align: center;
}

#block-linkbuttons form, #block-linkbuttons input
{
    margin: 0px;
    border: 0px;
    padding: 0px;
}

/*--------------------------------------------------------------------------------------------*/
/* Pop up image                                                                               */
/*--------------------------------------------------------------------------------------------*/
#popimg
{
    background: transparent;
    color: white;
    width: 100%;
    height: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px; 
    text-align: center;
    vertical-align: middle;
}

#popimg img
{
    margin: 10px 0px 0px 0px;
    border: 2px ridge #1D8484;
    padding: 0px;
}

/*--------------------------------------------------------------------------------------------*/
/* Frame blocks                                                                               */
/*--------------------------------------------------------------------------------------------*/
#content-title
{
    background: #1D8484;
    color: white;
    width: 722px;
    margin: 4px auto 0px auto;
    
    border-width: 2px 2px 0px 2px;
    border-style: ridge;
    border-color: #1D8484;
    
    padding: 2px 0px 4px 0px; 
    text-align: center;
}

#content-title small { font-size: 0.5em; margin-top: 0px; padding-top: 0px; }

#content-framed
{
    background: white;
    color: black;
    width: 722px;
    margin: 0px auto 0px auto;
    
    border-width: 0px 2px 2px 2px;
    border-style: ridge;
    border-color: #1D8484;
    
    padding: 0px;  
    font-size: 0.8em;  
}

/*----------------------------------------------*/
/* #content-framed contents                     */
/*----------------------------------------------*/
#content-framed h3
{
    margin: 0px;
    border: 0px;
    padding: 12px;
}

#content-framed h3#content-error
{
    background: white;
    color: #660000;
    margin: 0px;
    border: 0px;
    padding: 12px;
}

#content-framed h3 img
{
    vertical-align: top;
}

#content-framed h4
{
    margin: 0px;
    border: 0px;
    padding: 0px 12px 12px 12px;
    font-weight: normal;
}

#content-framed p
{
    margin: 0px;
    border: 0px;
    padding: 0px 12px 12px 12px;
}

#content-framed hr
{
    margin: 0px 12px;
    border-top: 2px ridge #1D8484;
    padding: 0px;
}

#content-framed fieldset
{
    margin: 0px;
    border: 0px;
    padding: 0px 12px;
}

#content-framed fieldset label
{
    display: block;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

#content-framed fieldset input
{
    display: block;
    margin: 0px 0px 12px 0px;
    /* border: 0px;
    padding: 0px; */
    /* text-align: left; */
}

#content-framed fieldset input.radio
{
    display: inline;
    margin: 0px 4px 12px 0px;
    vertical-align: middle;
    /* border: 0px;
    padding: 0px; */
}

#content-framed ul
{
    /* margin: 0px; */
    border: 0px;
    padding-top: 0px;
    padding-bottom: 12px;
}

#content-framed ul li
{
    /* margin: 0px; */
    border: 0px;
    padding: 0px; 
}

/*-----------------------------------------------*/
/* #content-framed list - listing of tutorials   */
#content-framed ul.content-index
{
    /* margin: auto; */
    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#content-framed ul.content-index li
{
    margin-top: 0px;
    margin-bottom: 12px;
    border: 0px;
    padding: 0px;
}

/*-----------------------------------------------*/
/* #content-framed tables - featured items stuff */
#content-framed table#features
{
    margin: 0px auto 12px auto;
    border: 0px;
    padding: 0px;
}

#content-framed table#features td
{
    width: 150px;
    margin: 0px;
    border: 2px ridge #1D8484;
    padding: 5px 10px;
    text-align: center;
    vertical-align: top;
}

/*-----------------------------------------------*/
/* #content-framed tables - tutorial stuff       */
#content-framed table#conservatory
{
    margin: 0px 12px 12px 12px;
    border: 0px;
    padding: 12px 0px 0px 0px;
}

/*------------------------------------*/
/* #content-framed - links list stuff */
#content-framed table#links-key
{
    margin: 0px auto;
    border: 0px;
    padding: 0px;
}

#content-framed table#links-key td
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    vertical-align: middle;
    font-size: 0.8em;
}

#content-framed table#links-key td a { text-decoration: none; font-weight: bold; }

#content-framed table#links-list
{
    width: 698px;
    margin: 12px;
    border: 0px;
    padding: 0px;
}

#content-framed table#links-list td
{
    margin: 0px;
    border: 0px;
    padding: 2px;
    vertical-align: middle;
}

.shadedark, .shadedarkfirst
{
    background: #DDDDDD;
    color: black;
}

.shadelight, .shadedarkfirst
{
    background: #EEEEEE;
    color: black;
}

.shadedark, .shadelight
{
    width: 20px;
    text-align: center;
}

#content-framed table#links-list td.links-paging
{
    background: #CCCCCC;
    color: black;
    margin: 0px;
    border: 0px;
    padding: 2px;
    vertical-align: middle;    
    text-align: center;
    font-size: 0.8em;
    font-weight: bold;
}

#ads-donate
{
    width: 468px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 12px;
    border: 0px; 
    padding: 0px;
}

/*----------------------------------------------*/
/* #content-pages contents                     */
/*----------------------------------------------*/
#content-pages-top
{
    background: #6BC8C8;
    color: black;
    width: 722px;
    margin: 0px auto 0px auto;
    
    border-width: 0px 2px 2px 2px;
    border-style: ridge;
    border-color: #1D8484;
    
    padding: 0px;  
    font-size: 0.8em;
    text-align: center;
}
    
#content-pages-bottom
{
    background: #6BC8C8;
    color: black;
    width: 722px;
    margin: 4px auto 0px auto;
    
    border-width: 2px;
    border-style: ridge;
    border-color: #1D8484;
    
    padding: 0px;  
    font-size: 0.8em;
    text-align: center;
}

#content-pages-top p, #content-pages-bottom p
{
    margin: 0px;
    border: 0px;
    padding: 4px 12px;
}

#content-pages-top a, #content-pages-bottom a { background: transparent; color: #004848; }
#content-pages-top a:hover, #content-pages-bottom a:hover { background: transparent; color: #1D8484; }

/*----------------------------------------------*/
/* #content-listing contents                     */
/*----------------------------------------------*/
#content-listing
{
    background: transparent;
    color: black;
    width: 724px;
    margin: 0px auto 0px auto;
    border: 0px;
    padding: 0px;  
    
    list-style-type: none;
}

#content-listing li
{
    background: white;
    color: black;
    margin: 4px 0px;
    border-width: 2px;
    border-style: ridge;
    border-color: #1D8484;
    padding: 4px;  
    font-size: 0.8em;
}

#content-listing li.list-divider
{
    background: transparent;
    color: black;
    margin: 0px;
    border: 0px;
    padding: 0px;  
    /* clear: both; */
}

/*#content-listing li img
{
     float: left; 
}*/

#content-listing li h2
{
    margin: 0px;
    border: 0px;
    padding: 4px 0px;
}

#content-listing li h3
{
    margin: 0px;
    border: 0px;
    padding: 4px 4px;
}

#content-listing li p
{
    margin: 0px;
    border: 0px;
    padding: 0px 4px 4px 4px;
}

#content-listing td.itemimg
{
	width: 125px;
}

#content-listing li ul
{
    margin: 0px auto 0px 0px;
    border: 0px;
    padding: 0px;  
    
    list-style-type: none;
}

#content-listing li ul li
{
    background: white;
    color: black;
    margin: 4px 0px;
    border: 0px;
    padding: 0px;  
    font-size: 1em;
}

/*--------------------------------------------------------------------------------------------*/
/* Tutorial image tricks                                                                      */
/*--------------------------------------------------------------------------------------------*/

#tut3-img1, #tut3-img2
{
    width: 221px;
    height: 150px;
    margin-left: 10px;
    border: 0px;
    float: right;
    display: block;    
}

#tut3-img2
{
    background-image: url(./images/tutorial03/abstractpond01.jpg); 
    background-position: top left;
}

#tut3-img2:hover
{
    background-image: url(./images/tutorial03/abstractpond02.jpg); 
    background-position: top left;
}

#tut3-img1
{
    background-image: url(./images/tutorial03/squarepond01.jpg); 
    background-position: top left;
}

#tut3-img1:hover
{
    background-image: url(./images/tutorial03/squarepond02.jpg); 
    background-position: top left;
}