Wizard and CRUD Applications to Build other CRUD Applications

/* ######### CSS for Evolutility web site & web control ######### */
/* (c) Olivier Giulieri 2003-2008 */


/* ######### Evolutility.com ######### */
BODY {
	margin: 0;
	padding: 0; 
	background-color: #fff; 
	color:#3c3c3c;
}
BODY, td,input,textarea,select { 
	font-size: 11pt;
	font-family: "trebuchet ms", helvetica, sans-serif;	
}
A,A:visited,A:active{ COLOR: #0066CC;  }
A:hover {COLOR: #FF6600; text-decoration:underline;}
.bluetop {
	background: #275480 url('pix/bbgev.gif') repeat-x;
	background-color:#275480; 
	height:87px;
}
.redtop {
	background: #275480 url('pix/bbgev-red.gif') repeat-x;
	background-color:#922c14; 
	height:87px;
}
.logo{
position: absolute;
border:0;
top:20px;
left:16px;
}
.logo2{
position: absolute;
border:0;
top:14px;left:26px;
height:94;width:397;
z-index:2000
}
table.B{
width:100%;
border:0; 
background: #fff url('pixevo/n2.gif') 0px 1px repeat-x;	
} 
td.B{
padding:26px
} 
.LightGrey{
background:#F5F5F5;
}
.hsep{
	width:5px;
	background: url('pix/sep.gif') repeat-y;
}
h1,h2,h3,h4{
color: #184366; 
letter-spacing: -1px;
text-transform: lowercase;
}
#menu{
position: absolute;
top:45px;
right: 20px;
bottom: 0px;
min-width:410px;
} 
#menu a{ 
display: block;
padding: 0.8em 1.2em 0.7em 1.2em;
background: #fff url('pixevo/n4.gif') repeat-x;
border: solid 1px #fff;
color: #616161;
font-weight: bold; 
font-size: smaller;
text-decoration: none;
}
#menu a.active, #menu a.active:hover{
background: #FF790B url('pixevo/n3.gif') repeat-x;
color: #fff;
border: solid 1px #DB7623;
} 
#menu a:hover{
background: #FFF794 url('pixevo/n5.gif') repeat-x;
color:#000000;
} 
ul.links
{
margin-left:5px;
list-style: none;
font-size:smaller;
}
ul.links li{
padding-bottom:5px
}
ul.links li a.sel:active,ul.links li a.sel:visited{
 font-weight:bold;
 color:#2079CC;
}

ul.links2
{
border: none; 
left:-20px;
position:relative; 
} 

ul.bullet
{
margin-left:16px;  
}
ul.bullet li
{ 
padding-bottom:10px; 
}

ul.indent
{
margin-left:5px;
list-style: none;
margin-left:16px;  
}
ul.indent li
{ 
padding-bottom:10px; 
}

div.footer
{ 
text-align: center;
font-size:smaller;
color:Gray;
border-top: dotted 1px #E1E1E1;
margin-top: 1.0em;
margin-bottom: 1.0em;
padding-top: 1.0em;
}

.tabAll {
	background: #E7E7E7 url(PixEvo/bgt.gif);  
	position:relative;  
	padding:1;
	height:428px;
  background-color :transparent; 
  background-image:url(pix/vtabs.gif);background-repeat:no-repeat; padding: 0 0 0 24px;}
.tabBuy{background-position: -10 40;}
.tabTools{background-position: -310 40;}
.tabDemo{background-position: -610 40;}
.tabDownload{background-position: -460 40;
	height:628px;}

.groupedColumns
{
	padding:0;
	border:0;
	width:100%; 
}
/* ######### Evolutility documentation ######### */
.code 
{ 
	background-color:#F5F5F5;
	color : #000000;
	text-decoration: none;
	font-family:Courier;
	border: solid 1 #A2A2A2;
    padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 5px;
    padding-right: 5px;
}
.xmlElem,.ctrProp{font-weight: bold;color:#990000;}
.xmlAttr{color: #990000;}
.xmlVal{font-weight: bold;}
.xmlAttrField{color: #990000;
	background-color:#FFFFFF; 
    width:100%; 
}
.sql {
	font-family: Courier;
	background-color: #F3F3F3;
}
 
/* ######### Evolutility control ######### */
div.Evo{
	width:100%;
	margin:0;
	padding:0;
	border-collapse:collapse;
    border:solid 1px #bbbbbb; 
    background-color: #F5F5F5; 
	}
div.Evo TR{vertical-align:top}
img.icon{
	margin-left:4px; margin-right:4px; border:0}
img.tool{
	margin-left:4px;
	border:0}
.Panel{ 
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=Gainsboro); 
    border:solid 1px #bbbbbb; 
    background-color:#F3F3F3;
}
.PanelLabel{
	background: #DEE7F7 url(PixEvo/bgpt.gif);
	font-size: small; 
	padding-bottom:0; 
	position:relative; 
}
.PanelLabel2{
	color:Navy;
	background-color:#E0E0E0;
	font-size: smaller; 
	font-weight:bolder;
	position:relative; 
} 
.header{
	font-weight:bold
}
.Msg{ 
    border:solid 1px #bbbbbb;  
    background-color:#F3F3F3;
}
.right{
	text-align:right
}
.center{
	text-align:center
}
.toolbar{
	background: #E7E7E7 url(PixEvo/bgt.gif); 
	height:20px;
	width:100%;
	position:relative; 
	font-size:smaller;
	padding:1}
.toolbar span {color:#808080;} 
.toolbar span, .toolbar a, .ico{
 text-decoration:none;font-family: "trebuchet ms", helvetica, sans-serif; font-size:10pt;
  border:solid 1px transparent;
  background-color :transparent; background-image:url(pixevo/evolui.gif);background-repeat:no-repeat; padding: 0 0 0 24px;}
.toolbar a, .toolbar a:hover{color:#000000;}
.toolbar a:hover {text-decoration:none;background-color:#f5f5dc;border:solid 1px #888888}
span.nav{position:absolute;top:0;right:0px;background-image:none}
a.new{background-position:0 0;}
a.edit{background-position:0 -21;}
span.edit {background-position:0 -42;}
a.view{background-position:0 -63;}
a.del{background-position:0 -84;}
span.del{background-position:0 -105;}
a.search{background-position:0 -126px;}
a.searchp{background-position:0 -147px;}
a.sel{background-position:0 -168px;}
a.print{background-position:0 -189px;}
a.all{background-position:0 -210px;}
a.logout{background-position:0 -231px;}
a.copy{background-position:0 -246px;}
a.customize{background-position:0 -757px;}
a.nav1{width:20;background-position:0 -274px;}
span.nav1{width:20;background-position:0 -358px;}
a.nav2{width:20;background-position:0 -295px;}
span.nav2{width:20;background-position:0 -379px;}
a.nav3{width:20;background-position:0 -316px;}
span.nav3{width:20;background-position:0 -400px;}
a.nav4{width:20;background-position:0 -337px;} 
span.nav4{width:20;background-position:0 -421px;} 
span.nav0 {background-image:none;width:0;padding:0 0 0 0}
span.nav9 {background-image:none;padding:0 0 0 105}
span.nav9ff {background-image:none;padding:0 0 0 105}
span.navp{position:absolute;top:-2;right:0px;background-image:none}

a.Calendar{height:20;width:20;margin-bottom:6px;background-position:0 -738px;}
a.Calendar:hover{background-position:-22px -738px;}

a.panelOpen{height:20;width:20;background-position:0 -441px;}
a.panelClose{height:20;width:20;background-position:0 -462px;}
a.panelOpen:hover{background-position:-26px -441px;}
a.panelClose:hover{background-position:-26px -462px;}

a.MLbigger,a.MLsmaller{height:4;width:5;padding:0 0 0 14}
a.MLbigger{background-position:0 -702px;margin-left:5}
a.MLsmaller{background-position:0 -718px;} 
a.MLbigger:hover{background-position:-21px -702px;}
a.MLsmaller:hover{background-position:-21px -718px;}

a.arrUp,a.arrDown{height:4;width:5;padding:0 0 0 14}
a.arrUp{background-position:0 -585px;margin-left:5}
a.arrDown{background-position:0 -601px;} 
a.arrUp:hover{background-position:-18px -585px;}
a.arrDown:hover{background-position:-18px -601px;}

.main{
	background: #DCDCDC;
	border: 1px;
	border-color: Gray;
	border-style:solid;
}
.rowHeader,.dpDayTD{
	background: #DEE7F7 url(PixEvo/bgpt.gif);
	white-space: nowrap;
	font-size: smaller ; }
.rowHeader TD{
	white-space: nowrap;
}	
.rowEven{
	background-color:#ECF0F6;
	vertical-align:top
}   
.rowOdd{
	background-color: #F7F7F7;
	vertical-align:top
}
.holder,.holder2{
	border-collapse:collapse;
	border:0;
	width:100%;
}
.holder tr td{
	padding: 2px 3px 2px 3px;	
}
.holder2 tr td, div.holder2{ 
	padding: 12px 13px 12px 13px;	
}
.FieldLabel{
	color:#404040;
	font-size: smaller ;
}
.FieldLabelEdit{
	color: Gray;
	font-size: 1em; 
}  
.field, .fieldreadonly, .fieldmain , .fieldmain2{
	color:#000000;
	background-color:#FFFFFF; 
    width:100%;  
	text-align:left; 
}
 
/* .fieldImg 
{
	border:solid 6 white
}  */
.FramedImg{
	border:solid 6 white
}  
.field,.fieldew{
	padding-left:2px;
	border-width:2px;
}
.field80{
	width:80%;
}
.fieldew{
	color:#000000;
	background-color:#FFFFFF; 
	text-align:left;
}
.fieldreadonly{
	padding-left:3px;
	border-style:  none;	 
}
.FieldInvalid{
    background-color:#FFCCCC; 
}
.fieldmain{ 
  font-weight:bolder
}
.button{
	background: #EDEDED url(PixEvo/bgb.gif);
	border: solid 1 #cccccc;
	padding:2;margin:5;
	cursor:hand;
} 
.required{
	margin-left:3px;
	color:#FF0000;
	font-weight:bold;
}
.calendar{
	border:0;
	width:16px;height:16px;
}
.helptip{
	 FONT-SIZE: 9px; COLOR: #666666;
} 
.tabBar{ 
	border:0; 
}
.tabholder{
	width:100%;
	border-bottom:solid 1 #bbbbbb; 
}
.tab, .tabSelected{
	color: #000000; 
	height:30px;
	border-left: 1px outset #bbbbbb; 
	padding: 6px 8px 6px 8px;
	text-decoration:none;
	margin-left:3px;
	margin-top:5
}	
.tab{
	background-color:#EDEDED;
	border-top: 1px outset #bbbbbb;
	border-right: 1px solid #bbbbbb; 
	cursor: hand;
}
.tab:visited, .tab:active, .tab:hover, .tabSelected:active, .tabSelected:visited{
	color:#000000;
	text-decoration:none;
}
.tab:hover{
	background-color:#f5f5dc;
}	
.tabSelected{ 
	background-color:#F3F3F3;
	font-weight: bold;  
	border-top: 2px outset #bbbbbb;
	border-right: 2px outset #bbbbbb;
}
.queries li { line-height:30px}
.editGrid{
	widows:100%;
	border-collapse:collapse;
	border-style:solid;
	border-color:#808080;
}
#EvoEditGrid_zz{
	margin:5px;
}
div.ColorBox{height:20;width:20;border:solid 1 #808080;}  
div.LB_overlay{
    display: none;
    position: absolute;
    top:0;left:0;width:4000;height:4000;
    background-color: gray;
    z-index:1001;
    -moz-opacity: 0.7;
    opacity:.70;  
    filter: alpha(opacity=70);
} 
div.LB_content{
    display: none;
    position: absolute;
    top:25%;left:25%;width:50%;
    padding: 16px;
    border: 4px solid #FFCCCC;
    background-color: white;
    z-index:1002;
    overflow: auto;
} 

/* ######### Date Picker #########  Original DatePicker from Julian Robichaux -- http://www.nsftools.com  */
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD{
	border: 1px solid #ece9d8;
}
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD{
	background-color: #CCCCCC;
	border: 1px solid #AAAAAA;
}
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover{
	background-color: #f5f5dc;
	border: 1px solid #888888;
	cursor: pointer;
	color: red;
}
/* additional style information for the text that indicates the month and year */
.dpTitleText{ 
	color: gray;
	font-weight: bold;
}
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight{
	color: #4060ff;
	font-weight: bold;
}

/* ######### Menu #########   from http://javascript-array.com  */
#sddm{
	margin: 0;
	padding: 0;
	z-index: 30;
	position:absolute;top:0;right:60 }
 
#sddm li
{	margin: 0;
	padding: 0;
	list-style: none;
	float: left; }

#sddm li a
{	display: block;
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	background: #5970B2;
	color: #FFF;
	text-align: center;
	text-decoration: none}

#sddm li a:hover
{	background: #49A3FF}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2}
#sddm div a
{	position: relative;
	display: block;
	margin: 0;
	padding: 4px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #FFFFFF;
	color: #0e0e0e; }
#sddm div a:hover
{	background: #f5f5dc;
 }

.imgwrap1, .imgwrap2, .imgwrap3 {
  display:inline-table;
  /* \*/display:block;/**/
}
.imgwrap1 {
  float:left;
  background:url(pixevo/shadow.gif) right bottom no-repeat;
}
.imgwrap2 {
  background:url(pixevo/corner_bl.gif) left bottom no-repeat;
}
.imgwrap3 {
  padding:  0 6px 6px 0;
  background:url(pixevo/corner_tr.gif) right top no-repeat; 
}
.imgwrap3 img{ 
  border:solid 6 white
}	

/* DHTML Window Widget- By Dynamic Drive, available at: http://www.dynamicdrive.com */

.dhtmlwindow{
position: absolute;
border: 2px solid black;
visibility: hidden;
background-color: white;
}

.drag-handle{ /*CSS for Drag Handle*/
padding: 1px;
text-indent: 3px;
font: bold 14px Arial;
background-color: #91AAC4;
color: white;
cursor: move;
overflow: hidden;
width: auto; 
}

.drag-handle .drag-controls{ /*CSS for controls (min, close etc) within Drag Handle*/
position: absolute;
right: 1px;
top: 2px;
cursor: hand;
cursor: pointer;
}

* html .drag-handle{ /*IE6 and below CSS hack. Width must be set to 100% in order for opaque title bar to render*/
width: 100%;
}

.drag-contentarea{ /*CSS for Content Display Area div*/
border-top: 1px solid brown;
background-color: white;
color: black;
height: 150px;
padding: 2px;
overflow: auto;
}

.drag-statusarea{ /*CSS for Status Bar div (includes resizearea)*/
border-top: 1px solid gray;
background-color: #F8F8F8;
height: 13px; /*height of resize image*/
}

.drag-resizearea{ /*CSS for Resize Area itself*/
float: right;
width: 13px; /*width of resize image*/
height: 13px; /*height of resize image*/
cursor: nw-resize;
font-size: 0;
}