/* \*/
* html #tlc, * html #trc {height: 1%;}
/* */

a{ 
    font-family:Arial,Serif,Helvetica;
    color:#446db1;
}

body{
    margin: 0;
    padding: 0;
    background-color: white;
    /* font-size: 100.01%; */
    text-align: center; 
}

#box{
    position: relative;
    margin-left: auto;
    margin-right: auto;	
    margin-top: 2.5em;
    padding: 0;
    text-align: left;
    width:70%;				/* <-- use this to tie width to viewport size */
    width: 40.0em;				/* <-- use this for a set width */
    background-color: #eeeeee;
}
 	
#content
	{
	padding:2.1em 0.8em 1.2em 1.4em;
	float:none !important; float:left; /* IE 6.0 hack mpd, float:left; */
	}

#content h1
	{
	color:#0354c2;
	font-weight: bold;
	font-size: 1.2em;
	font-family: helvetica, geneva, arial, sans-serif;
	}
		
#content p
	{
	color:#3b3b3b;
	font-size: 1em;
	line-height: 1.3em;
	font-family: arial, helvetica, sans-serif;
	}
		
/* ---=== border code follows ===--- */
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image:url(../img/tlc.gif);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(../img/trc.gif);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(../img/blc.gif);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(../img/brc.gif);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(../img/tb.gif);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(../img/bb.gif);
	background-position: 50% 100%;
	}
	
#rb
	{
	background-image:url(../img/r.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-color: #eeeeee;
	background-image:url(../img/l.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}
		
		
/*---------------------------------
      'thrashbox' - User and Admin
---------------------------------*/

/* set the image to use and establish the lower-right position */ 


/* 
  NOTE : Commented out following property assignment because the 'background'
         property must be defined within each page's header tag to allow for alternate
         background (drop-box) images.
 */

/*
.cssbox, .cssbox-body, .cssbox-head, .cssbox-head h2 {
    background: transparent url(../img/drop-box-user.jpg) no-repeat bottom right; 
} 
*/

div.cssbox { 
    width: 443px !important; /* intended total box width - padding-right(next) */
    width: 428px; /* IE Win = width - padding */
    padding-right: 15px; /* the gap on the right edge of the image (not content padding) */
    margin: 20px auto; /* use to position the box */ 
    margin-top:40px;
}

/* set the top-right image */ 
div.cssbox-head { 
    background-position: top right; margin-right: -15px; /* pull the right image over on top of border */
    padding-right: 40px; /* right-image-gap + right-inside padding */ 
}

/* set the top-left image */ 
div.cssbox-head h2 {
    background-position: top left; 
    margin: 0; /* reset main site styles*/ 
    border: 0; /* ditto */ 
    padding: 22px 0 8px 40px; /* padding-left = image gap + interior padding ... no padding-right */ 
    height: auto !important; height: 1%; /* IE Holly Hack */ 
    text-align:center;
    color:#fff;
    font-family:Verdana,Arial,Helvetica,Serif;
    font-size:16px;
    font-weight:bold;
} 

/* set the lower-left corner image */ 
div.cssbox-body { 
    background-position: bottom left; 
    margin-right: 25px; /* interior-padding right */ 
    padding: 15px 0 15px 40px; /* mirror .cssbox_head right/left */
}

#content .bottom-spacer{
    margin:0;
    font-size:30px;
}



/*--------------------------------
                            Links
--------------------------------*/

span.clear{ /* fix IE 7.0 bug */
    font-size:0.1em;
    line-height:1px;
}

p.link, p.link-top{
    /* font-size: 11px; */
    font-weight: normal;    
    background-position: left center; 
    background-repeat: no-repeat; 
    min-height: 14px;
    margin: 1.2em 0.0em 0em 0.5em;
    margin-left:5.5em;  /* NOTE : margin-left depedent on .cssbox width */
    padding-left: 26px;
    padding-bottom: 2px;
    background-image: url(../img/voice.bullet.gif);
    line-height: 14px; /* fix for IE6.0, when text does NOT wrap!  */
    color:#717171;
}

p.link-top{
    margin-top:0.5em;
}

p.link a, p.link-top a{
    font-size:0.9em;
}

#content p.link-description{
    font-size: 0.7em;
    color:#777;
    font-weight: normal;
    margin: 0em 0.5em 0em 0.5em;
    margin-left:8.0em;  /* NOTE : margin-left depedent on .cssbox width */
    padding-left: 26px;
}

p.link-options{
    width:95%;
    text-align:center;
    padding:0.5em 0em 1.9em 0;
    margin:0;
}

.link-options a{ 
    font-size:0.9em; 
}



/*--------------------------------
                           Footer
--------------------------------*/
#content .footer {
    width:98%;
    font-family:Arial,Serif,Helvetica;
    font-size:10px;
    text-align:center;
    color:#aaa;
    margin:0;
    text-align:center;
}

#content .footer a{ 
    font-size:10px; 
    color:#aaa;
    text-decoration:none;
}

#content .footer a:hover{ 
    text-decoration:underline;
}


/*--------------------------------
              Training Video Page
--------------------------------*/

.training-banner{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    clear:right;
}

div.powerpoint-slides{
    float:left;
    width:100%;
    padding:22px 0px 0px 0px;
    font-size:0.8em;
}
    div.powerpoint-slides p{
        padding:5px 0 0 0;
        margin:0;
    }   
    div.powerpoint-slides span.follow-along{
        font-size:0.85em;
        color:#656565;
    }
    
div.back-to-training{
    float:left;
    width:100%;
    padding:22px 0 0 0;
    /* font-size:0.8em; */
}
    div.back-to-training p{
        padding:5px 0 0 0;
        margin:0;
    }
        /* div.back-to-training p a{ 
            font-size:0.8em;
        } */

#content .training-toc{
    float:left;
    width:32%;
    padding:25px 0 0 0;
    margin-top:0;
    margin-bottom:0;
    clear:left;
}

#content .training-video{
     float:right;
     width:65%;
     text-align:center;
     margin:0;
     padding:30px 0 0 0;
}

            #content .training-video .title{
                font-size:18px;
                font-weight:bold;
                color:#39548C;
                text-align:center;
                padding:0 0 20px 0;
                margin:0;
            }
            
                #container{
                    padding:0;
                    margin:0;
                    text-align:center;
                }
                

.training-list, .training-list-inner{
    float:left;
    width:30%;    
    font-size:0.8em;
}
                    .training-list{
                        padding:10px 0px 50px 25px;
                    }
                    .training-list-inner{
                        padding:10px 0px 25px 25px;
                        width:100%;
                        float:left;
                    }

    .training-list p, .training-list-inner p{
        padding:5px 0 0 0;
        margin:0;
    }
    
    .training-list a, .training-list-inner a{
        text-decoration:none;
    }
    .training-list a:visited, .training-list-inner a:visited{
        color:#9E0307;
        text-decoration:none;
    }
    
    .training-list .title, .training-list-inner .title{
        font-weight:bold;
        text-decoration:underline;
    }
    
    .training-list p.photo, .training-list-inner p.photo{
        padding:0 0 5px 0;
    }

#content p.topic-title{
    color:#656565;
    letter-spacing:2px;
    /* text-decoration:underline; */
    /* font-weight:bold; */
    /* font-size:1em; */
    /* font-style:italic; */
}
    
#content p.topic{
    padding:0 0 0 30px;
}

    
.training-navigation{
    clear:left;
    width:100%;
}


span.toggle-button{
    /* color:#9E0307; */
    color:#446db1;
    cursor:pointer;
}