/* Colors */ /* BASE */ @color-base: #3f4952; /* Complimentary Colors */ @color-complimentary: #474D52; @color-complimentary2: #050504; @color-complimentary3: #524B3F; @color-complimentary4: #040505; @color-complimentary5: #E3DCD4; @color-complimentary5-light: lighten(#E3DCD4, 40%); @color-base-dark: lighten(@color-base, 10%); @color-base-lighter: lighten(@color-base, 70%); @gray-darker: lighten(#000, 13.5%); @gray-dark: lighten(#000, 20%); @gray: lighten(#000, 33.5%); @gray-light: lighten(#000, 60%); @gray-lighter: lighten(#000, 93.5%); @off-white: lighten(#000, 80%); @default-imageWidth: 100px; @buttonImage: url(img/stardust.png); @sos: url(img/sos.png); @Paper: url(img/lightpaperfibers.png); @lightWool: url(img/light_wool.png); @brushed: url(../img/brushed.png); @road: url(../img/Main_Background.jpg); /*********** fonts ***********/ @font-family-header: "rokkittregular"; @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px @font-size-h1: floor((@font-size-base * 2.6)); // ~36px @font-size-h2: floor((@font-size-base * 2.15)); // ~30px @font-size-h3: ceil((@font-size-base * 1.7)); // ~24px @font-size-h4: ceil((@font-size-base * 1.25)); // ~18px @font-size-h5: @font-size-base; @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px @line-height-base: 1.428571429; // 20/14 @line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px @headings-font-family: inherit; @headings-font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit; @font-face { font-family: 'rokkittregular'; src: url('../css/fonts/rk-webfont.eot'); src: url('../css/fonts/rk-webfont.eot?#iefix') format('embedded-opentype'), url('../css/fonts/rk-webfont.woff') format('woff'), url('../css/fonts/rk-webfont.ttf') format('truetype'), url('../css/fonts/rk-webfont.svg#rokkittregular') format('svg'); font-weight: normal; font-style: normal; } /*********** borders ***********/ @borderSize: 5px; @borderSize-small: 1px; .borderSize(@borderSize){ -webkit-border-size:@size; -moz-border-size:@size; border-size:@size; } @borderColor: #7E7A71; .borderColor(@borderColor){ -webkit-border-color:@border; -moz-border-color:@border; border-color:@border; } @border-radius-base: 10px; @defaultRadius:20px; .RoundedShape(@radius:@defaultRadius){ -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } /*********** Shadow *************/ .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) { -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 box-shadow: @shadow; } /********* margins & padding **********/ @margin-vertical-base: 50px; @margin-vertical-small: 5px; @margin-vertical-medium: 15px; @margin-vertical-large: 55px; @margin-horizontal-small: 5px; @margin-horizontal-medium: 10px; @margin-horizontal-large: 70px; @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @padding-large-vertical: 16px; @padding-large-horizontal: 16px; @padding-medium-vertical: 10px; @padding-small-vertical: 5px; @padding-small-horizontal: 5px; @padding-xs-vertical: 2.5px; @padding-xs-horizontal: 2.5px; @padding-vertical-large: 50px; @btn-default-border: transparent; @container-max_width: 1210px; @container-gutter: 20px; /******************************************************* ******************************************************** Modal parameters ******************************************************** ********************************************************/ @modal-backdrop-opacity: .8; /************************************************************* payment css ************************************************************** **************************************************************/ body{ background: @road no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top: @padding-vertical-large; } .congratulations{ padding: 0px; } .alert{ margin-top: @margin-vertical-medium; margin-bottom: 0px; } .content{ background-image: @brushed; background-color: transparent; margin:@margin-vertical-medium 0px; } .congratulations{ } h1, h2, h3, h4, h5, h6{ font-family:@font-family-sans-serif; } h1{ font-size: @font-size-h2; font-family: @font-family-header; color: white; } h2{ font-size: @font-size-h2; font-family: @font-family-header; color: white; } h3{ font-size: @font-size-h2; font-family: @font-family-header; color: white; } h4{ color: @off-white; font-size: @font-size-h2; font-family:@font-family-header; background-color: transparent; color: white; margin: 0px -15px; padding: 7px 0px; text-align: center; } h5{ font-size:@font-size-h3; font-family:@font-family-header; color: white; } h6{ font-size:@font-size-h6; font-family:@font-family-sans-serif; } p{ font-size: 1em; font-family:@font-family-base; color: @off-white; } ul{ margin: 25px 0px; } .panel{ background-color: transparent; } .panel-default{ background-color: transparent; } .list-group-item{ position: relative; display: block; padding: 10px 15px; margin-bottom: -1px; border: 1px solid #dddddd; background:transparent; color: white; } .bg{ background-image: @brushed; background-color: transparent; border: 1px solid @gray-dark; padding:15px; margin-bottom:15px; } .bundleExplination{ text-align: center; } .addCart{ width:100%; margin-top: 25px; .btn-sm{ width:100%; background-color:@color-base; color: @off-white; border: 1px solid @gray-dark; &:hover { -webkit-filter: brightness(40%); } } } .panel-default>.panel-heading{ background-color:@color-base; border: 1px solid @color-base; } .panel-group .panel-heading+.panel-collapse .panel-body{ border-top: 1px solid @color-base; } .panel{ border: 1px solid @color-base; } .bundle-image{ width:100%; } /***************** CART ******************/ .modal-dialog{ .RoundedShape; } .fade.in{ background-image: @brushed; background-color: transparent; } .modal-content{ .RoundedShape !important; background-color: @gray-lighter; .modal-title{ color: @gray; } .modal-header{ } .modal-body{ background-color: @gray-light; } .modal-footer{ margin-top:0px; } } table{ background-color: @gray-light; margin-bottom: 0; width: 100%; .odd{ } .headerRow{ } } td.item-name{ font-weight: bold; color: @color-base; } td.item-price{ font-weight: bold; color: @color-base; } td.item-version{ font-weight: bold; color: @color-base; } a.simpleCart_decrement{ font-weight: bolder; color: @gray-lighter; font-size: 21px } .item-quantity{ text-align: center; font-weight: bold; color: @color-base; } td.item-quantity{ font-size: 16px; } a.simpleCart_increment{ font-weight: bolder; color: @gray-lighter; font-size: 21px } td.item-total{ font-weight: bold; color: @gray-lighter; } a.simpleCart_remove{ font-weight: bold; color: @gray-lighter; font-size: 16px } .simpleCart_checkout{ background-color: @color-base; color: @gray-lighter; } .closeCart{ background-color: @color-base; color: @gray-lighter; } /***************** Bundles ******************/ .viewBundles{ background-color: @color-base-dark; }