﻿/*
 * RoREN v2.0 stylesheet
 * Copyright (C) 2009 RoREN Development S.A.
 */
/* FORM ELEMENTS DEFINITIONS */
/* form title */
div#formBody div.formTitle {
    width:                  100%;
    height:                 28px;
    background-image:       url("../slices/roren_formtitle_bg.gif");
    background-position:    top;
}
div#formBody div.formTitle span {
    margin:                 4px 0px 0px 5px;
    font-family:            Tahoma,sans-serif;
    color:                  #FFFFFF;
    display:                inline-block;
}
/* three columns div */
div.threeColsForm {
    margin:             5px 0px 10px 0px;
    width:              772px;
    border:             0px solid #ccc;
}
div.threeColsForm div.leftCol {
    width:              257px;
    float:              left;
}
div.threeColsForm div.middleCol {
    width:              257px;
    float:              left;
}
div.threeColsForm div.rightCol {
    width:              257px;
    float:              right;
}
/* form header table */
div#formHeader table.fields {
    border-collapse:    collapse;
}
div#formHeader td.label {
    padding:            6px 3px 0px 0px;
    text-align:         right;
    vertical-align:     top;
    font:               normal bold 8pt Arial, sans-serif;
}
div#formHeader td.field {
    padding:            3px 0px 0px 3px;        
    margin:             1px 0px 1px 0px;
    vertical-align:     top;
}
div#formHeader input[type="text"] {
    border:             1px solid #BABCBE;
    font-size:          9pt;
    font-family:        Arial, sans-serif;
    background-color:   #F3F6F8;
}
div#formHeader input[type="text"]:focus {
    background-color:   #FFFFFF;
}
div#formHeader input[type="text"].xl {
    width:             240px;
}
/* form footer */
div#formFooter .buttons {
    float: right;
}
.buttons a {
    margin: 2px 4px 0px 0px;
}
/* three columns table */
div#formBody table.threeColsForm {
    border-collapse:    collapse;
    width:              100%;
    border:             0px solid #ccc;
}
div#formBody table.threeColsForm td {
    border:             0px solid #000;
}
div#formBody table.threeColsForm td.label {
    padding:            6px 6px 0px 0px;
    width:              115px;
    text-align:         right;
    vertical-align:     top;
    font:               normal bold 8pt Arial, sans-serif;
}
div#formBody table.threeColsForm td.field {
    padding:            3px 0px 0px 3px;        
    margin:             1px 0px 1px 0px;
    vertical-align:     top;
}
div#formBody table.threeColsForm td.required {
    padding:            3px 0px 1px 2px;        
    margin:             1px 0px 1px 0px;
    border-left:        solid 3px red;             
}
div#formBody div.threeColsForm td.checkBoxField {
    padding:            0px;
    vertical-align:     top;
    font:               normal bold 8pt Arial, sans-serif;
}
div#formBody div.threeColsForm div.radiobox {
    font:               normal 9pt Arial, Tahoma, Verdana, sans-serif;
}
div.radioContent {
    padding: 8px 0px 0px 18px;
}
div#formBody div.threeColsForm td.checkBoxOption {
    font:               normal bold 8pt Arial, sans-serif;
    width:              9%;
}
/* form lists */
div#formBody table.threeColsList td.label {
    vertical-align:     top;
    font:               normal bold 8pt Arial, sans-serif;
}
div#formBody table.threeColsList td.field {
    padding:            0px 2px 0px 0px;
}
div#formBody table.threeColsList td.button {
    padding:            0px 0px 0px 4px;
}
/* text fields */
#formBody input[type="text"].generic, #formBody input[type="password"].generic {
    border:             1px solid #BABCBE;
    font-size:          9pt;
    font-family:        Arial, sans-serif;
    background-color:   #F3F6F8;
}
#formBody input[type="text"].generic:focus, #formBody input[type="password"].generic:focus {
    background-color:   #FFFFFF;
}
#formBody input[type="text"].xxl,   #formBody input[type="password"].xxl {
    width:              400px;
}
#formBody input[type="text"].xl,   #formBody input[type="password"].xl {
    width:              240px;
}
#formBody input[type="text"].longer, #formBody input[type="password"].longer {
    width:              150px;
}
#formBody input[type="text"].long, #formBody input[type="password"].long {
    width:              122px;
}
#formBody input[type="text"].phone {
    width:             84px;
}
#formBody input[type="text"].phone-cc {
    width:             34px;
}
#formBody input[type="text"].middle, #formBody input[type="password"].middle {
    width:              62px;
}
#formBody input[type="text"].short, #formBody input[type="password"].short {
    width:              24px;
}
div#formBody select.generic {
    border:             1px solid #BABCBE;
    font-size:          8pt;
    font-family:        Arial, sans-serif;
}
div#formBody select.long {
    width:              128px;
}
div#formBody select.middle {
    width:              62px;
}
div#formBody select.short {
    width:              18px;
}
div#formBody select.shorter {
    width:              58px;
}
div#formBody textarea.generic {
    border:             1px solid #BABCBE;
    padding:            1px 1px;
    font-size:          9pt;
    font-family:        Arial, sans-serif;
    background-color:   #F3F6F8;
}
div#formBody textarea.xxl {
    width:              400px;
}
div#formBody textarea.xl {
    width:              240px;
}
div#formBody textarea.long {
    width:              124px;
}
a.eip {
    color:              black;
    font-weight:        normal;
    text-decoration:    none;
}
a.eip:hover, span.eip:hover {
    color:              black;
    background-color:   yellow;
    text-decoration:    none;
}
span.eip-view {
    display: inline;
}
span.eip-view:hover {
    background-color: yellow;
    cursor: pointer;
}
span.eip-edit {
    display: none;
}
img.save, img.cancel {
    cursor: pointer;
}

/* submit buttons */
div#body input[type="button"].button {
    padding:            4px 2px 4px 2px;
    margin:             0px 10px 0px 0px;
    background-image:   url("../slices/roren_form_nextbtn_bg.gif");
    background-repeat:  repeat-x;
    font:               normal bold 11px Tahoma, Verdana, Arial, sans-serif;
    text-transform:     capitalize;
    color:              #FFFFFF;
}
div#body input[type="button"].button:hover {
    background-image:   url("../slices/roren_form_finishbtn_bg.gif");
    background-repeat:  repeat-x;
}
div#body input[type="button"].nextButton {
    margin:             0px 6px;
    padding:            4px 18px 3px;
    background-image:   url("../slices/roren_form_nextbtn_bg.gif");
    background-repeat:  repeat-x;
    font:               normal bold 10px Tahoma, Verdana, Arial, sans-serif;
    text-transform:     capitalize;
    color:              #FFFFFF;
}
div#body input[type="button"].finishButton {
    margin:             0px 6px;
    padding:            4px 18px 3px;
    background-image:   url("../slices/roren_form_finishbtn_bg.gif");
    background-repeat:  repeat-x;
    font:               normal bold 10px Tahoma, Verdana, Arial, sans-serif;
    text-transform:     capitalize;
    color:              #FFFFFF;
}
div#body input[type="image"] {
    background-color:   #FFFFFF;
}
/* TWO COLUMN FORM */
div.twoColForm {
    margin: 5px 0px 20px 0px;
}
div.twoColForm div.leftCol {
    width: 50%;
    float: left;
}
div.twoColForm div.rightCol {
    width: 50%;
    float: right;
}   
table.twoColForm {
    width: 100%;
	border-collapse: collapse;
}
table.twoColForm td {
	border: 0px solid #000;
}
table.twoColForm td.label {		
	padding: 2px 4px;
	width: 45%;
	vertical-align: text-top;
	text-align: right;
	font: normal normal bold 8pt Arial,Tahoma,sans-serif;
}
table.twoColForm td.required {
    padding:            3px 0px 1px 2px;        
    margin:             1px 0px 1px 0px;
    border-left:        solid 3px red;             
}
table.twoColForm td.field {
	padding: 2px 4px;
	width: 55%;
	vertical-align: top;
}
table.twoColForm td.note {
    font: normal normal bold 8pt Arial,Tahoma,sans-serif;
    text-align: left;
}
/* ONE COLUMN FORM */
div.oneColForm {
    margin:             5px 0px 20px 0px;
}
table.oneColForm {
    width: 100%;
}
td.label {		
	padding: 2px 4px;
	text-align: right;
	vertical-align: top;
	font: normal normal bold 8pt Arial,Tahoma,sans-serif;
	text-transform: lowercase;
}
td.field {
	padding: 2px 4px;
	vertical-align: top;
}
table.oneColForm td.label {		
	padding: 2px 4px;
	width: 23%;
	text-align: right;
	vertical-align: top;
	font: normal normal bold 8pt Arial,Tahoma,sans-serif;
	text-transform: lowercase;
}
table.oneColForm td.field {
	padding: 2px 4px;
	width: 77%;
	vertical-align: top;
}
/* ONE COLUMN TABULAR LIST */
table.oneColList {
    width: 100%;
    border-collapse: collapse;
}
table.oneColList thead td {
	border-bottom: solid 1px black;
	font: normal normal bold 9pt Arial,Tahoma,sans-serif;
	text-transform: lowercase;
}
table.oneColList td {
	padding: 4px 0px 0px 0px;
}
/* RADGRID SCENARIOS */
.rgRow A, .rgAltRow A {
   font-weight : normal;
}
/* GENERIC FORM FIELDS */
input[type=text].title {
    padding: 2px;
}
