body {
      background:#fff;
      margin:0;
      padding:0;
      color:#000;
      font:x-small/1.5em Tahoma,Arial, Helvetica, sans-serif;
      voice-family: "\"}\""; voice-family:inherit;
      font-size:small;
      } html>body {font-size:small;
      }
/* -- This styles the format of the main web copy -- */
    p {
	font: 105%/1.8em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding-top: 0;
	margin-top: 0;
      }


/* -- This controls the layout and position of the breadcrumb trail -- */
    #navbar {
      float: right;  
      width: 98%;  
      padding: 10px;
      background-color: #FFFFFF;
      }
/* -- This controls the colour, styling, position and layout of the top of the page -- */
    #header {
      float:left;
      width:100%;
      background:#003399 url("bg.gif") repeat-x bottom;
      font-size:93%;
      line-height:normal;
      z-index: 2;
      }
/* -- This controls some of the styling of the menu.  header li and header a does the rest -- */
   #header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #header h2 {
      padding-top: 0px;
      padding-left: 0px;
      margin-right: 200px;
      margin-bottom: 5px;
      font: 130% tahoma, arial, verdana, sans-serif;
      font-weight: bolder;
      color: #FFFFFF;
      }
    #header li {
      float:right;
      background:url("left_both.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #003399;
      }
    #header a {
      float:left;
      display:block;
      width:.1em;
      background:url("right_both.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#000000;
      }
    #header > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */
    #header a:hover {
      color:#333;
      }
    #home #nav-home, #faq #nav-faq,
    #casestudies #nav-casestudies, #about #nav-about,
    #contact #nav-contact, #seminars #nav-seminars, #downloads #nav-downloads, #blog #nav-blog {
      background-position:0 -150px;
      border-width:0;
      }
    #home #nav-home a, #faq #nav-faq a,
    #casestudies #nav-casestudies a, #about #nav-about a,
    #contact #nav-contact a, #seminars #nav-seminars a, #downloads #nav-downloads a, #blog #nav-blog a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#333;
      }
    #header li:hover, #header li:hover a {
      background-position:0% -150px;
      color:#333;
      }
    #header li:hover a {
      background-position:100% -150px;
      }
/* -- This allows us to position the OPC logo -- */
    #logo {
      position: relative;
      top: 20px;
      left: 20px;
      }
/*  -- This allows us to position the company purpose statement -- */
    #keymessage {
        position: relative;
        top: -30px;
        left: 130px;
        width: 750px;   
      }

    #wrapper {
        top: 0px;
        right: 0px;
	width: 100%;
      z-index: 1;
      }

/* -- Code added in version 6 to float main web copy as columns.  This code also controls the colour of the main part of the page and of the right hand panel, plus the width of the right hand border --*/

    #outer {
        border-left: 20px solid #FFFFFF; /* Left hand column background */
        border-right: 300px solid #FFCC66; /* Right hand column background */
        background: #FFFFFF; /* main column background */
      }

    #inner {
        margin: 0;
        width: 98%;
      }

    #leftside {
        width 20px;
        margin-left: 20px;
        float: left;
        position: relative;
        z-index: 10;
        padding-left: 5px;
      }

/* -- This controls the width of the main web copy -- */
/*
    #content {

	margin-left: 16em;
	margin: 0px 270px 30px 20px;
	padding: 10px;
	margin-bottom: 20px;
      }
*/

/* -- Adding code in version 6 to position the left hand side panel for the main web copy */


    #content {
        float: left;
        width: 100%;
        position: relative;
        padding-right: 30px;
        margin-right: 20px;
        z-indez: 12;
      }

/* -- Code added in version 9 to position the welcome image and welcome text on the blog page -- */

    #welcomeimage {
        float: left;
        margin-right: 20px;
      }

    #welcometext {
        margin-left: 9em;
        position: relative;
      }

/* -- End of added code -- */


/* -- Code added in version 10 to position the quotations on the home page -- */

    #welch {
        float: left;
        margin: 20px 0px 20px 0px;
        background: #CCCCFF;
        border: 1px dotted #FF6600;
        padding: 7px 14px;
      }

    #coffman {
        float: left;
        margin: 20px 0px 20px 0px;
        background: #CCCCFF;
        border: 1px dotted #FF6600;
        padding: 7px 14px;
      }


/* -- End of added code -- */




/* -- end of new added code -- */

/* -- This formats the style and layout of font size h1 -- */

    #content h1 {
	text-align: left;
	font: 240% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #003399;
	padding-top: 0px;
      }

/* -- This formats the style and layout of font size h2 -- */

    #content h2 {
	text-align: left;
	font: 150% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #003399;
      }

/* -- This formats the style and layout of font size h3 -- */

    #content h3 {
	text-align: left;
	font: 100%/1.8em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: bolder;
      }

/* -- This formats the style and layout of font size h4 -- */

    #content h4 {
	text-align: left;
	font: 90%/1.8em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight: bolder;
      }

/* -- This formats the style and layout of font size h5 -- */

    #content h5 {
	text-align: left;
	font: 90%/1.8em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #000000;
      }

/* -- This formats the style and layout of bullet points -- */

    #content ul {
	list-style-type: disc;
      }
    #content li {
	font: 105%/1.8em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
      }

/* Code added to style the contact form on the contact page -- */

form {
	border: none;
	background-color: #CCCCFF;
	padding: 3px 6px 1px 6px;
	margin: 0;
}

form p {
	clear: left;
	margin: 0;
	padding: 0;
	padding-top: 10px;
}

form p label {
	float: left;
	width: 80%;
	font: 0.9em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

input.btn {
	color: #00008B
	background-color: #FFCCCC;
	border: 1px outset #00008B;
	width: 50px;
}

input.txt {
	color: #00008B
	background-color: #FFCCCC;
	border: 1 px solid #00008B;
	width: 200px;
}

select {
	width: 200px;
	color: #00008B
	background-color: #FFCCCC;
	border: 1px solid #00008B;
	width: 50px;
 
}

textarea {
	width: 200px;
	height: 100px;
	color: #00008B
	background-color: #FFCCCC;
	border: none;
}



/* -- End of added code -- */



/* -- This controls the folor and style of the the font used for FAQ questions */

    dt {
        font-weight: bolder;
        color: #FF6600;
        padding-top: 5px;
      }

    dd {
        padding-top: 3px;
        padding-bottom: 6px;
      }

    .return {
	font: 90%/1.8em Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-weight: bolder;
      }

    

/* -- This formats the style and layout of right hand side panel -- */

/* -- New code to use floating panels for web copy -- */


    #rightside {
        width: 260px;
        margin-right: -270px;
        float: left;
        position: relative;
        z-index: 11;
      }

/* -- end of new added code -- */

    #rightside p {
	font: 100% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
      }
	font-color: #000000;
	}
    #rightside h1 {
	font: 120% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-color: #FF6600;
	}
    #rightside h2 {
	font: 110% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-color: #000000;
      }

/* -- Code added to allow the form colours for the search box, contact form and newsletter signup to be changed independently -- */

#rightside form {
	border: none;
	background-color: #FFCC66;
	padding: 3px 0px 20px 0px;
	margin: 0;
}
 /* -- End of added code -- */

.adbox {
        padding: 4px 5px 2px 10px;
        margin: 10px 0.2em 10px 0.5em;
        border 1px dotted #003399;
        background-color: #FFCC66;
      }

.adbox h1 {
	font: 110% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-color: #000000;
        font-weight: bolder;
	}
.adbox h2 {
	font: 110% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-color: #000000;
        font-weight: bolder;
      }
/* -- Styling rules to format and position the footer text -- */
    #footer {
	width: 100%;
        position: relative;
        z-index: 13;
	border-top: 1px dotted #003399;
        margin-left: 20px;
	font: 90% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
        padding-top: 5px;
      }

    # footer p {
        padding-left: 1em;
      }

/* -- Code added to style the footer -- */

    #footer p {
        padding-left: 1em;
      }

    #footer ul {
      left-margin: 0px;
      padding: 5px 10px;
      list-style: none;
       }

    #footer li {
      float: left;
      display: inline;
      margin-left: 1.5em;
       }

.clear {
        clear: both;
      }

/* Mozilla bug workarounds for the floating columns */

    #outer > inner {
        border-bottom: 1px solid transparent;
      }

    #leftside {
        margin-right: 1px;
      }

    #rightside {
        margin-left: 1px;
      }

    #content {
        margin: 0 -3px 0 -2px;
      }


/* -- Code added to style and position the "question" buttons on the home page -- */
    #bigquestion {
        float: left;
        margin-left: 2em;
      }

    #bigquestion ul {
      margin:0;
      padding:10px;
      list-style: none;
      }

    #bigquestion li {
      float: left;
      display: inline;
      margin-left: 1.5em
      }

    #bigquestion a {
      display:block;    
      width: 230px;
      height: 100px;  
      background: url("bigquestion.gif") no-repeat;
      padding: 30px 10px 0px 15px;
      font-weight:bold;
      }

/* -- Styling rules to position the searchbox -- */
    #searchbox {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: #FF9900;
        border: #000000;
        padding: 20px 20px 0px 20px;
        visibility: hidden;
      }

/* -- Code added in version 9 to allow the search box background colour to be changed independently of that for the contact form and newsletter sign-up -- */

#searchbox form {
	border: none;
	background-color: #FF9900;
	padding: 3px 6px 20px 6px;
	margin: 0;
}

/* -- End of added code -- */

/* ===================================================================
/* 
/* =================   Stylesheet code changes   =====================
/*
/* ===================================================================
/*
/*
/* -------------------- Stylesheet version 1: ------------------------
/*
/* Created the stylesheet and main styles (colour palette, fonts and font-families, font sizes, header area (to contain the logo, company name, main message and company purpose) 
/*
/*
/* -------------------- Stylesheet version 2 changes: ----------------
/*
/* Added logo and code to position logo
/* Added styling for the logo, header code and tabbed navigation
/*
/*
/* -------------------- Stylesheet version 3 changes: ----------------
/*
/* Added code for the columns to contain the main web copy
/*
/*
/* -------------------- Stylesheet version 4 changes: ----------------
/*
/* Added code for breadcrumb trail and re-aligned the columns to fit with the navigation bar
/*
/*
/* -------------------- Stylesheet version 5 changes: ----------------
/*
/* Added search box code
/* Added footer code, although code has been stubbed out and will be picked up in next version
/* Added width variable to keymessage to get this text to break over 2 lines if the text size is enlarged by the visitor
/* Changed position of logo, keymessage and search box, to get them all to line up
/* Changed the padding settings for the search box accordingly
/*
/* 
/* -------------------- Stylesheet Version 6 changes: ----------------
/* 
/* Revised code to use floating panels to contain text
/* Added new code for footer text to nail it to the bottom of the page
/* 
/*
/* -------------------- Stylesheet version 7 changes: ----------------
/* 
/* Added styling for FAQ questions using <dl>, <dt> and <dd> commands
/* Updated the code controlling the highlighting for the tabbed navigation so that the correct page is shown as the current tab
/*
/* 
/* -------------------- Stylesheet version 8 changes: ----------------
/*
/* Added the "bigquestion" formatting, to style and position the buttons on the home page
/*
/*
/* -------------------- Stylesheet version 9 changes: ----------------
/*
/* Add code to allow the background colours for forms (search, newsletter and contact us) to be changed independently
/* Add code to position the welcome message and image on the "blog" page
/*
/*
/*
/* ==================================================================
/* ================================================================== */



#page_content {
	clear:both;
}

#full_page {
	position:absolute;
	left:0px;
	right:0px;
	width:100%;
	height:100%;
	background-image:url(/images/transparent_bg.png);
	background-position:top left;
	background-repeat:repeat;
	z-index:600;
}

#full_page #welcome_area {
	width:669px;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	border:2px #000000 solid;
	background-color:#ffffff;
	padding:0px;
	height:479px;
}

.home_page_box {
	float:left;
	width:30%;
	margin-right:2%;
	padding-left:1%;
}