@import url(/UI/Css/Abilitation/WebControls.css);


/******************************************************************************
** Structural Page Components
******************************************************************************/
#pageFrame
{
   margin: 0 auto;
   width: 760px;
}

#pageHeader
{
   border-left: 1px solid #392a7d;
   padding-bottom: 2px;
}

#pageMenu
{
   background-color: #dcba72;
   border: 1px solid #392a7d;
   color: #392a7d;
   padding: 3px 0;
}


/*
** The #bodyFrame object (a table) is given the CSS Class of the active
** TemplateVariant, e.g. class="templateVariant01", class="templateVariant02"
** etc.  This class may then be referenced as a parent to fine-tune the child
** controls of the bodyFrame.
*/
#bodyFrame
{
   border-left: 1px dashed #cccccc;
   border-right: 1px dashed #cccccc;
}

#bodyFrame td
{
   vertical-align: top;
}

#contextCell
{
   padding: 2px 0 0 0;
   width: 132px;
}


#graphicsCell
{
   padding: 2px 0 0 0;
   text-align: center;
   width: 200px;
}


/*
** GraphicCell images are encassed in a <div> block so that they
** stack vertically
*/
#graphicsCell div
{
   padding: 10px 0 20px 0;
}


/*
** The #contentCell has to adjust to suit the visibility of the
** #contextCell and the #graphicsCell.  The TemplateVariant class
** is set against the #bodyFrame object.
*/
.templateVariant01 #contentCell
{
   padding: 0 0;
   width: 760px;
}

.templateVariant02 #contentCell
{
   padding: 15px;
   width: 628px;
}

.templateVariant03 #contentCell
{
   padding: 15px;
   width: 428px;
}


#context
{
}

#content
{
   text-align: justify;
}

#content td
{
   vertical-align: middle;
}


#pageFooter
{
   background-color: #f7f7f7;
   border-top: 1px solid #999999;
   border-bottom: 1px solid #cccccc;
   border-left: 1px solid #cccccc;
   border-right: 1px solid #cccccc;
   padding: 2px 0;
}

/*
** Context sub-structure
*/
#contextMenu
{
   background-color: #dcba72;
   padding-top: 2px;
   width: 130px;
}

#contextImage
{
   margin-top: 5px;
   width: 130px;
}

#contextImage img
{
   width: 130px;
}

#contextFooter
{
   width: 130px;
}


/******************************************************************************
** Specialised Objects
******************************************************************************/
#header
{
   width: 100%;
}

#header .mainImage
{
   text-align: right;
}

#header .logo
{
   padding: 5px;
}

#headerNavigation
{
   background-color: #392a7d;
   border: 2px solid #dcba72;
   border-left: none;
   color: #ffffff;
   font-size: 10px;
}

#headerNavigation td
{
   text-align:center;
   padding: 1px 15px;
}

#headerNavigation a
{
   color: #ffffff;
   text-decoration: none;
}   

#headerNavigation a:hover
{
   color: #ffffff;
   text-decoration: underline;
}   



#footer
{
   color: #3366cc;
   font-size: 10px;
}

#footer a
{
   color: #3366cc;
   text-decoration: none;
}

#footer a:hover
{
   color: #ff4500;
   text-decoration: none;
}

#footer table
{
}
  

#footer td
{
   border-right: 1px solid #666666;
   padding: 0 10px;
}

#footer .copyright
{
   float: right;
   margin-right: 5px;
   text-align: right;
}



/******************************************************************************
** Standard Styles
******************************************************************************/
body
{
   color: #666666;
   font-family: Verdana, Trebuchet MS, Arial;
   font-size: 11px;
   font-weight: normal;
}


a
{
   color: #ff4500;
   text-decoration: none;
}

a:hover
{
   text-decoration: underline;
}

p
{
   margin: 0 0 10px 0;
}


b, strong
{
   color: #666666;
   font-weight: bold;
}

strong
{
   color: #3366cc;
}

em, i
{
   color: #666666;
   font-style: oblique;
}

em
{
   font-weight: bold;
}


h1, h2, h3, h4, h5, h6
{
   color: #3366cc;
   font-weight: bold;
   padding: 0;
}

h1
{
   font-size: 16px;
   margin: 30px 0 10px 0;
}

h2
{
   color: #3366cc;
   font-weight: bold;
   font-size: 12px;
   margin: 25px 0 7px 0;
}

h3
{
   color: #3366cc;
   font-weight: bold;
   font-size: 11px;
   margin: 20px 0 5px 0;
}

h4
{
   color: #3366cc;
   font-weight: bold;
   font-size: 10px;
   margin: 15px 0 3px 0;
}

h1 + h2,
h2 + h3,
h3 + h4,
H4 + h5,
h5 + h6
{
   margin-top: 0;
}


img
{
   border: none;
}

input
{
   font-size: 11px;
}


dl
{
   margin: 0;
   padding: 0;
}

dl.featuresList
{
   margin: 15px 50px 15px 50px;
}

dt
{
   color: #0066cc;
   font-size: 11px;
   font-weight: bold;
   margin: 0;
   padding: 0;
}

dd
{
   margin: 0 0 15px 0;
   padding: 0;
}




ul, ol
{
   margin: 0 0 15px 18px;
   padding: 0;
}

li
{
   margin: 2px 0;
   padding: 0;
}

td
{
   vertical-align: top;
}


/******************************************************************************
** Specialised Styles
******************************************************************************/
.smallText
{
   font-size: 10px;
   text-align: left;
}

.smallText h1
{
   font-size: 14px;
}

.smallText h2
{
   font-size: 12px;
}

.smallText h3
{
   font-size: 10px;
}

.smallText ul, ol
{
   margin: 10px 5px 10px 20px;
}

.smallText p
{
   margin-bottom: 5px;
}




div.goldPanel
{
   background-color: #dcba72;
   border: 1px inset #3366cc;
   color: #3366cc;
   margin: 0 0 5px 0;
   padding: 3px 5px;
}


div.goldPanel h1,
div.goldPanel h2, 
div.goldPanel h3,
div.goldPanel h4,
div.goldPanel h5,
div.goldPanel h6
{
   margin: 0;
}



/*
** Creates a quote/citee combination
*/
div.quotation
{
   color: #333333;
   font-style: italic;
   margin: 20px 0 30px 0;
}

div.quotation p.originator
{
   font-weight: bold;
   margin: 0 20px 0 0;
   text-align: right;
}



div.topBox
{
   background-color: #f7f7f7;
   border: 1px dashed #cccccc;
   margin-bottom: 20px;
   padding: 10px;
}

div.topBox h1, div.topBox h2, div.topBox h3
{
   margin-bottom: 5px;
}
div.topBox h4, div.topBox h5, div.topBox h6
{
   margin-bottom: 3px;
}


div.imageLeft
{
   float: left;
   margin: 10px 15px 20px 0;
}


div.imageRight
{
   float: right;
   margin: 10px 0 20px 15px;
}

.tableBorder
{
   border: 2px ridge;
}


.noTopLeading
{
   margin-top: 0;
}

.noBottomLeading
{
   margin-bottom: 0;
}

.noLeading
{
   margin-top: 0;
   margin-bottom: 0;
}