/******************************************************************************/ /* MASTER CSS STYLESHEET - DocBox Public Website /* /* AUTHOR: Jared Williams (BlakeMedia) /* VERSION: mark 1.0 /* CREATED: 11 July 2013 /* MODIFIED: 16 July 2013 /* SCHEME: HEX COLOUR VARIANT /* /* #636363 Grey Dark (Body Text) /* #A4A4A4 Light /* /* #53a9d7 Blue Light /* #047dbb Medium /* #055B88 Dark /* /* (c) Copyright 2002-2013 BlakeMedia & MediaIQ Group /******************************************************************************/ /* TODO: Reset button/form colours, reset notification colours, etc. */ /******************************************************************************/ /* HTML MARKUP */ /******************************************************************************/ /********************************* RESET ALL **********************************/ HTML, BODY, DIV, SPAN, APPLET, OBJECT, IFRAME, H1, H2, H3, H4, H5, H6, P, BLOCKQUOTE, PRE, A, ABBR, ACRONYM, ADDRESS, BIG, CITE, CODE, DEL, DFN, EM, FONT, IMG, INS, KBD, Q, S, SAMP, SMALL, STRIKE, STRONG, SUB, SUP, TT, VAR, DD, DL, DT, LI, OL, UL, FIELDSET, FORM, LABEL, LEGEND, TABLE, CAPTION, TBODY, TFOOT, THEAD, TR, TH, TD {font-family:inherit;font-size:100%;font-weight:inherit;font-style:inherit;padding:0;margin:0;border:0} /******************************* GLOBAL MARKUP ********************************/ HTML, BODY {height:100%} BODY {letter-spacing:1px;font-family:"Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:14px;font-weight:500;color:#636363;background:#FFF} /* Font-size: see notes */ /*** SPECIAL EFFECTS ***/ BODY { -webkit-text-size-adjust: none; /* Prevent iOS from increasing font sizes for mobile devices */ -webkit-font-smoothing: subpixel-antialiased; /* Text anti-aliasing for WebKit */ } /*** HEADINGS ***/ H1, H2, H3, H4, H5, H6 {margin:0;padding:0} H1 {width:100%;height:100%;display:block} H2 {margin:24px 0 10px;padding-left:30px;text-transform:uppercase;font-weight:bold;font-size:120%;color:#53a9d7;background:url(/_images/master/master-sprite.png) -0 -346px no-repeat} H3 {text-transform:uppercase;font-size:150%} H4 {font-size:130%} H5 {font-size:120%} H6 {font-size:100%} /*** TEXT ELEMENTS ***/ P {margin:6px 0 10px;line-height:1.8;font-size:90%} P:first-child {margin-top:0} /* For containers with top and bottom padding */ P:last-child {margin-bottom:0} /* See notes */ UL, OL {list-style-position:outside;margin:5px 0 5px 30px} UL LI {margin-top:6px} UL LI:first-child {margin-top:0} DL {overflow:auto} DT, DD {margin-bottom:5px;float:left} DT {width:200px;clear:left} DD {} STRONG {font-weight:bold;font-style:normal} EM {font-weight:bold;font-style:normal;color:inherit} CITE {line-height:1.6;font-style:italic;color:#999} SAMP {font-family:Georgia,'Times New Roman',Times,serif;font-size:70%;color:#777} HR {margin:5px;border:1px solid;border-color:#D9D9D9 #D9D9D9 #F9F9F9 #F9F9F9} /*** HYPERLINKS ***/ A {text-decoration:none;font-weight:bold;color:#047dbb} /* See notes */ A:hover {text-decoration:underline} /*** HYPERLINKS (EFFECT) ***/ A {-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out} /*** FORMS ***/ FORM {} FIELDSET {} LEGEND {display:none} /* Labels */ LABEL {width:180px;height:100%;margin:0;padding:0 15px 0 0;display:inline-block;text-align:right;vertical-align:top;line-height:2.7;font-weight:500;font-size:80%;color:#333} /* Field style */ INPUT[type='text'], INPUT[type='password'], SELECT, TEXTAREA, .disabled-input {margin:0;padding:5px 0;border:1px solid #dadada;display:inline-block;-moz-appearance:none;-webkit-appearance:none;appearance:none;-moz-box-sizing:border-box;box-sizing:border-box;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;line-height:1.8;font-family:inherit;font-size:13px;font-weight:500;color:#679;background:#FFF;-webkit-transition:border-color 0.2s ease-in-out,color 0.2s ease-in-out,background 0.2s ease-in-out;-moz-transition:border-color 0.2s ease-in-out,color 0.2s ease-in-out,background 0.2s ease-in-out;-o-transition:border-color 0.2s ease-in-out,color 0.2s ease-in-out,background 0.2s ease-in-out;-ms-transition:border-color 0.2s ease-in-out,color 0.2s ease-in-out,background 0.2s ease-in-out;transition:border-color 0.2s ease-in-out,color 0.2s ease-in-out,background 0.2s ease-in-out} INPUT[type='text'] {padding-top:3px;padding-bottom:3px} INPUT[type='radio'] {margin:0 5px 0 14px} INPUT[type='radio']:first-child {margin-left:0} .fake-input {line-height:1.7} .disabled-input {color:#999} BUTTON, .button {width:84px;height:30px;margin:0;padding:0;border:none;text-align:center;color:#FFF;background:url(/_images/master/master-sprite.png) -140px -70px} BUTTON:hover, .button:hover {cursor:pointer;background-position:-245px -70px} INPUT[type='text'], INPUT[type='password'], SELECT, TEXTAREA, .disabled-input {box-shadow:1px 1px 1px #FFF, -1px -1px 1px rgba(200,200,200,0.2)} /* border-color:; */ /* WebKit arrow */ @media screen and (-webkit-min-device-pixel-ratio:0) { SELECT {background:#FFF url(/_images/master/select-bg.png) no-repeat top right;-moz-background-size:30px 32px;-webkit-background-size:30px 32px;background-size:30px 32px} } INPUT[type='text']:hover, INPUT[type='password']:hover, TEXTAREA:hover, SELECT:hover {border-color:#c2c9d6;background-color:#fafbfc} /* BUTTON:hover, .button:hover {text-decoration:none;cursor:pointer;font-weight:300} */ /* Widths */ INPUT[type='text'], INPUT[type='password'], SELECT, TEXTAREA {width:212px} .fake-input {width:207px;display:inline-block} /* Heights */ INPUT[type='text'], INPUT[type='password'], SELECT, {height:34px} TEXTAREA {height:80px} .fake-input {height:34px} /* Padding */ INPUT[type='text'], INPUT[type='password'], SELECT, TEXTAREA {padding:5px} .fake-input {padding:5px} /* Placeholders */ ::-webkit-input-placeholder {font-weight:300;color:#C2C2C2} :-moz-placeholder {font-weight:300;color:#C2C2C2} /* Firefox -18 */ ::-moz-placeholder {font-weight:300;color:#C2C2C2} /* Firefox 19+ */ :-ms-input-placeholder {font-weight:300;color:#C2C2C2} /******************************************************************************/ /* MISC */ /******************************************************************************/ .floatleft {float:left} .floatright {float:right} .clearblock {clear:both} .hidden {display:none !important;visibility:hidden} .visible {display:inherit;visibility:visible} .noscroll, .no-scroll {overflow:hidden} .noselect, .no-select {user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none} .nospace, .no-space {margin:0;padding:0} .noanim, .no-anim {-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none} .emboss {box-shadow:1px 1px 1px #FFF,inset 1px 1px 1px rgba(255,255,255,0.4)} /*** BLAKEMEDIA BADGE ***/ .bm-badge {width:102px;height:20px;background-image:url(http://cdn.blakeserve.com/images/bm/badge-200.png)} .bm-badge:hover {background-position:-0 -200px} .bm-badge A {width:100%;height:100%;display:inline-block} .bm-badge.white {background-position:-150px -0px} .bm-badge.white:hover {background-position:-0 -50px} .bm-badge.black {background-position:-0 -150px} .bm-badge.black:hover {background-position:-0 -200px} .badge-blakedigital { margin: -6px 0 6px; float: right; display: block; width: 90px; height: 20px; text-indent: -999em; transition: none !important; background: transparent url("http://cdn.blakeserve.com/images/blakedigital/badge-400.png?@2x") 0 -25px / 200px auto no-repeat; } .badge-blakedigital:hover { background-position: 0px -100px; } /******************************************************************************/ /* FORMS */ /******************************************************************************/ /*** GROUPS ***/ .btn-group BUTTON, .btn-group .button {float:left;border-radius:0} .btn-group BUTTON:last-of-type, .btn-group .button:last-of-type {margin-left:0 !important;border-left-width:0;border-radius:0 3px 3px 0} .btn-group BUTTON:first-child, .btn-group .button:first-child {border-left-width:1px;border-radius:3px 0 0 3px} /*** MESSAGES ***/ .msg-done {width:50%;position:absolute;top:0;left:0;margin:100px 25% 0;text-align:center} .msg-done .buttons {margin-top:20px} .msg-cover {width:100%;height:100%;position:absolute;top:0;left:0;background:transparent;-webkit-filter:blur(2px)} /*** SPECIAL INPUTS ***/ INPUT.valid, BUTTON.valid, .button.valid, SELECT.valid, TEXTAREA.valid, INPUT.valid:hover, BUTTON.valid:hover, .button.valid:hover, SELECT.valid:hover, TEXTAREA.valid:hover {border-color:#c3d6b0;color:#5a7f41;background-color:#fbfcfa} INPUT.invalid, BUTTON.invalid, .button.invalid, SELECT.invalid, TEXTAREA.invalid, INPUT.invalid:hover, BUTTON.invalid:hover, .button.invalid:hover, SELECT.invalid:hover, TEXTAREA.invalid:hover {border-color:#e2a4a4;color:#b60000;background-color:#faf5f5} INPUT.disabled, BUTTON.disabled, .button.disabled, SELECT.disabled, TEXTAREA.disabled, INPUT.disabled:hover, BUTTON.disabled:hover, .button.disabled:hover, SELECT.disabled:hover, TEXTAREA.disabled:hover, INPUT:disabled, INPUT:disabled:hover {border-color:#D9D9D9;color:#C2C2C2;background-color:#FCFCFC} /*** DIMENSIONS ***/ /** WIDTHS **/ INPUT.tiny, TEXTAREA.tiny, SELECT.tiny {width:40px} INPUT.small, TEXTAREA.small, SELECT.small {width:100px} INPUT.medium, TEXTAREA.medium, SELECT.medium {width:200px} INPUT.big, TEXTAREA.big, SELECT.big {width:300px} INPUT.huge, TEXTAREA.huge, SELECT.huge {width:400px} INPUT.flow-w, TEXTAREA.flow-w, SELECT.flow-w, LABEL.flow-w {width:auto} INPUT.fill-w, TEXTAREA.fill-w, SELECT.fill-w, LABEL.fill-w {width:100%} /** HEIGHTS **/ TEXTAREA.short {height:20px} TEXTAREA.mid {height:41px} TEXTAREA.tall {height:70px} TEXTAREA.flow-h {height:auto} /** BOTH **/ INPUT.flow, TEXTAREA.flow, SELECT.flow {width:auto;height:auto} /*** BUTTONS ***/ /* BUTTON[class*='btn'], .button[class*='btn']:not([class='button']) {text-shadow:0 1px 1px rgba(0,0,0,0.5);color:#FFF;} */ /* Off */ /* BUTTON,.button {background:#fdfdfd;background:-moz-linear-gradient(top, #fdfdfd 0%, #f2f2f2 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#f2f2f2));background:-webkit-linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%);background:-o-linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%);background:-ms-linear-gradient(top, #fdfdfd 0%,#f2f2f2 100%);background:linear-gradient(to bottom, #fdfdfd 0%,#f2f2f2 100%)} BUTTON.btnFailed,BUTTON.btnCancel,BUTTON.btnError, .button.btnFailed,.button.btnCancel,.button.btnError {border-color:#ce3434;background:#e77373;background:-moz-linear-gradient(top, #e77373 0%, #ce3434 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e77373), color-stop(100%,#ce3434));background:-webkit-linear-gradient(top, #e77373 0%,#ce3434 100%);background:-o-linear-gradient(top, #e77373 0%,#ce3434 100%);background:-ms-linear-gradient(top, #e77373 0%,#ce3434 100%);background:linear-gradient(to bottom, #e77373 0%,#ce3434 100%)} BUTTON.btnDanger,BUTTON.btnWarning,BUTTON.btnAlert, .button.btnDanger,.button.btnWarning,.button.btnAlert {border-color:#f58d46;background:#f6ad55;background:-moz-linear-gradient(top, #f6ad55 0%, #f58d46 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6ad55), color-stop(100%,#f58d46));background:-webkit-linear-gradient(top, #f6ad55 0%,#f58d46 100%);background:-o-linear-gradient(top, #f6ad55 0%,#f58d46 100%);background:-ms-linear-gradient(top, #f6ad55 0%,#f58d46 100%);background:linear-gradient(to bottom, #f6ad55 0%,#f58d46 100%)} BUTTON.btnUrgent, .button.btnUrgent {border-color:#eba701;background:#ffe54f;background:-moz-linear-gradient(top, #ffe44e 0%, #eba701 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe44e), color-stop(100%,#eba701));background:-webkit-linear-gradient(top, #ffe44e 0%,#eba701 100%);background:-o-linear-gradient(top, #ffe44e 0%,#eba701 100%);background:-ms-linear-gradient(top, #ffe44e 0%,#eba701 100%);background:linear-gradient(to bottom, #ffe44e 0%,#eba701 100%)} BUTTON.btnOkay,BUTTON.btnNotice, .button.btnOkay,.button.btnNotice {border-color:#3794bf;background:#54b4e0;background:-moz-linear-gradient(top, #54b4e0 0%, #3794bf 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#54b4e0), color-stop(100%,#3794bf));background:-webkit-linear-gradient(top, #54b4e0 0%,#3794bf 100%);background:-o-linear-gradient(top, #54b4e0 0%,#3794bf 100%);background:-ms-linear-gradient(top, #54b4e0 0%,#3794bf 100%);background:linear-gradient(to bottom, #54b4e0 0%,#3794bf 100%)} BUTTON.btnDisabled,BUTTON.btnInactive, .button.btnDisabled,.button.btnInactive {border-color:#b7b7b7;background:#b7b7b7;background:-moz-linear-gradient(top, #e1e1e1 0%, #b7b7b7 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#b7b7b7));background:-webkit-linear-gradient(top, #e1e1e1 0%,#b7b7b7 100%);background:-o-linear-gradient(top, #e1e1e1 0%,#b7b7b7 100%);background:-ms-linear-gradient(top, #e1e1e1 0%,#b7b7b7 100%);background:linear-gradient(to bottom, #e1e1e1 0%,#b7b7b7 100%)} BUTTON.btnSuccess,BUTTON.btnComplete, .button.btnSuccess,.button.btnComplete {border-color:#54ac48;background:#54ac48;background:-moz-linear-gradient(top, #8bc349 0%, #54ac48 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#8bc349), color-stop(100%,#54ac48));background:-webkit-linear-gradient(top, #8bc349 0%,#54ac48 100%);background:-o-linear-gradient(top, #8bc349 0%,#54ac48 100%);background:-ms-linear-gradient(top, #8bc349 0%,#54ac48 100%);background:linear-gradient(to bottom, #8bc349 0%,#54ac48 100%)} */ /* Hover */ /* BUTTON:hover,.button:hover {border-color:#c2c9d6} BUTTON.btnFailed:hover,BUTTON.btnCancel:hover,BUTTON.btnError:hover, .button.btnFailed:hover,.button.btnCancel:hover,.button.btnError:hover {border-color:#ac2727} BUTTON.btnDanger:hover,BUTTON.btnWarning:hover,BUTTON.btnAlert:hover, .button.btnDanger:hover,.button.btnWarning:hover,.button.btnAlert:hover {border-color:#da6d26} BUTTON.btnUrgent:hover, .button.btnUrgent:hover {border-color:#b38822} BUTTON.btnOkay:hover,BUTTON.btnNotice:hover, .button.btnOkay:hover,.button.btnNotice:hover {border-color:#157aa9} BUTTON.btnDisabled:hover,BUTTON.btnInactive:hover, .button.btnDisabled:hover,.button.btnInactive:hover {border-color:#9a9a9a} BUTTON.btnSuccess:hover,BUTTON.btnComplete:hover, .button.btnSuccess:hover,.button.btnComplete:hover {border-color:#3a8c00} */ /*** COLOURS ***/ .txtFailed,.txtCancel,.txtError {color:#c7002c} .txtDanger,.txtWarning,.txtAlert {color:#f58b08} .txtUrgent {color:#f0cc00} .txtOkay,.txtNotice {color:#00a4e4} .txtDisabled,.txtInactive {color:#959595} .txtSuccess,.txtComplete {color:#4cae07} /*** MISC ***/ .toggle-inputs {width:auto;display:inline-block} .toggle-inputs .col {width:300px;float:left} .toggle-inputs LABEL {width:auto;text-align:left} /******************************************************************************/ /* COMPONENTS */ /******************************************************************************/ /*** NOTIFICATIONS ***/ .notify {width:200px;height:90px;position:fixed;bottom:40px;margin:10px 10px 0;border:1px solid #C2C2C2;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,0.6);background:#FFF;z-index:1000} .notify.before {right:-200px;opacity:0} .notify.active {right:10px;opacity:1} .notify.after {right:200px;opacity:0} .notify .content {padding:10px} .notify .content .title {font-size:13px;font-weight:bold;color:#1D769F} .notify .content .message {font-size:11px} /*** NOTICES ***/ /* NOTE: Both notice and inner must have heights set as pixels! */ .notice {width:100%;height:30px;position:absolute;top:0;left:0} .notice .inner {width:100%;height:30px;position:absolute;bottom:0;left:0;text-shadow:none;font-size:80%;font-weight:300;color:#FFF;background:rgba(0,0,0,0.4)} .notice .message {width:100%;height:100%;-moz-box-sizing:border-box;box-sizing:border-box;padding:7px} .notice .prefix {min-width:50px;padding-left:13px;padding-right:15px;float:left;font-weight:bold} .notice .nFailed, .notice .nCancel, .notice .nError {background:#e77373;background:rgba(231,115,115,0.9)} .notice .nDanger, .notice .nWarning, .notice .nAlert {background:#f6ad55;background:rgba(246,173,85,0.8)} .notice .nUrgent {background:#b38822;background:rgba(179,136,34,0.7)} .notice .nNotice, .notice .nOkay, .notice .nSuccess, .notice .nComplete {background:#1a6d94;background:rgba(26,109,148,0.7)} /* .notice .nUrgent {background:#ffe54f;background:rgba(255,229,79,0.9)} */ /* .nNotice,.nOkay {background:#54b4e0;background:rgba(84,180,224,0.9)} */ /* .nSuccess, .nComplete {background:#54ac48;background:rgba(84,172,72,0.9)} */ /* .notice .nSuccess, .notice .nComplete {background:#8dc54a;background:rgba(141,197,74,0.9)} */ /*** MODALS ***/ .cover {width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.8);z-index:999} .modal {width:500px;margin:0 auto;border:1px solid #C2C2C2;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-shadow:5px 5px 20px rgba(0, 0, 0, 0.5);-moz-box-shadow:5px 5px 20px rgba(0, 0, 0, 0.5);box-shadow:5px 5px 20px rgba(0, 0, 0, 0.5);z-index:1000;background:#FFF} .modal .modal-content {padding:10px;-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0} .modal .modal-ctrl {padding:10px;-webkit-border-radius:0 0 2px 2px;-moz-border-radius:0 0 2px 2px;border-radius:0 0 2px 2px;text-align:right;background:#F3F3F3} .modal .modal-ctrl BUTTON, .modal .modal-ctrl .button {margin-left:5px} .modal .modal-content .loading-icon {margin-top:0} .modal .modal-content .attempts {text-align:center;color:#C2C2C2} .modal .modal-content .row {margin-bottom:5px} .modal .notice {top:-1px;left:-1px;padding:0 0 0 2px} .modal .notice, .modal .notice .inner {-webkit-border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0;overflow:hidden} /*** LOADING ICONS ***/ .loading-icon {position:relative;margin:25% auto 0} /* TODO: Replace .bar-X with :nth(X)! We can use CSS3! */ /** TYPE 1: Default **/ .loading-icon.circle {width:64px;height:64px;-moz-transform:scale(0.6);-webkit-transform:scale(0.6);-ms-transform:scale(0.6);-o-transform:scale(0.6);transform:scale(0.6)} .loading-icon.circle DIV {position:absolute;opacity:0;height:12px;width:12px;-moz-border-radius:6px;-moz-animation-name:f_fadeG;-moz-animation-duration:0.4s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;-webkit-border-radius:6px;-webkit-animation-name:f_fadeG;-webkit-animation-duration:0.4s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;-ms-border-radius:6px;-ms-animation-name:f_fadeG;-ms-animation-duration:0.4s;-ms-animation-iteration-count:infinite;-ms-animation-direction:linear;-o-border-radius:6px;-o-animation-name:f_fadeG;-o-animation-duration:0.4s;-o-animation-iteration-count:infinite;-o-animation-direction:linear;border-radius:6px;animation-name:f_fadeG;animation-duration:0.4s;animation-iteration-count:infinite;animation-direction:linear;background:#CCC} /* TODO: Namespacing! */ .circle-1 {left:0;top:26px; -moz-animation-delay:0.15s;-webkit-animation-delay:0.15s;-ms-animation-delay:0.15s;-o-animation-delay:0.15s;animation-delay:0.15s} .circle-2 {left:8px;top:8px; -moz-animation-delay:0.2s;-webkit-animation-delay:0.2s;-ms-animation-delay:0.2s;-o-animation-delay:0.2s;animation-delay:0.2s} .circle-3 {left:26px;top:0; -moz-animation-delay:0.25s;-webkit-animation-delay:0.25s;-ms-animation-delay:0.25s;-o-animation-delay:0.25s;animation-delay:0.25s} .circle-4 {right:8px;top:8px; -moz-animation-delay:0.3s;-webkit-animation-delay:0.3s;-ms-animation-delay:0.3s;-o-animation-delay:0.3s;animation-delay:0.3s} .circle-5 {right:0;top:26px; -moz-animation-delay:0.35s;-webkit-animation-delay:0.35s;-ms-animation-delay:0.35s;-o-animation-delay:0.35s;animation-delay:0.35s} .circle-6 {right:8px;bottom:8px; -moz-animation-delay:0.4s;-webkit-animation-delay:0.4s;-ms-animation-delay:0.4s;-o-animation-delay:0.4s;animation-delay:0.4s} .circle-7 {left:26px;bottom:0; -moz-animation-delay:0.45s;-webkit-animation-delay:0.45s;-ms-animation-delay:0.45s;-o-animation-delay:0.45s;animation-delay:0.45s} .circle-8 {left:8px;bottom:8px; -moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;-ms-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s} /* {-moz-animation-duration:0.2s;-webkit-animation-duration:0.2s;-ms-animation-duration:0.2s;-o-animation-duration:0.2s;animation-duration:0.2s} .circle-1 {left:0;top:26px; -moz-animation-delay:0.1s;-webkit-animation-delay:0.1s;-ms-animation-delay:0.1s;-o-animation-delay:0.1s;animation-delay:0.1s} .circle-2 {left:8px;top:8px; -moz-animation-delay:0.2s;-webkit-animation-delay:0.2s;-ms-animation-delay:0.2s;-o-animation-delay:0.2s;animation-delay:0.2s} .circle-3 {left:26px;top:0; -moz-animation-delay:0.3s;-webkit-animation-delay:0.3s;-ms-animation-delay:0.3s;-o-animation-delay:0.3s;animation-delay:0.3s} .circle-4 {right:8px;top:8px; -moz-animation-delay:0.4s;-webkit-animation-delay:0.4s;-ms-animation-delay:0.4s;-o-animation-delay:0.4s;animation-delay:0.4s} .circle-5 {right:0;top:26px; -moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;-ms-animation-delay:0.5s;-o-animation-delay:0.5s;animation-delay:0.5s} .circle-6 {right:8px;bottom:8px; -moz-animation-delay:0.6s;-webkit-animation-delay:0.6s;-ms-animation-delay:0.6s;-o-animation-delay:0.6s;animation-delay:0.6s} .circle-7 {left:26px;bottom:0; -moz-animation-delay:0.7s;-webkit-animation-delay:0.7s;-ms-animation-delay:0.7s;-o-animation-delay:0.7s;animation-delay:0.7s} .circle-8 {left:8px;bottom:8px; -moz-animation-delay:0.8s;-webkit-animation-delay:0.8s;-ms-animation-delay:0.8s;-o-animation-delay:0.8s;animation-delay:0.8s} */ @-o-keyframes f_fadeG {0% {opacity:1.0} 100% {opacity:0}} @-ms-keyframes f_fadeG {0% {opacity:1.0} 100% {opacity:0}} @-moz-keyframes f_fadeG {0% {opacity:1.0} 100% {opacity:0}} @-webkit-keyframes f_fadeG {0% {opacity:1.0} 100% {opacity:0}} @keyframes f_fadeG {0% {opacity:1.0} 100% {opacity:0}} /** TYPE 2: Bars **/ .loading-icon.bars {width:53px} .loading-icon.bars DIV {background-color:#3091be;border:1px solid #3091be;float:left;height:37px;margin-left:3px;width:10px;opacity:0.1;-moz-animation-name:bounceG;-moz-animation-duration:1.3s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;-moz-transform:scale(0.7);-webkit-animation-name:bounceG;-webkit-animation-duration:1.3s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;-webkit-transform:scale(0.7);-ms-animation-name:bounceG;-ms-animation-duration:1.3s;-ms-animation-iteration-count:infinite;-ms-animation-direction:linear;-ms-transform:scale(0.7);-o-animation-name:bounceG;-o-animation-duration:1.3s;-o-animation-iteration-count:infinite;-o-animation-direction:linear;-o-transform:scale(0.7);animation-name:bounceG;animation-duration:1.3s;animation-iteration-count:infinite;animation-direction:linear;transform:scale(0.7);} /* .bar-1 {-moz-animation-delay:0.39s;-webkit-animation-delay:0.39s;-ms-animation-delay:0.39s;-o-animation-delay:0.39s;animation-delay:0.39s;} .bar-2 {-moz-animation-delay:0.52s;-webkit-animation-delay:0.52s;-ms-animation-delay:0.52s;-o-animation-delay:0.52s;animation-delay:0.52s;} .bar-3 {-moz-animation-delay:0.65s;-webkit-animation-delay:0.65s;-ms-animation-delay:0.65s;-o-animation-delay:0.65s;animation-delay:0.65s;} */ .bar-1 {-moz-animation-delay:0.39s;-webkit-animation-delay:0.39s;-ms-animation-delay:0.39s;-o-animation-delay:0.39s;animation-delay:0.39s;} .bar-2 {-moz-animation-delay:0.48s;-webkit-animation-delay:0.48s;-ms-animation-delay:0.48s;-o-animation-delay:0.48s;animation-delay:0.48s;} .bar-3 {-moz-animation-delay:0.57s;-webkit-animation-delay:0.57s;-ms-animation-delay:0.57s;-o-animation-delay:0.57s;animation-delay:0.57s;} @-moz-keyframes bounceG {0% {-moz-transform:scale(1.2); opacity:1} 100% {-moz-transform:scale(0.7); opacity:0.1}} @-webkit-keyframes bounceG {0% {-webkit-transform:scale(1.2); opacity:1} 100% {-webkit-transform:scale(0.7); opacity:0.1}} @-ms-keyframes bounceG {0% {-ms-transform:scale(1.2); opacity:1} 100% {-ms-transform:scale(0.7); opacity:0.1}} @-o-keyframes bounceG {0% {-o-transform:scale(1.2); opacity:1} 100% {-o-transform:scale(0.7); opacity:0.1}} @keyframes bounceG {0% {transform:scale(1.2); opacity:1} 100% {transform:scale(0.7); opacity:0.1}} /******************************************************************************/ /* NOTES */ /******************************************************************************/ /******************************************************************************/ /* PSUEDO CLASSES /* /* :last-child IE9+ only /* :link, :active, etc. Not required, but recommened /* /* Font-size: 100% Fonts need to be scaled: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ /* /* Font smoothing: http://maxvoltar.com/archive/-webkit-font-smoothing /* Styling links: http://www.smashingmagazine.com/2010/02/13/the-definitive-guide-to-styling-web-links/ /* Browser CSS support: http://www.quirksmode.org/css/contents.html /******************************************************************************/ /******************************************************************************/ /* MEDIA QUERIES /* /* Media: @media only screen/print /* Dimensions: and (max-width: X) and (max-device-width: X) /* Orientation: and (orientation : landscape/portrait) /* /* Common queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ /******************************************************************************/ /******************************************************************************/ /* STICKY FOOTER /* /* HTML, BODY {height:100%} /* #tplMaster {height:auto !important;height:100%;min-height:100%;margin-bottom:-FOOTERpx} /* #tplContent {padding-bottom:FOOTERpx} /* /* Make sure the footer is outside the master container! /* /* Source: http://code.google.com/p/cleanstickyfooter/ /******************************************************************************/ /******************************************************************************/ /* OTHER NOTES /* /* To use common CSS3 properties in IE6-9, use the following /* behavior:url(/_assets/js/SCRIPT.htc); /* These scripts use Javascript to replicate CSS3 in old browsers. /* /* Behavior scripts includes in this template: /* PIE http://css3pie.com/ /* -ms-transform http://www.bcreatives.com.au/blog/cross-browser-rotate-with-css-and-javascript.html /* /* CSS3 transforms in IE: http://www.useragentman.com/IETransformsTranslator/ /******************************************************************************/ /******************************* END STYLESHEET *******************************/