@charset "UTF-8"; /***** SHOELACE – RESPONSIVE TEMPLATE *****/ /* The following template has been compiled by Professor Ryan Clayton for Web 2 Students at College of DuPage. /* This template is based off of Twitter's Bootstrap (http://www.getbootstrap.com/) /* Most class names are the same as Bootstrap's. This will make it easy to jump into Bootstrap in the future. /* 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 */ * { -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 */ /***** MANUAL CLEAR ***** This is just in case you need to manually add a clear to a div */ .clear { 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/ */ img, object, embed, video { max-width: 100%; } /***** 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; } /* 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) *****/ /***** PADDING OVERRIDE *****/ /* .padded and .no-padding can be used to add or remove padding from columns */ .add-padding { padding:0 15px; } .no-padding { padding: 0; } /***** END PADDING OVERRIDE *****/ /***** 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 at all sizes */ .hidden { display: none !important; } /* 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 *****/