﻿/* TUTORIAL TABLE ------------------------------------------- */

table.tutorial
{
    width: 100%;
    
    margin-top: 20px;
}

/* top */
table.tutorial td.tl
{
    width: 34px;
    height: 34px;
    
    background-image: url( ../../images/chrome/gray_line_tl.gif );
    background-position: top right;
    background-repeat: no-repeat;
}

table.tutorial td.tc
{
    background-image: url( ../../images/chrome/gray_line_horizontal.gif );
    background-position: left 13px;
    background-repeat: repeat-x;
}

table.tutorial td.tr
{
    width: 34px;
    height: 34px;
    
    background-image: url( ../../images/chrome/gray_line_tr.gif );
    background-position: top left;
    background-repeat: no-repeat;
}

/* middle */
table.tutorial td.ml
{
    background-image: url( ../../images/chrome/gray_line_vertical.gif );
    background-position: 12px top;
    background-repeat: repeat-y;
}

table.tutorial td.mr
{
    background-image: url( ../../images/chrome/gray_line_vertical.gif );
    background-position: 21px top;
    background-repeat: repeat-y;
}

/* bottom */
table.tutorial td.bl
{
    width: 34px;
    height: 34px;
    
    background-image: url( ../../images/chrome/gray_line_bl.gif );
    background-position: bottom right;
    background-repeat: no-repeat;
}

table.tutorial td.bc
{
    background-image: url( ../../images/chrome/gray_line_horizontal.gif );
    background-position: left 20px;
    background-repeat: repeat-x;
}

table.tutorial td.br
{
    width: 34px;
    height: 34px;
    
    background-image: url( ../../images/chrome/gray_line_br.gif );
    background-position: bottom left;
    background-repeat: no-repeat;
}

/* TUTORIAL TITLE ------------------------------------------- */
table.tutorial span.tutorialTitle
{
    color: #005572;
    background-color: white;
    font-weight: bold;
}

table#tutorialWrapper h1.tutorialTitle
{
    margin-top: 30px;
}

/* TUTORIAL THUMBNAIL --------------------------------------- */
table#tutorialWrapper img.tutorialGraphic
{
    float: right;
}

/* CONTROLS ------------------------------------------------ */
table.tutorial table.controls
{
    width: auto;
    
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    
    background-color: white;
}

table.tutorial table.controls input
{
    margin-left: 3px;
    margin-right: 3px; 
}

span#pnlButtons
{
    display: none;   
}

/* PROGRESS BAR -------------------------------------------- */
div.tutorialPGB
{
    position: relative;
    
    width: 270px;
    height: 20px;
    
    margin-right: 10px;
    
    border: solid 1px #005572;
}

table.tutorial div#pgb
{
    position: absolute;
    top: 1px;
    left: 1px;
    
    width: 0%;
    height: 18px;
    
    background-color: #005572;
}

/* TUTORIAL TEXT ------------------------------------------- */
div.tutorialText
{
    height: 80px;
    
    border: solid 1px #00557C;
    padding: 5px;

    color: #00557C;
    font-size: 1em;
    text-align: justify;    
}

/* TUTORIAL BUTTONS ---------------------------------------- */
input[type=button].big
{
    font-size: 1.2em;
    padding: 2px 10px 2px 10px;
    margin-right: 5px;
}