|
@@ -36,26 +36,16 @@ remember less is more.
|
|
|
/*********************
|
|
/*********************
|
|
|
CLEARFIXIN'
|
|
CLEARFIXIN'
|
|
|
*********************/
|
|
*********************/
|
|
|
-.clearfix {
|
|
|
|
|
- zoom: 1; }
|
|
|
|
|
- .clearfix:before, .clearfix:after {
|
|
|
|
|
- content: "";
|
|
|
|
|
- display: table; }
|
|
|
|
|
- .clearfix:after {
|
|
|
|
|
- clear: both; }
|
|
|
|
|
|
|
+.clearfix { zoom: 1; }
|
|
|
|
|
+.clearfix:before, .clearfix:after { content: ""; display: table; }
|
|
|
|
|
+.clearfix:after { clear: both; }
|
|
|
|
|
|
|
|
/*********************
|
|
/*********************
|
|
|
TOOLS
|
|
TOOLS
|
|
|
*********************/
|
|
*********************/
|
|
|
-* {
|
|
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
|
|
- -moz-box-sizing: border-box;
|
|
|
|
|
- box-sizing: border-box; }
|
|
|
|
|
|
|
+* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
|
|
|
|
|
|
|
|
-.image-replacement {
|
|
|
|
|
- text-indent: 100%;
|
|
|
|
|
- white-space: nowrap;
|
|
|
|
|
- overflow: hidden; }
|
|
|
|
|
|
|
+.image-replacement { text-indent: 100%; white-space: nowrap; overflow: hidden; }
|
|
|
|
|
|
|
|
/*********************
|
|
/*********************
|
|
|
COLORS
|
|
COLORS
|
|
@@ -77,54 +67,30 @@ TYPOGRAPHY
|
|
|
http://www.fontsquirrel.com/
|
|
http://www.fontsquirrel.com/
|
|
|
Be sure to remove the comment brackets.
|
|
Be sure to remove the comment brackets.
|
|
|
*/
|
|
*/
|
|
|
-/* @font-face {
|
|
|
|
|
- font-family: 'Font Name';
|
|
|
|
|
- src: url('library/fonts/font-name.eot');
|
|
|
|
|
- src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
|
|
|
|
|
- url('library/fonts/font-name.woff') format('woff'),
|
|
|
|
|
- url('library/fonts/font-name.ttf') format('truetype'),
|
|
|
|
|
- url('library/fonts/font-name.svg#font-name') format('svg');
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- font-style: normal;
|
|
|
|
|
|
|
+/* @font-face { font-family: 'Font Name'; src: url('library/fonts/font-name.eot'); src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'), url('library/fonts/font-name.woff') format('woff'), url('library/fonts/font-name.ttf') format('truetype'), url('library/fonts/font-name.svg#font-name') format('svg'); font-weight: normal; font-style: normal;
|
|
|
}
|
|
}
|
|
|
*/
|
|
*/
|
|
|
/*
|
|
/*
|
|
|
use the best ampersand
|
|
use the best ampersand
|
|
|
http://simplebits.com/notebook/2008/08/14/ampersands-2/
|
|
http://simplebits.com/notebook/2008/08/14/ampersands-2/
|
|
|
*/
|
|
*/
|
|
|
-span.amp {
|
|
|
|
|
- font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
|
|
|
|
|
- font-style: italic; }
|
|
|
|
|
|
|
+span.amp { font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important; font-style: italic; }
|
|
|
|
|
|
|
|
-.text-left {
|
|
|
|
|
- text-align: left; }
|
|
|
|
|
|
|
+.text-left { text-align: left; }
|
|
|
|
|
|
|
|
-.text-center {
|
|
|
|
|
- text-align: center; }
|
|
|
|
|
|
|
+.text-center { text-align: center; }
|
|
|
|
|
|
|
|
-.text-right {
|
|
|
|
|
- text-align: right; }
|
|
|
|
|
|
|
+.text-right { text-align: right; }
|
|
|
|
|
|
|
|
-.alert-help, .alert-info, .alert-error, .alert-success {
|
|
|
|
|
- margin: 10px;
|
|
|
|
|
- padding: 5px 18px;
|
|
|
|
|
- border: 1px solid; }
|
|
|
|
|
|
|
+.alert-help, .alert-info, .alert-error, .alert-success { margin: 10px; padding: 5px 18px; border: 1px solid; }
|
|
|
|
|
|
|
|
-.alert-help {
|
|
|
|
|
- border-color: #e8dc59;
|
|
|
|
|
- background: #ebe16f; }
|
|
|
|
|
|
|
+.alert-help { border-color: #e8dc59; background: #ebe16f; }
|
|
|
|
|
|
|
|
-.alert-info {
|
|
|
|
|
- border-color: #bfe4f4;
|
|
|
|
|
- background: #d5edf8; }
|
|
|
|
|
|
|
+.alert-info { border-color: #bfe4f4; background: #d5edf8; }
|
|
|
|
|
|
|
|
-.alert-error {
|
|
|
|
|
- border-color: #f8cdce;
|
|
|
|
|
- background: #fbe3e4; }
|
|
|
|
|
|
|
+.alert-error { border-color: #f8cdce; background: #fbe3e4; }
|
|
|
|
|
|
|
|
-.alert-success {
|
|
|
|
|
- border-color: #deeaae;
|
|
|
|
|
- background: #e6efc2; }
|
|
|
|
|
|
|
+.alert-success { border-color: #deeaae; background: #e6efc2; }
|
|
|
|
|
|
|
|
/*********************
|
|
/*********************
|
|
|
TRANSITION
|
|
TRANSITION
|
|
@@ -138,7 +104,7 @@ USAGE: @include transition(all 0.2s ease-in-out);
|
|
|
/*********************
|
|
/*********************
|
|
|
CSS3 GRADIENTS
|
|
CSS3 GRADIENTS
|
|
|
Be careful with these since they can
|
|
Be careful with these since they can
|
|
|
-really slow down your CSS. Don't overdue it.
|
|
|
|
|
|
|
+really slow down your CSS. Don't overdo it.
|
|
|
*********************/
|
|
*********************/
|
|
|
/* @include css-gradient(#dfdfdf,#f8f8f8); */
|
|
/* @include css-gradient(#dfdfdf,#f8f8f8); */
|
|
|
/*********************
|
|
/*********************
|
|
@@ -150,72 +116,13 @@ probably best not to use it. I mean, were you going to anyway? */
|
|
|
/*********************
|
|
/*********************
|
|
|
BUTTONS
|
|
BUTTONS
|
|
|
*********************/
|
|
*********************/
|
|
|
-.button, .button:visited {
|
|
|
|
|
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
|
- border: 1px solid #be0d37;
|
|
|
|
|
- border-top-color: #db0f3f;
|
|
|
|
|
- border-left-color: #db0f3f;
|
|
|
|
|
- padding: 4px 12px;
|
|
|
|
|
- color: white;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- font-size: 11px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- text-decoration: none;
|
|
|
|
|
- text-shadow: 0 1px rgba(0, 0, 0, 0.75);
|
|
|
|
|
- cursor: pointer;
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
- line-height: 21px;
|
|
|
|
|
- border-radius: 4px;
|
|
|
|
|
- background-color: #e40f42;
|
|
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from(#f01d4f), to(#e40f42));
|
|
|
|
|
- background-image: -webkit-linear-gradient(top, #f01d4f, #e40f42);
|
|
|
|
|
- background-image: -moz-linear-gradient(top, #f01d4f, #e40f42);
|
|
|
|
|
- background-image: -o-linear-gradient(top, #f01d4f, #e40f42);
|
|
|
|
|
- background-image: linear-gradient(to bottom, #f01d4f, #e40f42); }
|
|
|
|
|
- .button:hover, .button:focus, .button:visited:hover, .button:visited:focus {
|
|
|
|
|
- color: white;
|
|
|
|
|
- border: 1px solid #be0d37;
|
|
|
|
|
- border-top-color: #9d0a2d;
|
|
|
|
|
- border-left-color: #9d0a2d;
|
|
|
|
|
- background-color: #cc0e3b;
|
|
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#cc0e3b));
|
|
|
|
|
- background-image: -webkit-linear-gradient(top, #e40f42, #cc0e3b);
|
|
|
|
|
- background-image: -moz-linear-gradient(top, #e40f42, #cc0e3b);
|
|
|
|
|
- background-image: -o-linear-gradient(top, #e40f42, #cc0e3b);
|
|
|
|
|
- background-image: linear-gradient(to bottom, #e40f42, #cc0e3b); }
|
|
|
|
|
- .button:active, .button:visited:active {
|
|
|
|
|
- background-color: #f01d4f;
|
|
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#f01d4f));
|
|
|
|
|
- background-image: -webkit-linear-gradient(top, #e40f42, #f01d4f);
|
|
|
|
|
- background-image: -moz-linear-gradient(top, #e40f42, #f01d4f);
|
|
|
|
|
- background-image: -o-linear-gradient(top, #e40f42, #f01d4f);
|
|
|
|
|
- background-image: linear-gradient(to bottom, #e40f42, #f01d4f); }
|
|
|
|
|
-
|
|
|
|
|
-.blue-button, .blue-button:visited {
|
|
|
|
|
- border-color: #1472ad;
|
|
|
|
|
- text-shadow: 0 1px 1px #1472ad;
|
|
|
|
|
- background-color: #1681c4;
|
|
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4));
|
|
|
|
|
- background-image: -webkit-linear-gradient(top, #1990db, #1681c4);
|
|
|
|
|
- background-image: -moz-linear-gradient(top, #1990db, #1681c4);
|
|
|
|
|
- background-image: -o-linear-gradient(top, #1990db, #1681c4);
|
|
|
|
|
- background-image: linear-gradient(to bottom, #1990db, #1681c4);
|
|
|
|
|
- box-shadow: inset 0 0 3px #59b3ec; }
|
|
|
|
|
- .blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus {
|
|
|
|
|
- border-color: #116396;
|
|
|
|
|
- background-color: #1472ad;
|
|
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad));
|
|
|
|
|
- background-image: -webkit-linear-gradient(top, #1784c9, #1472ad);
|
|
|
|
|
- background-image: -moz-linear-gradient(top, #1784c9, #1472ad);
|
|
|
|
|
- background-image: -o-linear-gradient(top, #1784c9, #1472ad);
|
|
|
|
|
- background-image: linear-gradient(to bottom, #1784c9, #1472ad); }
|
|
|
|
|
- .blue-button:active, .blue-button:visited:active {
|
|
|
|
|
- background-color: #1990db;
|
|
|
|
|
- background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db));
|
|
|
|
|
- background-image: -webkit-linear-gradient(top, #1681c4, #1990db);
|
|
|
|
|
- background-image: -moz-linear-gradient(top, #1681c4, #1990db);
|
|
|
|
|
- background-image: -o-linear-gradient(top, #1681c4, #1990db);
|
|
|
|
|
- background-image: linear-gradient(to bottom, #1681c4, #1990db); }
|
|
|
|
|
|
|
+.button, .button:visited { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border: 1px solid #be0d37; border-top-color: #db0f3f; border-left-color: #db0f3f; padding: 4px 12px; color: white; display: inline-block; font-size: 11px; font-weight: bold; text-decoration: none; text-shadow: 0 1px rgba(0, 0, 0, 0.75); cursor: pointer; margin-bottom: 20px; line-height: 21px; border-radius: 4px; background-color: #e40f42; background-image: -webkit-gradient(linear, left top, left bottom, from(#f01d4f), to(#e40f42)); background-image: -webkit-linear-gradient(top, #f01d4f, #e40f42); background-image: -moz-linear-gradient(top, #f01d4f, #e40f42); background-image: -o-linear-gradient(top, #f01d4f, #e40f42); background-image: linear-gradient(to bottom, #f01d4f, #e40f42); }
|
|
|
|
|
+.button:hover, .button:focus, .button:visited:hover, .button:visited:focus { color: white; border: 1px solid #be0d37; border-top-color: #9d0a2d; border-left-color: #9d0a2d; background-color: #cc0e3b; background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#cc0e3b)); background-image: -webkit-linear-gradient(top, #e40f42, #cc0e3b); background-image: -moz-linear-gradient(top, #e40f42, #cc0e3b); background-image: -o-linear-gradient(top, #e40f42, #cc0e3b); background-image: linear-gradient(to bottom, #e40f42, #cc0e3b); }
|
|
|
|
|
+.button:active, .button:visited:active { background-color: #f01d4f; background-image: -webkit-gradient(linear, left top, left bottom, from(#e40f42), to(#f01d4f)); background-image: -webkit-linear-gradient(top, #e40f42, #f01d4f); background-image: -moz-linear-gradient(top, #e40f42, #f01d4f); background-image: -o-linear-gradient(top, #e40f42, #f01d4f); background-image: linear-gradient(to bottom, #e40f42, #f01d4f); }
|
|
|
|
|
+
|
|
|
|
|
+.blue-button, .blue-button:visited { border-color: #1472ad; text-shadow: 0 1px 1px #1472ad; background-color: #1681c4; background-image: -webkit-gradient(linear, left top, left bottom, from(#1990db), to(#1681c4)); background-image: -webkit-linear-gradient(top, #1990db, #1681c4); background-image: -moz-linear-gradient(top, #1990db, #1681c4); background-image: -o-linear-gradient(top, #1990db, #1681c4); background-image: linear-gradient(to bottom, #1990db, #1681c4); box-shadow: inset 0 0 3px #59b3ec; }
|
|
|
|
|
+.blue-button:hover, .blue-button:focus, .blue-button:visited:hover, .blue-button:visited:focus { border-color: #116396; background-color: #1472ad; background-image: -webkit-gradient(linear, left top, left bottom, from(#1784c9), to(#1472ad)); background-image: -webkit-linear-gradient(top, #1784c9, #1472ad); background-image: -moz-linear-gradient(top, #1784c9, #1472ad); background-image: -o-linear-gradient(top, #1784c9, #1472ad); background-image: linear-gradient(to bottom, #1784c9, #1472ad); }
|
|
|
|
|
+.blue-button:active, .blue-button:visited:active { background-color: #1990db; background-image: -webkit-gradient(linear, left top, left bottom, from(#1681c4), to(#1990db)); background-image: -webkit-linear-gradient(top, #1681c4, #1990db); background-image: -moz-linear-gradient(top, #1681c4, #1990db); background-image: -o-linear-gradient(top, #1681c4, #1990db); background-image: linear-gradient(to bottom, #1681c4, #1990db); }
|
|
|
|
|
|
|
|
/******************************************************************
|
|
/******************************************************************
|
|
|
Site Name:
|
|
Site Name:
|
|
@@ -239,64 +146,47 @@ together, let's see how this works out. If you want to use 1140, the original
|
|
|
values are commented out on each line.
|
|
values are commented out on each line.
|
|
|
|
|
|
|
|
******************************************************************/
|
|
******************************************************************/
|
|
|
-.onecol {
|
|
|
|
|
- width: 5.801104972%; }
|
|
|
|
|
|
|
+.onecol { width: 5.801104972%; }
|
|
|
|
|
|
|
|
/* 4.85%; } /* grid_1 */
|
|
/* 4.85%; } /* grid_1 */
|
|
|
-.twocol {
|
|
|
|
|
- width: 14.364640883%; }
|
|
|
|
|
|
|
+.twocol { width: 14.364640883%; }
|
|
|
|
|
|
|
|
/* 13.45%; } /* grid_2 */
|
|
/* 13.45%; } /* grid_2 */
|
|
|
-.threecol {
|
|
|
|
|
- width: 22.928176794%; }
|
|
|
|
|
|
|
+.threecol { width: 22.928176794%; }
|
|
|
|
|
|
|
|
/* 22.05%; } /* grid_3 */
|
|
/* 22.05%; } /* grid_3 */
|
|
|
-.fourcol {
|
|
|
|
|
- width: 31.491712705%; }
|
|
|
|
|
|
|
+.fourcol { width: 31.491712705%; }
|
|
|
|
|
|
|
|
/* 30.75%; } /* grid_4 */
|
|
/* 30.75%; } /* grid_4 */
|
|
|
-.fivecol {
|
|
|
|
|
- width: 40.055248616%; }
|
|
|
|
|
|
|
+.fivecol { width: 40.055248616%; }
|
|
|
|
|
|
|
|
/* 39.45%; } /* grid_5 */
|
|
/* 39.45%; } /* grid_5 */
|
|
|
-.sixcol {
|
|
|
|
|
- width: 48.618784527%; }
|
|
|
|
|
|
|
+.sixcol { width: 48.618784527%; }
|
|
|
|
|
|
|
|
/* 48%; } /* grid_6 */
|
|
/* 48%; } /* grid_6 */
|
|
|
-.sevencol {
|
|
|
|
|
- width: 57.182320438000005%; }
|
|
|
|
|
|
|
+.sevencol { width: 57.182320438000005%; }
|
|
|
|
|
|
|
|
/* 56.75%; } /* grid_7 */
|
|
/* 56.75%; } /* grid_7 */
|
|
|
-.eightcol {
|
|
|
|
|
- width: 65.74585634900001%; }
|
|
|
|
|
|
|
+.eightcol { width: 65.74585634900001%; }
|
|
|
|
|
|
|
|
/* 65.4%; } /* grid_8 */
|
|
/* 65.4%; } /* grid_8 */
|
|
|
-.ninecol {
|
|
|
|
|
- width: 74.30939226%; }
|
|
|
|
|
|
|
+.ninecol { width: 74.30939226%; }
|
|
|
|
|
|
|
|
/* 74.05%; } /* grid_9 */
|
|
/* 74.05%; } /* grid_9 */
|
|
|
-.tencol {
|
|
|
|
|
- width: 82.87292817100001%; }
|
|
|
|
|
|
|
+.tencol { width: 82.87292817100001%; }
|
|
|
|
|
|
|
|
/* 82.7%; } /* grid_10 */
|
|
/* 82.7%; } /* grid_10 */
|
|
|
-.elevencol {
|
|
|
|
|
- width: 91.436464082%; }
|
|
|
|
|
|
|
+.elevencol { width: 91.436464082%; }
|
|
|
|
|
|
|
|
/* 91.35%; } /* grid_11 */
|
|
/* 91.35%; } /* grid_11 */
|
|
|
-.twelvecol {
|
|
|
|
|
- width: 99.999999993%; }
|
|
|
|
|
|
|
+.twelvecol { width: 99.999999993%; }
|
|
|
|
|
|
|
|
/* 100%; } /* grid_12 */
|
|
/* 100%; } /* grid_12 */
|
|
|
-.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol {
|
|
|
|
|
- position: relative;
|
|
|
|
|
- float: left;
|
|
|
|
|
- margin-left: 2.762430939%; }
|
|
|
|
|
|
|
+.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { position: relative; float: left; margin-left: 2.762430939%; }
|
|
|
|
|
|
|
|
-.first {
|
|
|
|
|
- margin-left: 0; }
|
|
|
|
|
|
|
+.first { margin-left: 0; }
|
|
|
|
|
|
|
|
-.last {
|
|
|
|
|
- float: right; }
|
|
|
|
|
|
|
+.last { float: right; }
|
|
|
|
|
|
|
|
/******************************************************************
|
|
/******************************************************************
|
|
|
Site Name:
|
|
Site Name:
|
|
@@ -318,42 +208,25 @@ upon your base.scss styles.
|
|
|
NAVIGATION STYLES
|
|
NAVIGATION STYLES
|
|
|
*********************/
|
|
*********************/
|
|
|
/* .menu is clearfixed inside mixins.scss */
|
|
/* .menu is clearfixed inside mixins.scss */
|
|
|
-.menu {
|
|
|
|
|
- /* end .menu ul */ }
|
|
|
|
|
- .menu ul {
|
|
|
|
|
- /* end .menu ul li */
|
|
|
|
|
- /* highlight current page */
|
|
|
|
|
- /* end current highlighters */ }
|
|
|
|
|
- .menu ul li {
|
|
|
|
|
- /*
|
|
|
|
|
- plan your menus and drop-downs wisely.
|
|
|
|
|
- */ }
|
|
|
|
|
- .menu ul li a {
|
|
|
|
|
- /*
|
|
|
|
|
- you can use hover styles here even though this size
|
|
|
|
|
- has the possibility of being a mobile device.
|
|
|
|
|
- */ }
|
|
|
|
|
|
|
+.menu { /* end .menu ul */ }
|
|
|
|
|
+.menu ul { /* end .menu ul li */ /* highlight current page */ /* end current highlighters */ }
|
|
|
|
|
+.menu ul li { /*
|
|
|
|
|
+plan your menus and drop-downs wisely.
|
|
|
|
|
+*/ }
|
|
|
|
|
+.menu ul li a { /*
|
|
|
|
|
+you can use hover styles here even though this size
|
|
|
|
|
+has the possibility of being a mobile device.
|
|
|
|
|
+*/ }
|
|
|
|
|
|
|
|
/* end .menu */
|
|
/* end .menu */
|
|
|
/*********************
|
|
/*********************
|
|
|
POSTS & CONTENT STYLES
|
|
POSTS & CONTENT STYLES
|
|
|
*********************/
|
|
*********************/
|
|
|
/* entry content */
|
|
/* entry content */
|
|
|
-.entry-content {
|
|
|
|
|
- /* at this larger size, we can start to align images */ }
|
|
|
|
|
- .entry-content .alignleft, .entry-content img.alignleft {
|
|
|
|
|
- margin-right: 1.5em;
|
|
|
|
|
- display: inline;
|
|
|
|
|
- float: left; }
|
|
|
|
|
- .entry-content .alignright, .entry-content img.alignright {
|
|
|
|
|
- margin-left: 1.5em;
|
|
|
|
|
- display: inline;
|
|
|
|
|
- float: right; }
|
|
|
|
|
- .entry-content .aligncenter, .entry-content img.aligncenter {
|
|
|
|
|
- margin-right: auto;
|
|
|
|
|
- margin-left: auto;
|
|
|
|
|
- display: block;
|
|
|
|
|
- clear: both; }
|
|
|
|
|
|
|
+.entry-content { /* at this larger size, we can start to align images */ }
|
|
|
|
|
+.entry-content .alignleft, .entry-content img.alignleft { margin-right: 1.5em; display: inline; float: left; }
|
|
|
|
|
+.entry-content .alignright, .entry-content img.alignright { margin-left: 1.5em; display: inline; float: right; }
|
|
|
|
|
+.entry-content .aligncenter, .entry-content img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; }
|
|
|
|
|
|
|
|
/* end .entry-content */
|
|
/* end .entry-content */
|
|
|
/*********************
|
|
/*********************
|
|
@@ -383,8 +256,7 @@ GENERAL STYLES
|
|
|
/*********************
|
|
/*********************
|
|
|
LAYOUT & GRID STYLES
|
|
LAYOUT & GRID STYLES
|
|
|
*********************/
|
|
*********************/
|
|
|
-.wrap {
|
|
|
|
|
- max-width: 1140px; }
|
|
|
|
|
|
|
+.wrap { max-width: 1140px; }
|
|
|
|
|
|
|
|
/*********************
|
|
/*********************
|
|
|
HEADER STYLES
|
|
HEADER STYLES
|
|
@@ -392,77 +264,36 @@ HEADER STYLES
|
|
|
/*********************
|
|
/*********************
|
|
|
NAVIGATION STYLES
|
|
NAVIGATION STYLES
|
|
|
*********************/
|
|
*********************/
|
|
|
-.nav {
|
|
|
|
|
- background: #eee;
|
|
|
|
|
- border: 0;
|
|
|
|
|
- /* end .menu ul li */
|
|
|
|
|
- /* highlight current page */
|
|
|
|
|
- /* end current highlighters */ }
|
|
|
|
|
- .nav li {
|
|
|
|
|
- float: left;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- /*
|
|
|
|
|
- plan your menus and drop-downs wisely.
|
|
|
|
|
- */
|
|
|
|
|
- /* showing sub-menus */ }
|
|
|
|
|
- .nav li a {
|
|
|
|
|
- border-bottom: 0;
|
|
|
|
|
- /*
|
|
|
|
|
- you can use hover styles here even though this size
|
|
|
|
|
- has the possibility of being a mobile device.
|
|
|
|
|
- */ }
|
|
|
|
|
- .nav li a:hover, .nav li a:focus {
|
|
|
|
|
- background-color: #dedede; }
|
|
|
|
|
- .nav li ul.sub-menu,
|
|
|
|
|
- .nav li ul.children {
|
|
|
|
|
- margin-top: 0;
|
|
|
|
|
- border: 1px solid #ccc;
|
|
|
|
|
- border-top: 0;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- display: none;
|
|
|
|
|
- z-index: 8999;
|
|
|
|
|
- /* highlight sub-menu current page */ }
|
|
|
|
|
- .nav li ul.sub-menu li,
|
|
|
|
|
- .nav li ul.children li {
|
|
|
|
|
- /*
|
|
|
|
|
- if you need to go deeper, go nuts
|
|
|
|
|
- just remember deeper menus suck
|
|
|
|
|
- for usability. k, bai.
|
|
|
|
|
- */ }
|
|
|
|
|
- .nav li ul.sub-menu li a,
|
|
|
|
|
- .nav li ul.children li a {
|
|
|
|
|
- padding-left: 10px;
|
|
|
|
|
- border-right: 0;
|
|
|
|
|
- display: block;
|
|
|
|
|
- width: 180px;
|
|
|
|
|
- border-bottom: 1px solid #ccc; }
|
|
|
|
|
- .nav li ul.sub-menu li:last-child a,
|
|
|
|
|
- .nav li ul.children li:last-child a {
|
|
|
|
|
- border-bottom: 0; }
|
|
|
|
|
- .nav li:hover ul {
|
|
|
|
|
- top: auto;
|
|
|
|
|
- display: block; }
|
|
|
|
|
|
|
+.nav { background: #eee; border: 0; /* end .menu ul li */ /* highlight current page */ /* end current highlighters */ }
|
|
|
|
|
+.nav li { float: left; position: relative; /*
|
|
|
|
|
+plan your menus and drop-downs wisely.
|
|
|
|
|
+*/ /* showing sub-menus */ }
|
|
|
|
|
+.nav li a { border-bottom: 0; /*
|
|
|
|
|
+you can use hover styles here even though this size
|
|
|
|
|
+has the possibility of being a mobile device.
|
|
|
|
|
+*/ }
|
|
|
|
|
+.nav li a:hover, .nav li a:focus { background-color: #dedede; }
|
|
|
|
|
+.nav li ul.sub-menu, .nav li ul.children { margin-top: 0; border: 1px solid #ccc; border-top: 0; position: absolute; display: none; z-index: 8999; /* highlight sub-menu current page */ }
|
|
|
|
|
+.nav li ul.sub-menu li, .nav li ul.children li { /*
|
|
|
|
|
+if you need to go deeper, go nuts
|
|
|
|
|
+just remember deeper menus suck
|
|
|
|
|
+for usability. k, bai.
|
|
|
|
|
+*/ }
|
|
|
|
|
+.nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 10px; border-right: 0; display: block; width: 180px; border-bottom: 1px solid #ccc; }
|
|
|
|
|
+.nav li ul.sub-menu li:last-child a, .nav li ul.children li:last-child a { border-bottom: 0; }
|
|
|
|
|
+.nav li:hover ul { top: auto; display: block; }
|
|
|
|
|
|
|
|
/* end .nav */
|
|
/* end .nav */
|
|
|
/*********************
|
|
/*********************
|
|
|
SIDEBARS & ASIDES
|
|
SIDEBARS & ASIDES
|
|
|
*********************/
|
|
*********************/
|
|
|
-.sidebar {
|
|
|
|
|
- margin-top: 2.2em; }
|
|
|
|
|
-
|
|
|
|
|
-.widgettitle {
|
|
|
|
|
- border-bottom: 2px solid #444;
|
|
|
|
|
- margin-bottom: 0.75em; }
|
|
|
|
|
-
|
|
|
|
|
-.widget {
|
|
|
|
|
- padding: 0 10px;
|
|
|
|
|
- margin: 2.2em 0; }
|
|
|
|
|
- .widget ul li {
|
|
|
|
|
- margin-bottom: 0.75em;
|
|
|
|
|
- /* deep nesting */ }
|
|
|
|
|
- .widget ul li ul {
|
|
|
|
|
- margin-top: 0.75em;
|
|
|
|
|
- padding-left: 1em; }
|
|
|
|
|
|
|
+.sidebar { margin-top: 2.2em; }
|
|
|
|
|
+
|
|
|
|
|
+.widgettitle { border-bottom: 2px solid #444; margin-bottom: 0.75em; }
|
|
|
|
|
+
|
|
|
|
|
+.widget { padding: 0 10px; margin: 2.2em 0; }
|
|
|
|
|
+.widget ul li { margin-bottom: 0.75em; /* deep nesting */ }
|
|
|
|
|
+.widget ul li ul { margin-top: 0.75em; padding-left: 1em; }
|
|
|
|
|
|
|
|
/* links widget */
|
|
/* links widget */
|
|
|
/* meta widget */
|
|
/* meta widget */
|
|
@@ -483,12 +314,11 @@ you'll probably need to do quite a bit
|
|
|
of overriding here if you styled them for
|
|
of overriding here if you styled them for
|
|
|
mobile. Make sure to double check these!
|
|
mobile. Make sure to double check these!
|
|
|
*/
|
|
*/
|
|
|
-.footer-links ul li {
|
|
|
|
|
- /*
|
|
|
|
|
- be careful with the depth of your menus.
|
|
|
|
|
- it's very rare to have multi-depth menus in
|
|
|
|
|
- the footer.
|
|
|
|
|
- */ }
|
|
|
|
|
|
|
+.footer-links ul li { /*
|
|
|
|
|
+be careful with the depth of your menus.
|
|
|
|
|
+it's very rare to have multi-depth menus in
|
|
|
|
|
+the footer.
|
|
|
|
|
+*/ }
|
|
|
|
|
|
|
|
/* end .footer-links */
|
|
/* end .footer-links */
|
|
|
/******************************************************************
|
|
/******************************************************************
|