/* Default.css
**
** CSS for Crystal Clear Installations
**
** Written by: Neil Martin - Abilitation Limited
*/


/* Import the standard Abilitation Application Framework css library */
@import url(Abilitation.css);


html
{
   background-color: #ffffff;
   margin: 0;
   padding: 0;
}

body
{
   background-color: #ffffff;
   color: #666666;
   font-family: Verdana, Arial, Helvetica, Sans-Serif;
   font-size: 11px;
   margin: 0;
   padding: 0;
}


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

a:hover
{
   color: #ff0000;
   font-weight: normal;
   text-decoration: underline;
}


dt
{
   font-family: "Arial Narrow", Arial, Helvetica, Sans-Serif;
   font-size: 16px;
   font-weight: normal;
}


h1, h2, h3, h4, h5, h6
{
   color: #000000;
   font-family: "Arial Narrow", Arial, Helvetica, Sans-Serif;
   font-weight: normal;
}

h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }


p
{
   margin: 10px 0 0 0;
}


strong
{
   color: #000000;
}


/*
** Page Framework
*/
div#pageFrame
{
   margin: 20px auto;
   width: 700px;
}


div#contentFrame
{
   margin: 20px 0 0 0;
   padding: 2px 0 20px 0;
}

div#menu
{
   /*
   background-image: url(/UI/Images/Glyphs/Menu_Background_ff4500_20x25.jpg);
   background-repeat: repeat-x;
   padding: 4px 0 0 0;
   height: 20px;
   */
   background-color: #eeeeee;
   border: 1px solid #cccccc;
   padding: 5px;
   margin-bottom: 20px;
}

div#menu a,
div#menu a:hover
{
   /*
   color: #550ddc;
   */
   color: #333333;
   font-weight: bold;
   text-transform: uppercase;
   text-decoration: none;
}

div#menu a:hover
{
   color: #ff4500;
   text-decoration: underline;
}





div#footer
{
   border-top: 1px solid #dddddd;
   margin: 20px 0 0 0;
   padding: 0;
}



/*
** To create 'photo-frame' corners, create two nested div tags as follows:
**
**    <div class="bottomRightFrame">
**       <div class="topLeftFrame">
**          Content
**       </div>
**    </div>
**
** Note the inner frame provides the padding.
*/

div.topLeftFrame
{
   background-image: url(/UI/Images/Glyphs/TopLeftFrameCorner_50x20.gif);
   background-repeat: no-repeat;
   background-position: left top;
   padding: 5px 10px;
}

div.bottomRightFrame
{
   background-image: url(/UI/Images/Glyphs/BottomRightFrameCorner_50x20.gif);
   background-repeat: no-repeat;
   background-position: right bottom;
   padding: 0;
}




div.rightPictureFrame
{
   float: right;
   margin: 10px 0 30px 30px;
}

div.rightPictureFrame img
{
   margin: 5px 3px;
}



/*
** Page Components
*/
table.logoBar
{
}

table.logoBar td.logo
{
   width: 520px;
}

table.logoBar td.contact
{
   vertical-align: top;
   width: 180px;
}

table.contactInfo
{
   float: right;
}

table.contactInfo td.icon
{
   padding-right: 5px;
}


table.menu
{
}

table.menu td.item
{
   padding: 0 6px;
}

table.menu td.spacer
{
   background-image: url(/UI/Images/Glyphs/MenuSpacer_20x20.gif);
   background-repeat: no-repeat;
   background-position: 0 0;
   width: 20px;
}




table.footer
{
   color: #999999;
   margin: 3px 0 0 0;
   width: 100%;
}

table.footer td.date
{
   padding-left: 10px;
}

table.footer td.copyright
{
   padding-right: 10px;
   text-align: right;
}