|
|
| (76 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | /* Mak's testing area for twc skin */
| |
| − | /* STYLING */
| |
| − | div.section, div.group {
| |
| − | border: none;
| |
| − | background: none;
| |
| − | }
| |
| | | | |
| − | /* SECTIONS ============================================================================= */
| |
| − |
| |
| − | .section {
| |
| − | clear: both;
| |
| − | padding: 0px;
| |
| − | margin: 0px;
| |
| − | }
| |
| − |
| |
| − | /* GROUPING ============================================================================= */
| |
| − |
| |
| − | .group:before,
| |
| − | .group:after {
| |
| − | content:"";
| |
| − | display:table;
| |
| − | }
| |
| − | .group:after {
| |
| − | clear:both;
| |
| − | }
| |
| − | .group {
| |
| − | zoom:1; /* For IE 6/7 (trigger hasLayout) */
| |
| − | }
| |
| − |
| |
| − | /* GRID COLUMN SETUP ==================================================================== */
| |
| − |
| |
| − | .col {
| |
| − | display: block;
| |
| − | float:left;
| |
| − | margin: 1% 0 1% 1.6%;
| |
| − | }
| |
| − |
| |
| − | .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */
| |
| − |
| |
| − |
| |
| − | /* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .col {
| |
| − | margin: 1% 0 1% 0%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | /* GRID OF THREE */
| |
| − | .span_3_of_3 {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .span_2_of_3 {
| |
| − | width: 66.1%;
| |
| − | }
| |
| − | .span_1_of_3 {
| |
| − | width: 32.2%;
| |
| − | }
| |
| − |
| |
| − | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .col { margin: 1% 0 1% 0%;}
| |
| − | .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
| |
| − | }
| |
| − |
| |
| − | /* GRID OF TWO ============================================================================= */
| |
| − |
| |
| − |
| |
| − | .span_2_of_2 {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .span_1_of_2 {
| |
| − | width: 49.2%;
| |
| − | }
| |
| − |
| |
| − | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .span_2_of_2 {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .span_1_of_2 {
| |
| − | width: 100%;
| |
| − | }
| |
| − | }
| |
| − | /* GRID OF TWO 40/60============================================================================= */
| |
| − |
| |
| − |
| |
| − | .span_40_of_2 {
| |
| − | width: 39.36%;
| |
| − | }
| |
| − | .span_60_of_2 {
| |
| − | width: 59.04%;
| |
| − | }
| |
| − | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */
| |
| − |
| |
| − | @media only screen and (max-width: 600px) {
| |
| − | .span_40_of_2 {
| |
| − | width: 100%;
| |
| − | }
| |
| − | .span_60_of_2 {
| |
| − | width: 100%;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .TWCportal_1 {
| |
| − | border: none;
| |
| − | padding: .4em .9em .9em;
| |
| − | color: black;
| |
| − | vertical-align: top;
| |
| − | background: rgb(177,159,142);
| |
| − | background: linear-gradient(180deg, rgba(177,159,142,0.45420166357558645) 0%, rgba(247,247,245,0.008823512315082271) 100%);
| |
| − | }
| |
| − | .TWCportal_1 h3 {
| |
| − | padding:5px;
| |
| − | background:none;
| |
| − | color:white;
| |
| − | }
| |
