/* Generated by less 2.5.1 */ /* Shoelace – Responsive Template /* This template is based off of Twitter's Bootstrap (http://www.getbootstrap.com/) /* NOTE this is not straight Bootstap. There are many simplifications, revisions, and additions. */ /***** BORDER BOX FIX ***** Allows border / padding to be included in the defined dimensions of an element */ @import url('//fonts.googleapis.com/css?family=Open+Sans'); * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /***** END BORDER BOX FIX */ /***** CLEAR FIX ***** This automatically clears .container and .row. When this class (.clearfix) is applied to any other element, and it will automatically insert a "clear" below that element. */ .clearfix:before, .clearfix:after, .container:before, .container:after, .row:before, .row:after { display: table; content: " "; } .clearfix:after, .container:after, .row:after { clear: both; } /***** END CLEAR FIX */ /***** MAKING EMs EASY ***** EMs keep type-sizing proportional and should be used for all type-sizing on your site. Scaling the font size of to 62.5% changes changes the default font size of 16px to 10px (16px * 62.5% = 10px). This also means 1em = 10px. This makes it easy to convert our type into ems. Example 18px = 1.8em. */ html { font-size: 62.5%; } /***** END MAKING EMs EASY *****/ /***** MAKING IMAGES & MEDIA FLUID ***** Fluid images will resize to the width of your container. Fluid media requires that you remove the media's HEIGHT and WIDTH attributes from the HTML www.alistapart.com/articles/fluid-images/ */ /***** END MAKING IMAGES & MEDIA FLUID *****/ /***** XS (Extra Small) – MOBILE AND UP *****/ /* Centers the container and adds padding */ .container { margin: 0 auto; padding-right: 15px; padding-left: 15px; } /* Gets rid of padding on the end of a row */ .row { margin-right: -15px; margin-left: -15px; } /* Adds additional negative-margin to make a row (or other div) flush. This will be used mainly to fix one-off scenarios */ .wide { margin-right: -30px; margin-left: -30px; } /* Tells all columns to float left by default and adds padding */ .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { min-height: 1px; float: left; padding: 0 15px; } /* .padded and .no-padding can be used to add or remove padding from collumns */ .add-padding { padding: 0 15px; } .no-padding { padding: 0; } /* The following classes will assign a % based width to any given element. (Applies to XS AND UP) */ .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } /* The following classes will assign an offset (margin-left) to any given element. (Applies to XS AND UP) */ .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } /***** END XS (Extra Small) */ /***** SM (Small) - Tablet Size AND ABOVE! (768px) */ @media (min-width: 768px) { /* Changes the containter to 750px wide when the browser reaches 768px */ .container { width: 750px; } /* The following classes will assign a % based width to any given element. (Applies to SM AND UP) */ .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } /* The following classes will assign an offset (margin-left) to any given element. (Applies to SM AND UP) */ .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } /***** END SM (Small) */ /***** MD (Medium) - Medium Desktop Size AND ABOVE! (992px) */ @media (min-width: 992px) { /* Changes the containter to 970px wide when the browser reaches 992px */ .container { width: 970px; } /* The following classes will assign a % based width to any given element. (Applies to MD AND UP) */ .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } /* The following classes will assign an offset (margin-left) to any given element. (Applies to MD AND UP) */ .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } /***** END MD (Medium) */ /***** LG (Large) – Large Desktop AND BEYOND! (1200px) */ @media (min-width: 1200px) { /* Changes the containter to 1170px wide when the browser reaches 1200px */ .container { width: 1170px; } /* The following classes will assign a % based width to any given element. (Applies to LG AND UP) */ .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } /* The following classes will assign an offset (margin-left) to any given element. (Applies to LG AND UP) */ .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } /***** END LG (Large) */ /***** Float Override */ /* Tells the assigned column to float right (always) **/ .pull-right { float: right !important; } .pull-left { float: left !important; } /* Tells the assigned column to float right for XS size (only) **/ @media (max-width: 767px) { .pull-right-xs { float: right !important; } .pull-left-xs { float: left !important; } } /* Tells the assigned column to float right for SM size (only) **/ @media (min-width: 768px) and (max-width: 991px) { .pull-right-sm { float: right !important; } .pull-left-sm { float: left !important; } } /* Tells the assigned column to float right for MD size (only) **/ @media (min-width: 992px) and (max-width: 1199px) { .pull-right-md { float: right !important; } .pull-left-md { float: left !important; } } /* Tells the assigned column to float right for LG size (only) **/ @media (min-width: 1200px) { .pull-right-lg { float: right !important; } .pull-left-lg { float: left !important; } } /***** END Float Override */ /***** Selective Visibility */ /* Tells the assigned column to be hidden for XS size (only) **/ @media (max-width: 767px) { .hidden-xs { display: none !important; } } /* Tells the assigned column to be hidden for SM size (only) **/ @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } /* Tells the assigned column to be hidden for MD size (only) **/ @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } /* Tells the assigned column to be hidden for LG size (only) **/ @media (min-width: 1200px) { .hidden-lg { display: none !important; } } /***** END Selective Visibility */ .clear { clear: both; } /*------------------------------------*\ Apaxy by @adamwhitcroft Theme name: Apaxy Theme author: @adamwhitcroft \*------------------------------------*/ /* Have to use @import for the font, as you can only specify a single stylesheet */ * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; color: #61666c; font-weight: 400; font-size: 1em; font-family: "proxima-nova", helvetica, arial, sans-serif; line-height: 2em; } body { -webkit-backface-visibility: hidden; } code { font-family: consolas,monospace; } a { color: #61666c; text-decoration: none; } a, img { border: none; outline: none; } a:hover { color: #2a2a2a; } /*------------------------------------*\ Demo block \*------------------------------------*/ .block { font-size: .875em; margin: 20px 0; padding: 20px; color: #9099A3; } /*------------------------------------*\ Table (directory listing) \*------------------------------------*/ table { width: 100%; border-collapse: collapse; font-size: .875em; } tr { outline: 0; border: 0; } tr:hover td { background: #f6f6f6; } th { text-align: left; font-size: .75em; padding-right: 20px; } /* 2nd Column: Filename */ th + th { width: 65%; } /* 3rd Column: Last Modified */ /* 4th Column: Size */ th + th + th + th { width: 5%; } tr td:first-of-type { padding-left: 10px; padding-right: 10px; } td { padding: 5px 0; outline: 0; border: 0; border-bottom: 1px solid #edf1f5; vertical-align: middle; text-align: left; -webkit-transition: background 300ms ease; -moz-transition: background 300ms ease; -ms-transition: background 300ms ease; -o-transition: background 300ms ease; transition: background 300ms ease; } td a { display: block; } tr.parent a[href^="/"] { color: #9099A3; } .parent a[href^="/"]:hover { color: #2281d0; } /*------------------------------------*\ Footer \*------------------------------------*/ .footer { text-align: center; font-size: .75em; } /* Custom Styles */ /* Navigation */ #navigation { background-color: #41c219; /* Login Form Styles */ } #navigation ul { color: #fff; font-size: 1rem; margin-top: 10px; margin-bottom: 25px; text-align: center; } #navigation li { display: inline-block; width: 100%; line-height: 2.4em; } #navigation a, #navigation a:link { color: #fff; text-decoration: none; } #navigation a:hover { text-decoration: underline; } #navigation #logo { width: 155px; display: block; margin: 14px auto 0 auto; float: left; } #navigation #menu-button { color: #fff; font-size: 2rem; padding: 10px 0px; border: solid rgba(255, 255, 255, 0.4) 1px; border-radius: 2px; width: 50px; cursor: pointer; text-align: center; margin: 10px auto; float: right; } #navigation i.icon-cart { font-size: 90%; } #navigation .login-form input { height: 38px; color: #2f2f2f; border: none; border-radius: 1px; } #navigation .login-form input { margin-right: 10px; } #navigation .login-form .submit-button { display: inline-block; cursor: pointer; background-color: #2f2f2f; color: #fff; padding: 0 12px; border-radius: 1px; } #navigation .login-form #login-email, #navigation .login-form #plogin-assword { margin-right: 5px; } #navigation .login-form #login-password { margin-left: 10px; } #navigation .cancel-button a:hover { text-decoration: none!important; } #navigation .cancel-button { margin-left: 0px; display: inline-block; line-height: 2.4em; } /* Footer */ #footer { background-color: #2f2f2f; line-height: 30px; font-size: .8rem; color: #fff; padding: 20px 0; text-align: center; } #footer p { font-weight: 700; letter-spacing: .5px; } #footer a, #footer a:active, #footer a:link, #footer a:visited { color: #fff; text-decoration: none; } #footer a:hover { color: #fff; text-decoration: underline; } #footer li { list-style-type: none; } #navigation, #footer { font-family: "proxima-nova", helvetica, arial, sans-serif; font-weight: 300; -webkit-font-smoothing: auto; } h1 { margin-bottom: 30px; font-size: 30px; color: #2f2f2f; } /* Welcome Box */ .welcome { background-color: #f1f1f1; border: solid 1px #d7d7d7; padding: 30px; margin-bottom: 30px; } .welcome h2 { font-size: 22px; color: #2f2f2f; } .welcome p { font-size: 15px; line-height: 24px; margin-bottom: 20px; } .welcome a { color: #41c219; } /***** NAV FOOTER – MD *****/ @media (min-width: 992px) { /* Navigation – MD */ #navigation #nav { padding: 12px 0; display: block !important; } #navigation ul { font-size: 1rem; float: right; margin: 0; } #navigation li { margin-left: 22px; width: inherit; } #navigation #logo { margin: 12px 0 0 0; } /* Footer – MD */ #footer { line-height: 60px; padding: 0; } #footer ul { float: right; } #footer li { display: inline; margin-left: 25px; } #footer p { float: left; font-weight: 300; } } /***** NAV FOOTER LG *****/ @media (min-width: 1200px) { /* Navigation – LG */ #navigation #nav { padding: 15px 0; } #navigation ul { font-size: 1rem; } #navigation li { margin-left: 35px; } #navigation #logo { margin-top: 15px; } } #navigation { margin-bottom: 50px; } footer { margin-top: 50px; }