﻿/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
	TEMPLATE NAME:		Envision
   TEMPLATE CODE: 	S-0013
   VERSION:          1.0          	
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; }

body {
	background: white;
	font: /*70%/1.5em*/ 11px Verdana, Tahoma, arial, sans-serif;
	color: #555; 
	text-align: center;
}

/* links */
a, a:visited {
	text-decoration: none;
	color: #2180BC;
	background: inherit;
}
a:hover {
	color: #88ac0b;
	background: inherit;
	text-decoration: underline;
}
/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;
	font-weight: Bold; 		
}
h1 {
	font-size: 130%;	
}
h2 {
	font-size: 120%;
	/*text-transform: uppercase;*/
	color: #88ac0b;
	border: 1px solid silver;
	background: url(headerbg.png) repeat-x;
	background-position:bottom;
}
h3 {
	font-size: 120%;
	color: #666666; 
}
h4
{
	font-size: 110%;
	font-weight: bold;
}


/* images */
img {
	border: 1px solid #E5E5E5;
	padding: 5px;
}

img.smallpadding
{
	padding: 2px;
}

img.nopadding
{
	padding: 0px;
}

img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}
ul li {
	list-style-image: url(bullet.png);
}

select
{
	border: #000000 thin solid;
}

.headercolumn 
{
	background: #ffd980 url(buttonbg.png) repeat-x 0 0;
	height: 29px;
	padding-left: 4px;
	padding-right: 4px;
	text-align: left;
	border-left: 1px solid #B6D59A;
	font-size:inherit;
	font-weight: Bold; 	
}

.panelheader 
{
	background: #ffd980 url(buttonbg.png) repeat-x 0 0;
	height: 24px;
	padding-left: 4px;
	padding-right: 4px;
	text-align: left;
	border-left: 1px solid #B6D59A;
	font-size:inherit;
}

/* start - table */
table {
	border-collapse: collapse;
}
th strong {
}
th 
{
	background: #ffd980 url(buttonbg.png) repeat-x 0 0;
	height: 29px;
	padding-left: 4px;
	padding-right: 4px;
	text-align: left;
	border-left: 1px solid #B6D59A;
	font-size:inherit;
}
th.centeralign {
	padding-right:0px;
	padding-left:0px;
	text-align:center;
}
th.rightalign {
	padding-right:4px;
	text-align:right;
}

tr {
	height: 25px;
}
tr.spacer {
	height: 0px;
}
td.rightmost {
	padding-left: 4px;
}
td.rightalign {
	padding-right:4px;
	text-align:right;
}
td.centeralign {
	padding-right:0px;
	padding-left:0px;
	text-align:center;
}
td {
	padding-left: 4px;
}

td.whitebordersrightmost {
	padding-left: 4px;
	border-right: 1px solid #FFF;
	border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff;
}
td.whiteborders {
	padding-left: 4px;
	border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff;
}

td.first,th.first {
	border-left: 0px;
}
tr.row-a 
{
	background: #F8F8F8;
}
tr.row-b 
{
	background: #EFEFEF;
}
tr.row-separator
{
	background: silver;
	height: 1px;
}

tr.row-error {
	background: #b22222;
	color: White;
}
tr.row-options
{
	background: #f5f5dc;
}

tr.row-error a
{
	color: yellow;
}

td.customtd {
}
/* end - table */

/* form elements */
label {
	font-weight:bold;
	margin:  5px 5px;
}
/*text boxes*/
input
{
	padding: 2px;
	font: normal 1em Verdana, sans-serif;
}

/*Multiline text box */
textarea {
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid dimgray;
	height:100px;
	display:block;
}

input.button, input.buttondisabled
{
	font: bold 12px Arial, Sans-serif;
	height: 24px;
	margin: 5px 5px 5px 0px ;
	padding: 2px 3px ;
	background: url(tab.png) repeat-x 0 0;
	
	border: gray thin solid;
	border-top: silver thin solid;
	border-left: silver thin solid;
	border-bottom: gray thin solid; 
}

input.button
{
	color: #000; 
}

input.buttondisabled
{
	color: #CCC; 
}
	
input.smallbutton
{
	font: bold 10px Arial, Sans-serif;
	height: 20px;
	/*margin: 5px 5px 5px 0px;*/

	color: #000; 
	background: url(smalltab.png) repeat-x 0 0;
	
	border: gray thin solid;
	border-top: silver thin solid;
	border-left: silver thin solid;
	border-bottom: gray thin solid; 
}
	
	
input.textbox
{
	border: gray 1px solid;
	color: black;
}

input.textboxright
{
	border: gray 1px solid;
	color: black;
	text-align:right;
}


input.textboxsmaller
{
	border: gray 1px solid;
	color: black;
	font-size: 12px;
}

/********************************************
   LAYOUT
********************************************/ 

#wrap {
	width: 1000px;
	background: #CCC url(content.png) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 945px;
	padding: 0; 
	margin: 0px auto;
}
#header {
	width: 1000px;
	position: relative;
	height: 95px;
	background: #CCC url(header.png) no-repeat center top;
	padding: 0;	
	color: #FFF;
	/* font-size: 14px; */
}

/* header links */
#header #header-links {
	position: absolute;
	top: 20px; right: 30px;	
	color: #C6DDEE;
	font-size: 10px;	
}
#header #header-links a {	
	color: #FFF;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #D4E59F;	
}

/* Main Column */

#NoScript {
	float: left;
	width: 99%;
	padding: 0; margin: 0 0 0 5px;
	display: inline;
	height:150px;
}

#NoScript h1{
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left:1px;
	font: Bold 180% 'Trebuchet MS' , Tahoma, Sans-serif;
	color: #696969;
	padding: 5px 0 5px 25px;
	/*border-bottom: 1px solid #EFF0F1;*/
	border-bottom: 1px solid silver;
	background: url(square.png) no-repeat 3px 50%;
}
#main {
	float: left;
	width: 99%;
	padding: 0; margin: 0 .5% 0 .5%; /*need both to display correctly in ie6 */
	display: inline;
}
#main h1
{
	margin-top: 1px;
	margin-bottom: 2px;
	margin-left: 1px;
	font: Bold 140% 'Trebuchet MS' , Tahoma, Sans-serif;
	color: #696969;
	padding: 5px 0 5px 25px;
	border-bottom: 1px solid silver;
	background: url(square.png) no-repeat 3px 50%;
}

#main h2
{
	margin-top: 2px;
	margin-bottom: 2px;
	font: Bold 110% 'Trebuchet MS' , Tahoma, Sans-serif;
	color: #696969;
	padding: 5px 5px 5px 5px ;
	text-align: left;
}

.GridStyle
{
	font-size: xx-small;
	font-size: 10px;
	border: 1px solid silver;
	overflow-x:hidden;
}
.GridPanelStyle
{
	font-size: 10px;
	border: 1px solid silver;
	overflow: hidden;
	overflow-x: hidden;
}

#Search label {
	font-weight: lighter;
}

#Search .SearchGrid
{
	width: 100%;
	height: 300px;
	overflow:auto;
	margin:0px;
	padding: 0 0 10px 0;

	overflow-x:hidden;	
}

#main #QHeader
{
	border-bottom: 1px solid silver;
}

#main #OHeader
{
	border-bottom: 1px solid silver;
}

/* Footer */	
#footer {
	color: #C6DDEE;
	position: relative;
	background: #CCC url(footer.png) no-repeat center top;
	clear: both;
	width: 1000px;
	height: 65px;
	text-align: center;	
	font-size: 92%;
	z-index:0;	
}
#footer a { 
	color: #FFF;
	text-decoration: none; 
}

#footer #powered_by
{
	text-align: center;
	overflow:hidden;
	position:absolute;
	margin-top:20px;
	background: url(powered_by.png) no-repeat center;
	width:81px;
	height:19px;
	/*top:0px;*/
	right: 170px;
	
}

#footer #power_logo
{
	text-align: center;
	overflow:hidden;
	position:absolute;
	margin-top:2px;
	background: url(fvlogo.png) no-repeat center;
	width:113px;
	height:53px;
	/*top:0px;*/
	left:830px;
	
}

#footer #footer-links {
	position: absolute;
	padding-top:20px;
	text-align:center;
	color: #C6DDEE;

	width:250px;
	right:375px;	
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

.nohorizbars
{
	overflow: hidden;
}

.waitimage
{
	width:55px;
	height:55px;

}

.login
{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left:auto;
	margin-right:auto;
}

.loginheader
{
	margin-top: 2px;
	margin-bottom: 2px;
	font: Bold 1.8em 'Trebuchet MS' , Tahoma, Sans-serif;
	color: #696969;
	padding: 5px 0 5px 0px;
	border-bottom: 1px solid #EFF0F1;
}

/** OPTIONS WIZARD FORMATTING **/

#optionswizard * {
	padding: 0px;
	margin: 0px;
}

#optionswizard .ow-table 
{
}

#optionswizard .ow-headerrow 
{
}

#optionswizard .ow-row {
	/* This works for Firefox, but not IE - I had to put the following in each TD*/
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}

#optionswizard .ow-questioncell {
	width: 180px;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}

#optionswizard .ow-imagecell {
	width: 30px;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}


#optionswizard .ow-optioncell {
	width: 290px;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}

#optionswizard .ow-inputcell {
	width: 150px;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
	vertical-align: top;
}

#optionswizard .ow-inputcell-table {
}

#optionswizard .ow-inputcell-row {
}

#optionswizard .ow-inputcell-cell {
	width: 145px;
}

#optionswizard .ow-checkbox {
}

#optionswizard .ow-textbox 
{
	padding:2px;
	border: gray 1px solid;
	color: black;
	height: 14px;
	
}

#optionswizard .ow-checkboxlist {
}

#optionswizard .ow-dropdownlist {
}

#optionswizard label {
	font-weight: lighter;
}

#optionswizard input 
{
	margin-right:3px;
}

#optionswizard .ow-optioncodeimage
{
	width: 80px;
	height: 80px;
}

#confirmation * {
	padding: 0px;
	margin: 0px;
}

#confirmation div
{
	/*margin-left: 1%;*/
	margin:auto;
	width:900px;

	padding:4px;
}

#confirmation .c-table 
{

	width:900px;
	
	border: solid 1px silver;
	margin-top:5px;
	margin-bottom:20px;
}


#confirmation .c-row-a {
	/* This works for Firefox, but not IE - I had to put the following in each TD*/
	border-top: #a9a9a9 1px solid;
	height:7px;
	padding:5px;
	background: #F8F8F8;
	border-bottom: #a9a9a9 1px solid;
}

#confirmation .c-row-b {
	/* This works for Firefox, but not IE - I had to put the following in each TD*/
	border-top: #a9a9a9 1px solid;
	background: #EFEFEF;
	height:7px;
	border-bottom: #a9a9a9 1px solid;
}

#confirmation .c-orderheadercell {
	width: 100px;
	padding-left: 3px;
}

#confirmation .c-messageheadercell {
	/*width: 400px;*/
	padding-left: 3px;
}

#confirmation .c-printheadercell {
	width:20px;
}

#confirmation .c-quotecell {
	/*font-weight: bolder; */ /* Removed to be consistant with other grids */
	vertical-align: text-top;
	font-size: xx-small;
	padding-left: 3px;
	padding-top: 4px;
	padding-bottom:4px;
	width: 200px;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}
#confirmation .c-ordercell {
	/*font-weight: bolder; */ /* Removed to be consistant with other grids */
	font-size: xx-small;
	padding-left: 3px;
		padding-top: 4px;
	padding-bottom:4px;
	width: 100px;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}
#confirmation .c-messagecell 
{
	font-size: xx-small;
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
	padding-left: 3px;
		padding-top: 4px;
	padding-bottom:4px;
}

#confirmation .c-printcell 
{
	border-top: #a9a9a9 1px solid;
	border-bottom: #a9a9a9 1px solid;
}

#confirmation label {
	font-weight: lighter;
}

#ErrorPage
{
	height: 200px;	
}
#ErrorPage #ErrorPath
{
	color: Red;	
}

.pricePopupBackgroundOrder
{
	border: 1px solid #000000;
	width: 385px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.pricePopupBackgroundQuote
{
	border: 1px solid #000000;
	width: 460px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.pricePopupForeground
{
	background-color: #dcdcdc;
	color: #003300;
	background-image: none;
}

.price
{
	color: #000000;
	font-size: 20px;
}

.errorPopupBackground
{
	border: 1px solid #000000;
	width: 305px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 200px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.errorPopupForeground
{
	background-color: #dcdcdc;
	color: #003300;
	background-image: none;
}

.imagePopupBackground
{ 
	border: 1px solid #000000;
	width: 305px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.imagePopupForeground
{
	background-color: #dcdcdc;
	color: #003300;
	background-image: none;
}

.invoicesPopupBackground
{
	border: 1px solid #000000;
	width: 700px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.invoicesPopupForeground
{
	background-color: #dcdcdc;
	color: #003300;
	background-image: none;
}

.routesPopupBackground
{
	border: 1px solid #000000;
	width: 700px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.routesPopupForeground
{
	background-color: #dcdcdc;
	color: #003300;
	background-image: none;
}

.optionsPopupBackground
{
	border: 1px solid #000000;
	width: 305px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 200px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.optionsPopupForeground
{
	background-color: #dcdcdc;
	color: #003300;
	background-image: none;
}

.smaller
{
	/*font-size: 80%;*/
	font-size: 12px;
}

.largetext
{
	font-size:xx-large;
}

.mediumtext
{
	font-size:large;
}

.smalltext
{
	font-size: xx-small;
}

.bolded
{
	font-weight: bold;
}

.emptydatatext
{
	font-weight: bold;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: large;
	padding: 0px;
	margin: 0px;
}

.calendar .ajax__calendar_container
{
	border: 1px solid #646464;
	background-color: #fffacd;
	color: #000000;
}

.calendar .ajax__calendar_other .ajax__calendar_day, .calendar .ajax__calendar_other .ajax__calendar_year 
{
    color: #808000;
}
.calendar .ajax__calendar_hover .ajax__calendar_day, .calendar .ajax__calendar_hover .ajax__calendar_month, .calendar .ajax__calendar_hover .ajax__calendar_year
{
	color: #000000;
}
.calendar .ajax__calendar_active .ajax__calendar_day, .calendar .ajax__calendar_active .ajax__calendar_month, .calendar .ajax__calendar_active .ajax__calendar_year 
{
    color: #000000;
}

.calendar tr
{
	height:0px;
}

.calendar td
{
	padding:0px;
}

.transparentbg {
    background-color:Gray;
	filter:alpha(opacity=40);
	opacity:0.4;
}        

select{font-size:100%;}


.unitHistoryPopupBackground
{
	border: 1px solid #000000;
	width: 650px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.rejectStatusPopupBackground
{
	border: 1px solid #000000;
	width: 650px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 200px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;
}

.containerDetailPopupBackground
{
	border: 1px solid #000000;
	width: 700px;
	background-color: #6699ff;
	/*opacity: 0.95;*/
	/*filter: alpha(opacity=95); /* IE's opacity*/
	overflow: auto; 
	height: 300px;
	z-index:1;
	overflow-x: hidden;
	overflow-y: scroll;	
}

/*.Test
{
	width: 600px;
	height: 400px;
	overflow:auto;
	overflow-x:hidden;
	background: #CCC url(FadingWhite.jpg) repeat-y center top;
	/*margin: 0 auto;
	'text-align: left;
}*/

.ibtn
{
	cursor:pointer;
	border-width:0px;
}

/* Accordion */

.accordionHeader
{
	border: 1px solid silver;
	background: #ffd980 url(buttonbg.png) repeat-x 0 0;
	margin-top: 5px;
	cursor: pointer;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-right: 0px;
	margin-left: 0px;
}

.accordionContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
}

.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	width:250px;
}

.mediumLabel
{
	font-size:medium;
	padding:2px;	
}
