/*     JBVisions Styles      */

/* -------------------------------------------
            Global Styles
---------------------------------------------- */
html, body {background-color:#fff;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#333;
	margin:0; padding:0; border:0;
}
body {font-size:62.5%;
}

acronym, abbr, .notate {cursor: help; border-bottom: 1px dotted #f90;}

.orangesmall {color:#f60; background-color:inherit; font-size:100%;}
.orangebold, label {color:#f90; background-color:inherit; font-weight:bold;}
.greysmall {color:#333; background-color:inherit; font-weight:normal;font-size:80%;}
.greybold {color:#ccc; background-color:inherit; font-weight:bold;}
.creamback {color:inherit; background-color:#ffc;}
.peachback {color:inherit; background-color:#ff3;} /* changed for hi-vis */
.visback {color:#ff3; background-color:#333;} /* changed for hi-vis */

select {font-size:120%;}
input, textarea {background-color:#fff;color:#333;font-size:120%;}
input:focus, select:focus, textarea:focus {background:#ff0;}
input:hover, select:hover, textarea:hover {background:#ff0;}
a:link {color:#9f3; background-color:inherit; text-decoration:underline;}
a:visited {color:#9f3; background-color:inherit; text-decoration:underline;}
a:focus {color:#ff0; background-color:inherit; text-decoration:none;}
a:hover {color:#ff0; background-color:inherit; text-decoration:none;}
a:active {color:#ff0; background-color:inherit; text-decoration:none;}

blockquote {
	margin:4% 0% 0% 0%;
	padding:4px 5px 0px 12px;
	border:0;
	background-image: url('/images/hoquotes.gif');
	background-position: left top;
	background-repeat: no-repeat;
}
blockquote p {border:0; margin:0; padding:0;text-indent:5px;}
blockquote p {
	background-image: url('/images/hoquotesend.gif');
	background-position: right bottom;
	background-repeat: no-repeat;
}
em {font-weight:bold;color:#f60; background-color:inherit; font-size:100%;font-style:normal;}
pre {font-weight:bold;color:#fc0; background-color:inherit; font-size:130%;font-style:normal;}
cite {color:#fc0;background-color:inherit;font-style:normal; font-family: Arial, sans-serif;
}
.standout {font-size:140%;font-weight:bold;color:#f60;background-color:#333;text-align:left;text-transform:uppercase;}
.standout2 {font-size:140%;font-weight:bold;color:#f90;background-color:#333;text-align:left;text-transform:uppercase;
	padding:0% 0% 0% 5%;}
.standout3 {font-size:140%;font-weight:bold;color:#fc9;background-color:#333;text-align:left;text-transform:uppercase;
	padding:0% 0% 0% 10%;}
.portbox {clear:both;
	margin:0% 0% 3% 0%;
	overflow:hidden;}
.codeblock {border:4px ridge #ccc;color:#333;background-color:#fff;margin:0% 5% 0% 5%;padding:2%;}
/* ----------------------------------------------
    Faux columns to hold the side border images
    - outer1 holds the left border image
    - outer2 places the right border image
    - container holds the entire page content
------------------------------------------------- */

#outer1 {
	border: 0 none; width:95%; margin:auto;
	background-image: url('/images/leftborder.png');
	background-position: left top;
	background-repeat:repeat-y;
	background-color:#fff;
	color:#fc9;
	/* this is to force IE5/6 to resize from smallscreen stylesheet setting */
	/* width:expression(document.body.clientWidth > 97? "95%": "auto" ); /* this is to force IE5/6 to use a max width  */
}
#outer2 {
	border: 0 none; width:100%; margin:auto;
	background-image: url('/images/rightborder.png');
	background-position: right top;
	background-repeat:repeat-y
}

#container {
	border: 0; width:95%;margin:auto;
}

/* ----------------------------------------------
    Navigation for accessibility at the top
------------------------------------------------- */
#barcontainer {width:93%;margin:auto;}

#accessbar {font-size:130%;
	font-weight:bold;
	list-style-type:none;
	text-align:right; 
	margin:auto;
	padding:5px 0px 5px 0;
	float:right;
}

#accessbar ul, #accessbar li {display:inline;
	margin:0 0 0 10px;
}

#accessbar a:link, #accessbar a:visited {
	padding:8px 5px 8px 5px;
	margin-left:1px;
	text-decoration:underline;
	color:#333;
	background-color:inherit;
}

#accessbar a:focus, #accessbar a:hover, #accessbar a:active {
	background-color:#fc6;
	color: #fff;
	background-image: url('/images/omenuback.jpg');
}

/* for the tooltips on the switcher */
#info {margin:2% 0% 0% 0%;}

a.info{font-size:110%;
	font-weight:bold;
    position:relative; /*this is the key*/
    z-index:24; background-color:inherit;
    color:#000;
    text-decoration:none}

a.info:focus, a.info:hover, a.info:active{z-index:25;background:#fff;color:#f90;}

a.info span{display: none}

a.info:focus span, a.info:hover span, a.info:active span{ /* the span will display just on :hover state */
    display:block;
    position:absolute;
    top:20px; left:-50px; width:150px;
    padding:4px;
    background-color:#333; color:#fff;
    border:3px solid #f60;
    font-weight:bold;
    font-size:110%;
    text-align: center;}
/* -------------------------------
Hide switcher for current style
------------------------------- */
.hivis {
	display:none;
}

/* ---------------------------------------------
    The heading block with picture and text
------------------------------------------------ */
#headtext { background-color:#333;
	color:#fc9;
	font-family:Times, Arial, Tahoma, Verdana, Helvetica, sans-serif;
	padding:0; margin: auto; width: 93%; clear:right;
	overflow:hidden;
}

#headtext h1, #headtext h2 { 
	border-bottom:2px solid #ccc;
}
.dark {color:#333;background-color:inherit;font-size:20%;}
#headtext h1 {
	color:#ccc;
	background-color:inherit;
	font-size:450%;
	font-weight:bold;
	text-indent:35px;
	margin:8% 2% 0% 0%; 
	letter-spacing:-1px;
}
 
#headtext h2 {
	color:#fc6;
	background-color:inherit;
	font-size:200%;
	text-indent:5px;
	background-image: url('/images/osmalleye.gif');
	background-position: right top;
	margin:0% 2% 0% 45%; 
	background-repeat:no-repeat;
}
/* ----------------------------------------
     The horizontal navigation bar
------------------------------------------- */

#hnavbar {
	background-color:#ccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:150%;
	font-weight:bold;
	text-align:right;
	text-transform:uppercase;
	color:#fff;
	background-image: url('/images/smenuback.jpg');
	padding:10px 0 10px 0;
	width:93%; margin: auto;clear:both;
}

#hnavbar ul, #hnavbar li {display:inline;}

#hnavbar a:link, #hnavbar a:visited {
	padding:3px 5px 3px 5px;
	text-decoration:none;
	color:#222;
	background-color:inherit;
}

#hnavbar a:focus, #hnavbar a:hover, #hnavbar a:active {
	background-color:#fc6;
	color: #fff;
	background-image: url('/images/omenuback.jpg');
}

/* -------------------------------------------- */
/* This is to set up the current page indicator */
/* -------------------------------------------- */
body#home a#homenav,
body#design a#designnav,
body#service a#servicenav,
body#portfolio a#portnav,
body#pricing a#pricenav,
body#contact a#contactnav,
body#search a#searchnav,
body#access a#accessnav,
body#webby a#webbynav,
body#hang a#hangnav,
body#tabl a#tablenav,
body#switch a#switchnav,
body#use a#usenav,
body#tower a#towernav,
body#round a#roundnav,
body#privacy a#privnav,
body#nowrap a#nowrapnav,
body#freebie a#freebienav,
body#samples a#samplenav { color: #fff;
	background: #f90 url('/images/omenuback.jpg');
	text-decoration:none;
}

/* ---------------------------------
    This is the main content block 
   --------------------------------- */
#contentblock {color:#fc9;
	background-color:#333;
	width:93%;
	clear:both;
	margin: 9px auto 0px auto;
}

/* ---------------------------------
    This is the left inner content
   --------------------------------- */
.blurbbox {float:left;
    color: #fff;
	background-color:inherit;
    font-size:180%;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	border:1px solid #ca2;
	background-image:none;
	background-position:bottom left;
	background-repeat:repeat-x;
	width:76%;
	padding:0;
	margin: 0;
	text-align:justify;
	overflow:hidden;   /* this is to stop the right column from breaking out of the container in FF */
}
.blurbbox p, .blurbbox li, .blurbbox dl {padding: 0% 5% 0% 5%;}
.blurbbox ul  {padding: 0% 0% 0% 10%;}
.blurbbox dt {font-weight:bold; color:#f60;background-color:inherit;margin:20px 0 10px 0;}
.blurbbox dd {padding:10px 0 10px 0;}
.blurbbox form {padding: 3% 5% 5% 5%;}
.blurbbox fieldset {border:0;}
.blurbbox legend {display:none;}
.blurbbox h3, .blurbbox h4, .blurbbox h5 {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	letter-spacing:-1px;
	color:#f93;
	background-color:#333;
	border-bottom:2px solid #ccc;
	background-image: url('/images/osmalleye.gif');
	background-position: 99% 1% ;
	background-repeat:no-repeat;
	margin-left:4%; margin-right:3%; margin-top:6%; margin-bottom:2%
}
.blurbbox h3 {font-size:180%;}
.blurbbox h4 {font-size:130%;background-image:none;}
.blurbbox h5 {font-size:110%;background-image:none;border:0;}
q { margin:0px 0px 0px 10px;
	padding:12px;
	background-image: url('/images/hoquotes.gif');
	background-position: left top;
	background-repeat: no-repeat;font-weight:bold; }
#contskip { color: #333;
	background-color:#fc9;
}
dt strong {
  color : #ff0;background-color:inherit;
}
/* Start table structure */
#Summary, #Caption {
	width: 28em;
}

.tablestyle {
	width: 90%;
	margin: 2% 0% 2% 5%;
	border: solid #666;
	border-width: 1px 0 0 1px;
	border-collapse: collapse;
}

.tablestyle th, .tablestyle td {
	border: solid 1px #666;
	padding: 0.2em;
}
/* End table structure */

/* Start table colour scheme  */
.tablescheme, .tablescheme th, .tablescheme td {
	border-color: #666;
}

.tablescheme .even {
	background-color: #dfc; color:#000;
}

.tablescheme th, .tablescheme thead td {
	background-color: #B1B1B1;color:#fff;
}

.tablescheme th.firstColumn {
	background-color: #D1D1D1; color:inherit;
}
/* End table colour scheme  */
/* ----------------------------------
    This is the right content column 
   ---------------------------------- */
#rightbar {
	float:right;
    color: #fff;
    font-size:160%;
	font-family:Arial, Verdana, Helvetica, sans-serif;
	border:1px solid #ca2;
	padding:25px 5px 0 5px;
	background-color:inherit;
	background-image: none;
	background-position: top right;
	background-repeat:no-repeat;
	width:20%;
	margin: 0% 0% 0% 1%;
	text-align:left;
}

#rightbar h2, #rightbar h3 {
	font-family:Arial, Verdana, Helvetica, sans-serif;
	font-size:140%;
	color:#f93;
	background:inherit;
	letter-spacing:-1px;
	border-bottom:2px solid #ccc;
	background-image:none;
	padding:10px 0 0 0;
	margin:0;width:95%;
}

#rightbar h3 {font-size: 110%;}

#rightbar li {list-style-type:none;
	margin: 0% 0% 0% -14%;}

/* -----------------------------
    miscellaneous styles
-------------------------------- */

.imgleft {float:left;
	border:0;
}

.portimg {margin: 0% 3% 0% 0%;
	border:1px solid #ccc;
	float:left;
}
.iwa {
	text-align:center;}

/* -----------------------------
    footer
-------------------------------- */

#footer {font-size:110%;
	font-weight:bold;
	list-style-type:none;
	text-align:right; 
	margin:auto;
	padding:0px 0px 10px 0;
	width:98%;
	clear:both;
}

#footer ul, #footer li {display:inline;
	margin:0 0 0 10px;
}

#footer a:link, #footer a:visited {
	padding:8px 5px 8px 5px;
	margin-left:1px;
	text-decoration:underline;
	color:#fff;
	background-color:inherit;
}

#footer a:focus, #footer a:hover, #footer a:active {
	background-color:#fc6;
	color: #fff;
	background-image: url('/images/omenuback.jpg');
}
#footer img {border:0;}