/*******************************************************************************
* This file contains all the styles definitions for the skin of all the pages
*
* Table of contents:
* Deprecated: =Deprecated
* Misc: =General
* Misc: =Footer
* Headings: =Headings
* Components: =Ruler
* Components: =Color picker
* Components: =Tooltips
* Components: =Progress bar
* Components: =Calendar
* Components: =Section
* Navigation: =Buttons
* Navigation: =Links
* Navigation: =Tabs
* Search: =Results table
* Forms: =Tableless forms
*
* Quick tips:
* 1. Keep the structure as in the TOC above.
* 2. Write the definitions in alphabetical order.
* 3. Write every definition on its own line. (like in the below example).
* 4. Indent only the definitions inside a selector (with four spaces) while
* the selector should be on a new line with no white space in front of it.
Ex:
selector {
definition;
definition;
definition;
}
* 5. When writing definitions for a new selector add a comment with a short
* description of what it does or what is used for and necessary comments for
* unobvious code or unobvious reasons you used that code for. (In other words
* write comments with common programmers sense)
*
******************************************************************************/
/** Deprecated: =Deprecated
----------------------------------------------------------
*/
TD.columnHeading P, TD.columnHeading DIV {padding: 2px 0 2px 10px;}
TD.rowLabel P, TD.rowLabel DIV {padding: 2px 0; display:block;}
TD.rowLabel_left P, TD.rowLabel_left DIV {padding: 2px 0 2px 10px;}
TD.columnItem P, TD.columnItem DIV {padding: 2px 0 2px 10px;}
/** End =Deprecated*/
/** Specific to home page. Should be moved.*/
.bgcolor.tour {
border-width:2px;
margin-top: 10px;
padding: 5px 10px;
width: auto;
}
.bgcolor.homeForm {
border-width: 1px;
margin: 0;
padding: 10px;
}
/** Specific to checkout pages. Should be moved.*/
div#checkOutOrderHeader{
width: 100%;
}
#checkOutOrderHeader span#checkOutOrderMsg{
width: 80%;
}
/* Misc: =General
----------------------------------------------------------
*/
body, form, input, div, img, .mainForm, table {
margin: 0;
padding: 0;
}
img {
border: none;
}
p {
margin : 0;
padding : 4px 0 2px 0;
}
span.smallIndent{
margin-left:10px;
}
/**
* This cleaner div must be used after each element which uses float
* Use it like this: (if you put nothing in the div in IE, the height will be of 5px).
*/
div.cleaner{
clear: both;
height: 0.0px;
}
input[type="radio"]{
margin-right: 8px;
}
div.content{
margin-left: auto;
margin-right: auto;
width: 800px;
}
div.tabContent{
margin: 15px 0 0 0;
top: 0;
}
div.content>div.tabContent{
clear: left;
}
div.formHolder {
border-width: 1px;
padding: 5px;
}
.navcolor {
margin-top: 5px;
padding: 3px;
}
.invisible {
display:none;
}
.visibleInline {
display:inline;
}
td p, td div{
margin: 0;
}
TD.radioButton DIV {
padding: 0 0 0 10px;
}
TD.radioButtonLabel P{
display:block;
margin: 0;
padding: 2px 0;
}
td.checkbox{
padding: 0 0 0 10px;
width: 15px;
}
td.checkBox span{
font-weight: bold; /*TODO: move me in main_skin */
padding: 2px 0 2px 10px;
width: 15px;
}
TD.checkBox DIV {
padding: 0 0 0 10px;
}
TD.checkBoxLabel P{
padding: 2px 0;
}
TD.textField DIV {
margin: 0;
padding: 1px 0 0 10px;
}
TD.selectField DIV{
margin: 0;
padding: 1px 0 1px 10px;
}
#IDinputString {
width:99%;
}
ul.errors {
margin: 0;
padding: 0;
}
form.inline {
display: inline;
}
/* Misc: =Footer
-------------------------------------------------
*/
div.footer.copywrite{
display: none;
}
div.footer {
padding-top: 30px;
}
div.footer ul.navigation {
margin: 0;
padding: 0;
padding-top: 4px;
}
div.footer ul.navigation li {
display: inline;
}
div.footer ul.navigation a {
padding: 3px 10px 30px 0;
}
div.footer {
margin-left: auto;
margin-right: auto;
width: 800px;
}
div.bottomTitle{
border-top-width: 1px;
}
/* Headings: =Headings
----------------------------------------------------------
*/
p.heading{
border-bottom: 1px solid #5c616c;
margin-bottom: 4px;
padding-top: 10px;
}
p.heading2{
white-space: nowrap;
margin:0;
padding : 2px 0 2px 7px;
}
/* Components: =Ruler
----------------------------------------------------------
*/
/** Horizontal Ruler: a line of 2px height. */
hr {
border-width: 1px;
height: 1px;
margin: 5px 0;
padding: 0;
width: 100%;
}
/* Components: =Color Picker
----------------------------------------------------------
*/
img#colorpicker{
border: none;
height: 196px;
margin: 10px 0 5px 0;
padding: 0;
width: 292px;
}
/* Components: =Tooltips
----------------------------------------------------------
*/
span.toolTip {
border-width: 1px;
padding: 6px;
}
/* Components: =Progress Bar
----------------------------------------------------------
*/
div#progressBar {
display: block;
padding: 5px;
}
div#empty{
border-width:1px;
height: 12px;
width: 400px;
}
div#fill{
height: 12px;
left: 0;
position:relative;
top: 0;
width: 50px;
}
div.progressbar_small {
height: 10px;
width: 80px;
background: #fff;
border: 1px solid silver;
margin: 0;
padding: 1px 0;
}
/* Components: =Calendar
----------------------------------------------------------
*/
img.calendar{
border-width: 1px;
margin:0;
padding:0;
}
/* Components: =Section
------------------------------------------------------
*/
ul.section{
margin: 0;
padding: 0;
}
ul.section li.narrow{
float: left;
margin: 10px;
width: 250px;
}
ul.section li.wide{
float: left;
margin: 10px;
width: 500px;
}
ul.section li.whole{
float: left;
margin: 5px;
width: 97%;
}
ul.section li.wholePage {
width: 100%;
}
ul.section li.wholePage b {
padding-left: 10px;
}
ul.horizontalList{
padding-bottom: 4px;
padding-left: 0;
}
.ie ul.horizontalList{
margin-left: 0;
padding-bottom: 1px;
}
ul.horizontalList.navBarColor{
height: 120px;
padding-bottom: 15px;
}
ul.horizontalList li.left.first.headerHome {
padding: 10px;
}
.ie ul.horizontalList li.left.first.headerHome {
padding: 5px;
}
ul.horizontalList li.left{
float: left;
margin-left: 10px;
}
ul.horizontalList li.right{
float: right;
margin-right: 10px;
}
.errorMessages {
border-width: 1px;
padding: 10px 10px 10px 20px;
}
.section {
margin: 0;
padding: 0;
}
.section.TD {
vertical-align: top;
width: 50%;
}
.section.home {
float: left;
margin: 0 5px 10px 5px;
}
.section.home.wide{
width: 450px;
}
.section.home.narrow{
width: 330px;
}
.ie .section.home.narrow{
width: 325px;
}
.section .full {
border-width: 1px;
margin-top: 2px;
padding: 0;
}
.section .title {
padding: 0 0 2px 0;
}
.section div.title ul.horizontalList{
padding: 0 5px 1px 0;
padding-bottom: 5px;
}
.ie .section div.title ul.horizontalList{
padding-bottom: 1px;
margin-left: 0;
}
.section div.title ul.horizontalList li.left{
float: left;
margin-left: 10px;
}
.section div.title ul.horizontalList li.left.first{
margin-left: 0;
margin-top: 2px;
padding-left: 3px;
}
.section div.title ul.horizontalList li.right{
float: right;
}
.section div.full ul.items{
margin: 0;
padding: 5px 10px;
}
.section li a.button {
float: right;
}
.section li.notitle a.button {
float: none;
}
.graySection {
border-width: 1px;
padding: 10px;
}
/* Navigation: =Buttons
----------------------------------------------------------
*/
/**
* Use like this:
*
*
* If you want a bold button use like this:
*
*/
div.buttonsContainer{
margin: 0;
padding: 0.5em 0 0.2em 0;
}
a.button{
border: 1px outset;
margin-right: 2px;
padding: 2px 3px;
}
/**
* Button having on the left the cart icon.
*/
a.button.cart, a.button.blockedCart{
padding: 5px 10px;
padding-left: 35px;
}
a.button.pdf{
padding: 2px 0;
padding-left: 30px;
}
input.button{
border: none;
margin: 0.5px;
padding: 0 2px;
}
/* Navigation: =Links
----------------------------------------------------------
*/
a.addressPopupLink {
padding-left:7px;
}
a.disabledcheckbox {
padding: 0px 5px;
}
a.downloadLink {
border-width: 1px;
margin-top:2px;
padding: 2px 3px 3px 23px;
position: relative;
top: -1px;
}
/* Navigation: =Tabs
----------------------------------------------------------
*/
ul#subNavigation{
border-bottom-width: 1px;
margin: 0;
padding-left:0;
padding-bottom: 24px;
width: 800px;
}
.ie ul#subNavigation{
padding-bottom: 0;
}
ul#subNavigation li{
border-width: 1px;
float: left;
height: 21px;
padding: 2px 10px 0 10px;
margin: 0 2px -1px 0;
}
ul#subNavigation li a{
display: block;
}
ul#subNavigation li.tabActive{
border-bottom-width: 1px;
}
div.tabBody{
border-width: 1px;
clear: left;
margin: 0;
padding: 10px 0 6px 0;
width: 100%;
}
div.tabContentCheckOut{
margin: 0;
top: 0;
width: 100%;
}
/* Search: =Result Table
----------------------------------------------------------
*/
tr.tabelHeader th {
padding: 5px;
}
div.pagination{
margin: 6px 0;
}
div.pagination div.numberResults{
display: inline;
float: left;
}
div.pagination span.pages{
float: right;
}
div.pagination span.pages a.pageIndicator{
margin-right: 3px;
}
a.sort, a.nosort{
padding: 0 6px;
height: 12px;
width: 9px;
}
table.borderedTable {
border-width:1px;
border-collapse:collapse;
margin: 0;
width: 100%;
}
table.borderedTable div.itemsPerPage{
float: right;
}
table.borderedTable.tableOnly, table.borderedTable td {
border-width: 1px;
border-style: solid;
}
table.borderedTable.tableOnly td, table.borderedTable th, table.borderedTable table td, table tr.tabelPreHeader td {
border: none;
}
.preHeader {
padding-left: 5px;
}
tr.tabelPreHeader {
height: 30px;
}
tr.odd td, tr.even td{
margin: 0;
padding: 3px;
}
/* Forms: =Tableless forms
------------------------------
*/
ul.formList {
margin: 0;
padding: 7px 7px 7px 0;
}
ul.formList li {
clear:both;
margin-bottom: 6px;
}
ul.formList li label {
float: left;
margin-bottom: 6px;
padding-right: 1% ;
width: 48%;
}
ul.formList li span label {
display: inline;
float: none;
vertical-align: middle;
width: auto;
}
ul.formList li span input {
vertical-align: middle;
}
ul.formList li span.columned {
float: left;
width: 24%;
}
ul.formList.narrow li label {
width: 15%;
}
ul.formList.narrow {
width: 100%;
}
ul.formList li.threeOnARow label.first {
width: 16%;
}
ul.formList li.threeOnARow label.first, ul.formList li.threeOnARow span.first {
float: left;
padding-left: 0;
}
ul.formList li.threeOnARow span.first input, ul.formList li.threeOnARow span.first select {
width: auto;
}
ul.formList li.threeOnARow span input, ul.formList li.threeOnARow span select {
width: 100%;
}
ul.formList li.threeOnARow span, ul.formList li.threeOnARow label {
float: right;
padding-right: 0;
width: 20%;
}
ul.formList li.threeOnARow label{
padding-left: 1%;
width: 10%;
}
ul.formList li.leftCol, ul.formList li.rightCol {
float: left;
}
ul.formList li.leftCol {
width: 30%;
}
ul.formList li.rightCol {
clear: none;
width: 68%;
}
ul.formList li.leftCol span, ul.formList li.rightCol span {
clear: both;
display: block;
text-align: right;
}
ul.formList li.leftCol label, ul.formList li.rightCol label {
width: 100%;
}