/* http://www.w3.org/TR/CSS21/cover.html#minitoc */
/* http://www.w3schools.com/Css/css_syntax.asp  */

/* Note: using "#" or "ID" selector is a one time use, using the "." or "CLASS" selector can be used more then once. */
/* Note:  "#" or "ID" selectors are more specific then "." or "CLASS" selectors */

BODY    { color: #444; font-size: 12px; font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif; font-weight: normal; font-style: normal; line-height: 18px; background-color: #ce0100 background-repeat: repeat-x; background-attachment: fixed; background-position: 0 0; margin: 0; padding: 0   ; border-color: #000; }


table.root_categories { text-align: center; vertical-align: middle; cellpadding: 1; margin-left: auto; margin-right: auto; width: 987; border: ridge 0p #919191; }
table.root_categories tr {width: 100%;text-align: center;}
/*table.root_categories a {background-color: ;background-image: url('images/mac.gif');}*/
table.root_categories a:hover {width: 10; height: 10; color: white; opacity: 0.50; -moz-opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); zoom:1; }
table.root_categories img {border-width: 0px;}


table.sub_categories { width: 897px; margin-left: auto; margin-right: auto; text-align: center; border: ridge 1px #d5d5d5; border-collapse: separate; empty-cells: show; }
table.sub_categories caption{margin-left: auto; margin-right: auto;text-align: left;}
table.sub_categories tr{}
table.sub_categories a {text-decoration:none; color: grey;}
table.sub_categories a:hover {color: #565656; text-decoration: underline; font-weight: none; opacity: 100;}


table.sub_categories a:hover {color: #565656; text-decoration: none; font-weight: none; opacity: 0.50; -moz-opacity: 0.5; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); zoom:1;}
table.sub_categories td{ font-weight: none; padding: 8px; border: dashed 0 #d5d5d5; }
table.sub_categories img {border-width: 0px}


table#current_category{ width: 897px; margin-left: auto; margin-right: auto; text-align: center; border: ridge 0 #d5d5d5; }


table#article_type_groups_outer_table { width: 896px; margin-left: auto; margin-right: auto; text-align: center; border: ridge 1px #d5d5d5; }
table#article_type_groups_outer_table a {color: #121210; text-decoration: none;}
table#article_type_groups_outer_table a:hover {color: #565656; text-decoration: none; font-weight: none; opacity: 100;}
table#article_type_groups_outer_table tr#atgot_titles {background-color: silver;text-align: left;font-weight: bold;}


table#article_type_groups{text-align: left;margin-left: auto; margin-right: auto;width: 889px;}


table.articles {width: 840px;}
table.articles tr#article_titles {background-color:#cfcfcf ;}
table.articles tr#article_rows_alternate_color1 {background-color: #e3e3e3;vertical-align: top;}
table.articles tr#article_rows_alternate_color2 {background-color: ;vertical-align: top;}
table.articles td#article_text_box { background-color: #c0cbd1; width=; height:100px; padding:10px 10px 10px 15px; color:#121210; border: 0px solid lightgrey;;;;;;;}
table.articles a:hover {color: #565656; text-decoration: none; font-weight: none; opacity: 100;}
table.articles a {color: #121210; text-decoration: none;}


/*==========================BUTTON START==================================================*/
/*The button consists of two pictures, a left and a right GIF. The right GIF is much bigger, so that it will allow room for the buttons title text*/
/*Additionally, there are three pictures in each of the GIFs: a top, middle, and bottom picture. The top picture in the GIF is the default button, the middle picture is for when the button is active (depressed), and the lower picture is the picture displayed when the mouse hovers over the button */

table.articles a.squarebutton
{
background: transparent; 
background-image: url('images/square-gray-left2.gif'); 
background-repeat: no-repeat;
background-position: left top;
display: block;
float: left;
font-size: 10px;
font-family: Arial;
line-height: 17px; 
height: 17px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
opacity: 100;
}

table.articles a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/

}

table.articles a.squarebutton span
{

background-image: url('images/square-gray-right2.gif'); 
background-repeat: no-repeat;
background-position: right top;


/*The following controls the invisible padding around the button*/
display: block;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px
padding-left: 0px;

}

/* An element can have the following dynamic pseudo-classes :hover | :active | :focus  */

table.articles a:hover.squarebutton 
{ 
text-decoration: none; 
background-color: transparent; 
background-position: left -34px;
}

table.articles a:hover.squarebutton span
{
color: black; 
background-position: right -34px;
} 

table.articles a:active.squarebutton 
{ 
text-decoration: none; 
background-position: left -17px;
}

table.articles a:active.squarebutton span
{
color: black; 
font-weight: ;
font-size: 10px;
font-family: Arial;
line-height: 17px; 
background-position: right -17px;
} 


table.articles .buttonwrapper{ /* Container you can use to surround a CSS button to clear float its parameters will be inherited by any sub elements */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */

/*The following controls the margin around the button. */
margin-top: 2px;
margin-left: 39px;
margin-bottom: 2px;
right-margin: 0px; /* doesn't work, have to use padding-right: above */

}

/*==========================BUTTON END==================================================*/