/* ----------------------------------------------------------------------------------------------- 24 Column Layout (Responsive) ----------------------------------------------------------------------------------------------- */ .col { -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; } .row:after, .col:after, .clr:after, .group:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .row { margin-bottom: 1.5em; } .col { display: block;float:left;width: 100%;} @media ( min-width : 768px ) {.col {margin-left: 2%;}} .col:first-child { margin-left: 0; } @media ( min-width : 768px ) { .span_1 { width: 2.25%; } .span_2 { width: 6.5%; } .span_3 { width: 10.75%; } .span_4 { width: 15.0%; } .span_5 { width: 19.25%; } .span_6 { width: 23.5%; } .span_7 { width: 27.75%; } .span_8 { width: 32.0%; } .span_9 { width: 36.25%; } .span_10 { width: 40.5%; } .span_11 { width: 44.75%; } .span_12 { width: 49.0%; } .span_13 { width: 53.25%; } .span_14 { width: 57.5%; } .span_15 { width: 61.75%; } .span_16 { width: 66.0%; } .span_17 { width: 70.25%; } .span_18 { width: 74.5%; } .span_19 { width: 78.75%; } .span_20 { width: 83.0%; } .span_21 { width: 87.25%; } .span_22 { width: 91.5%; } .span_23 { width: 95.75%; } .span_24 { width: 100%;margin-left: 0;} } /* ----------------------------------------------------------------------------------------------- SMARTPHONES (PORTRAIT AND LANDSCAPE) ----------------------------------------------------------------------------------------------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* General ---- */ .hidePhone {display:none;} #myaccount a {line-height: 2.5em;} input.ui-button {font-size:15px;font-weight:bold;} #footer {height: 15px;padding:10px;text-align:right;font-size: 12px;position: fixed;right: 0;bottom: 0;width: 100%;z-index: 999;} /* Login ---- */ .loginField {width:96%;} .loginField input {font-size:14px;} .loginField label {font-size:15px;} /* Default.asp ---- */ #myaccount {width:260px;} /* Standard Field Sizes in Forms ---- */ .xlargefield {width:100%;} .largefield {width:100%;} .mediumlarge {width:96%;} .mediumfield {width:75%;} .smallfield {width:50%;} .xsmallfield {width:25%;} /* portletsGlobal.asp - 2 Columns ---- */ .rowL { width:100%; padding-left: 0%; padding-right: 0%; float:left; min-height:0px;} .rowC { width:100%; padding-left: 0%; padding-right: 0%; float:left; min-height:0px;} .rowR { width:100%; padding-left: 0%; padding-right: 0%; float:right; min-height:0px;} .rowL50 { width:100%; padding-left:0%; padding-right: 0%; float:left; min-height:0px;} .rowR50 { width:100%; padding-left:0%; padding-right: 0%; float:right; min-height:0px;} .rowL70 { width:100%; padding-left: 0%;padding-right: 0%;float:left; min-height:0px;} .rowR30 { width:100%; padding-left: 0%;padding-right: 0%;float:left; min-height:0px;} .rowFull { width:100%; padding-left: 0%;padding-right: 0%;float:left; min-height:0px;} } /* ----------------------------------------------------------------------------------------------- IPADS (PORTRAIT AND LANDSCAPE) ----------------------------------------------------------------------------------------------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* General ---- */ .hideDesktop { display:none;} #footer {height: 15px;padding: 10px;text-align: right;font-size: 10px;position: fixed;right: 0;bottom: 0;width: 100%;z-index: 999;} /* Login ---- */ .loginField {width:20%;} /* Default.asp ---- */ #myaccount {width:10%;} /* Standard Field Sizes in Forms ---- */ .xlargefield { width:100%; } .largefield { width: 75%; } .mediumlarge {width:20%;} .mediumfield { width: 50%; } .smallfield { width: 25%; } .xsmallfield { width: 10%; } /* portletsGlobal.asp - 2 Columns ---- */ .rowL { width:33%; padding-left: 0%; padding-right: 0%; float:left; min-height:0px;} .rowC { width:34%; padding-left: 0%; padding-right: 0%; float:left; min-height:0px;} .rowR { width:33%; padding-left: 0%; padding-right: 0%; float:right; min-height:0px;} .rowL50 { width:50%; padding-left:0%; padding-right: 0%; float:left; min-height:0px;} .rowR50 { width:50%; padding-left:0%; padding-right: 0%; float:right; min-height:0px;} .rowL70 { width:100%; padding-left: 0%;padding-right: 0%;float:left; min-height:0px;} .rowR30 { width:100%; padding-left: 0%;padding-right: 0%;float:left; min-height:0px;} .rowFull { width:100%; padding-left: 0%;padding-right: 0%;float:left; min-height:0px;} } /* ----------------------------------------------------------------------------------------------- DESKTOPS AND LAPTOPS ----------------------------------------------------------------------------------------------- */ @media only screen and (min-width : 1025px) { /* General ---- */ .hideDesktop {display:none; } #footer {height: 15px;padding: 10px;text-align: right;font-size: 10px;position: fixed;right: 0;bottom: 0;width: 100%;z-index: 999;} /* Login ---- */ .loginField {width:20%;} /* Default.asp ---- */ #myaccount {width: 10%;-webkit-border-radius: 0px 0px 5px 5px;border-radius: 0px 0px 5px 5px;} /* Standard Field Sizes in Forms ---- */ .xlargefield { width:100%; } .largefield { width: 75%; } .mediumlarge {width:20%;} .mediumfield { width: 50%; } .smallfield { width: 25%; } .xsmallfield { width: 10%; } /* portletsGlobal.asp - 2 Columns ---- */ .rowL { width:33%; padding-left: 0%; padding-right: 0%; float:left; min-height:0px;} .rowC { width:34%; padding-left: 0%; padding-right: 0%; float:left; min-height:0px;} .rowR { width:33%; padding-left: 0%; padding-right: 0%; float:right; min-height:0px;} .rowL50 { width:50%; padding-left:0%; padding-right: 0%; float:left; min-height:0px;} .rowR50 { width:50%; padding-left:0%; padding-right: 0%; float:right; min-height:0px;} .rowL70 {float: left; min-height: 0px; padding-left: 0%; padding-right: 0%; width: 70%;} .rowR30 {float: right; min-height: 0px; padding-left: 0%; width: 30%; padding-right: 0%;} .rowFull { width:100%; padding-left: 0%;float:left; min-height:0px;} }