/* <STYLE type="text/css"> */
/*******************************************************************************
*  Filename:         customcv.css
*  Description:      Stylesheet for the new CustomCV website and CD Rom design
*  Author:           Andrew Rae - (C) 2008 Andrew & Joanne Rae t/a CustomCV
*  Created:          2/02/2008 1:09:33 p.m.
*  Modified:         2/02/2008 1:09:34 p.m.
*  Program Version:  1.0.0
*  Version Notes:    Draft version at this point
*******************************************************************************/
body {background:#FFFFFF;
  padding: 0px;
  font-family: Verdana, Tahoma, Arial;
  font-size: 9pt;
  text-align: justify;}
  
img {border:0px;}
img.styleIcon {height: 15px; vertical-align: 0%;}
img.greyBorder {border: 1px solid #CCCCCC;}
img.styleThumbs {width: 170px; border:1px solid #CCCCCC;}
img.smallThumb {width: 106px; border:1px solid #CCCCCC;}
img.styleButton {width: 20px; vertical-align:middle; margin: 0px; margin-right: 3px; border:1px solid #DDDDDD;}

.rightpic {float:right; padding-left:12px;}
.leftpic  {float:left; padding-right:12px;}

h1 {font-family: Verdana; font-size: 16pt; color:#28166F;  padding: 0px; margin:0px;  margin-bottom: 12px;}
h2 {font-family: Verdana; font-size: 12pt; color:#ae1efe;  font-weight: 500; padding: 0px; margin:0px;  margin-bottom: 8px;  padding-top: 12px;}
h3 {font-family: Verdana; font-size: 11pt; color:#9BBE00;  font-weight: 500; padding: 0px; margin:0px;  margin-bottom: 6px;}
h4 {font-family: Verdana; font-size: 10pt; color:#ae1efe;  font: italic 100; padding: 0px; margin:0px;  margin-bottom: 3px;}
h5 {font-family: Verdana; font-size: 10pt;}
h6 {font-family: Verdana; font-size: 10pt;}


td h1, td h1 a {font-size: 15pt;}
td h2, td h2 a {font-size: 11pt;}
td h3, td h3 a {font-size: 10pt;}
td h4, td h4 a {font-size: 9pt;}
td h5, td h5 a {font-size: 9pt;}
td h6, td h6 a {font-size: 9pt;}

h1.loggedoff {font-family: Euromode, "Arial Narrow"; font-weight: 700; color: #ae1efe; position: absolute; top: 3%; right: 2%;}

/*  Link styling */
a:link    {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover   {text-decoration: underline;}

a.nav {font-family: Euromode, Verdana; font-weight: 500; font-size: 10pt; display: block; padding-bottom: 8pt;}

a.nav {color: white;}

a.helpLink {color: #777777; font: italic 100 8pt;}
a.helpLink:link    {text-decoration: underline;}
a.helpLink:visited {text-decoration: underline;}
a.helpLink:hover   {text-decoration: none;}

/* Header links */
h3 a {color:#9BBE00;  font-weight: 500; padding: 0px; margin:0px;  margin-bottom: 6px;}
h3 a:link    {text-decoration: underline; color:#9BBE00;}
h3 a:visited {text-decoration: underline; color:#9BBE00;}
h3 a:hover   {text-decoration: none; color:#9BBE00;}

h4 a {color:#ae1efe;  font: italic 100; padding: 0px; margin:0px;  margin-bottom: 3px;}
h4 a:link    {text-decoration: underline;}
h4 a:visited {text-decoration: underline;}
h4 a:hover   {text-decoration: none;}

td span a:link {color: #28166F; text-decoration: underline;}
td span a:visited {color: #28166F; text-decoration: underline;}
td span a:hover {color: #28166F; text-decoration: none;}

/* Text alignment and styling */
.left {text-align: left;}
.right {text-align: right;}
.center, .centre {text-align: center;}
.top {vertical-align: top;}
.italic {font-style: italic;}
.bold {font-weight: 700;}
.paleText {color: #777777;}
.red {color: red;}
.shaded {background: #AAAAAA;}
.shadedLite {background: #DDDDDD;}

/*  Style Element styles */
table.devShade tr td {background: #DDDDDD;font-size: 8pt; }
table.styleElement {font-size: 8pt; background: #DDDDDD; border-top: #999999 solid 2px; border-bottom: #999999 solid 2px; margin-bottom: 2px;}

.bdr {border: 1px solid black;}  /* Debugging style */

/*  Table styling */
table.contact {border: 0px; width: 100%; margin-top: 20px;}

td span {color: #28166F; font-weight: 700;}
td span.l2_lbl {color: #ae1efe; font-weight: 700;}

col#label {width: 30%; font-size: 9pt; font-weight: 700; color: #28166F; vertical-align: top;}
col#contactPoint {width: 80%; font-size: 9pt;}

/*  Form elements */
.helpText {color: #777777; font: 100 italic; display:none;}
.helpTextVisible {color: #777777; font: 100 italic;}
.depdtFormSecn {display: none;}
p.fm {padding: 0px; margin: 0px; margin-bottom: 4px;}
span.fmLabel, span.priceLabel, span.fmQtrCol {font-weight: 700; color: #28166F; width: 30%; vertical-align: middle;}
span.fmLabelNarrow, span.priceLabelNarrow {font-weight: 700; color: #28166F; width: 15%; vertical-align: middle;}
span.fmWideLabel {font-weight: 700; color: #28166F; width: 50%; vertical-align: middle;}
span.fmCol, span.priceCol {font-weight: 700; width: 30%; vertical-align: middle;}
span.fmWideCol {width: 60%; vertical-align: middle;}
span.fmQtrCol {width: 25%; vertical-align: middle;}
span.softLbl {color: #777777; font: italic 100 8pt;}
span.fmSecnBreak {height: 6px; width: 100%; border-bottom: 1px dotted #ae1efe; margin-bottom: 8px;}
span.ph_field {font-weight: 700; width: 32%; vertical-align: middle;}

span.priceLabel {height: 20px;}
span.priceCol   {height: 20px;}
span.priceCol p {vertical-align: middle;}
span.priceLabel h3 {vertical-align: middle;}


/*  Page divisions -----------------------------------------------------------*/
div#sideBanner {position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 30%;
  margin: 0px;
  padding: 0px;
  background: #28166F;
  z-index: 0;}
  
div#logo {position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 25%;
  z-index: 3;}
  
      /**
       * On the development version a note displays below the logo "DEVELOPMENT VERSION" 
       * to ensure the user is clear what version of Acronym 5 is currently on screen.  The 
       * style for that text note is defined here as it's part of the logo method which 
       * generates the HTML for the logo to be displayed
       */
       
      p.dev_vsn {width: 100%; text-align: center; font-weight: 700; color: white;}                     

div#navigation {position: absolute;  
  bottom: 3%;
  /* top: 70%; */
  width: 15%;
  left: 2.5%;
  z-index: 5;
  /* border: 1px solid black;*/}
  
div#logo img {width: 100%;}
  
div#stripes {position: absolute; 
  bottom: 5%;
  /* top: 70%; */
  left: 20%;
  width: 50%;}

span#topStripe {width: 100%; margin-bottom: 5px; background:#93D0F4;}
span#bottomStripe {width: 85%; background: #C5E5F9;}

div#maintext {position: absolute;
  bottom: 12%;
  left: 32.5%;
  height: 85%;
  width: 67.5%;
  overflow-y: auto;
  z-index: 4;
  padding-right: 6px;
  scrollbar-3dlight-color:#eee; 
  scrollbar-arrow-color:#eee; 
  scrollbar-base-color:#FFFFFF; 
  scrollbar-darkshadow-color:#eee; 
  scrollbar-face-color:#FFFFFF; 
  scrollbar-highlight-color:#C5E5F9; 
  scrollbar-shadow-color:#eee;}
  
div#maintext p {margin:0px; padding:0px; margin-bottom:8px;}
  
div#logon, div#logoff, div#cv_submit, div#moduleMenu {position: absolute; bottom: 2%; right: 2%;
   width: 25%;
   /* height: 15%; */
   border: 1px solid white;
   background: #cfcfcf;
   z-index: 10;}  
   
   div#logon td span {font-weight: 700; color: #FFFFFF;}
   
   div#logoff {display: none;}

/**
 * Maintext menu bar styles and layout
 */
span#maintext_menu {position: absolute; 
    /* visibility: hidden; */
    top: 90px;} 
    
span#documents_menu, span#tools_menu {position: absolute; 
    top: 90px;}  /* Not initially visible as the span it's contained in isn't visible */
  

a:link.mtxt_menu_bar {width: 80%;  height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    position: relative; left: 10%; 
    border-bottom: 1px solid #CCCCCC; vertical-align: middle;
    color: black;}

a:visited.mtxt_menu_bar {width: 80%;  height: 80px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    position: relative; left: 10%; 
    border-bottom: 1px solid #CCCCCC; vertical-align: middle;
    background: #FFFFFF;
    color: black;}
    
a:hover.mtxt_menu_bar {background: url("../images/mbar_bg.png") repeat-y; text-decoration: none;}

img.mtm_icon {float: left; margin-right: 40px;}

/** CV Style Form styling ----------------------------------------------------*/
span.styleFields {width: 100%; margin-right: 12px;}
span.pagePreview {width: 140px; height:198px; border:1px solid #CCCCCC;}

span.pageLayoutForm, span.styleFormSecn {display: none;}

#stylesRow {height: 160px; 
   width: 25%; 
   overflow-y:scroll;  
   background: #EEEEEE;
   padding: 6px;
   text-align: center;
   display: none;}
   
#stylesRow img {display: inline;}
   
td#styleInfo {vertical-align: text-top;}

/*  RGB To Hex styling (where required) --------------------------------------*/
td#colour_block {background: #FFFFFF; border: 1px solid silver;}



/*  DHTML workarounds  */
span.jsReqd        {display: none;}
span.jsReqdWarning {display: block; padding: 6px; background: #cccccc; border: 1px solid black;}

span.jsReqdWarning h3 {margin-top: 4px;}

span.hiddenForm {display: none;} /*  will be displayed using javascript */


.hidden {visibility: hidden;}
.notDisplayed {display:none;}


/* temporary styles - used for testing ---------------------------------------*/
#testDataButton {position: absolute; bottom: 0.5%; left: 30%;}


/* </STYLE> */