|
|
| Line 490: |
Line 490: |
| | | | |
| | | | |
| - | <!-- PINNED SIDE MENU | + | <!-- PINNED SIDE MENU--> |
| | body { | | body { |
| - | font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
| + | margin:0; |
| - | font-weight: 500;
| + | padding:0; |
| - | font-size: 1.1em;
| + | |
| - | color: #34495E;
| + | |
| - | background-color: #ECF0F1;
| + | |
| | } | | } |
| - |
| + | #main { |
| - | div.wrapp{
| + | width:750px; |
| - | width: 70%;
| + | height: 750px; /*can be anything, just should make sure it is taller than the sidebar*/ |
| - | margin: 0 auto;
| + | padding: 25px; |
| | + | float: left; |
| | + | background-color: #fafafa; |
| | } | | } |
| - |
| + | #sidebar { |
| - | p {
| + | width: 120px; |
| - | margin-bottom: 4em;
| + | background-color: #ccc; |
| | + | min-height: 200px; |
| | + | margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/ |
| | + | padding: 15px 10px; |
| | + | float: left; /* float right for a right aligned sidebar */ |
| | } | | } |
| - |
| + | #footer { |
| - | .logo{
| + | width: 940px; |
| - | max-width: 100%;
| + | clear:both; |
| | + | background-color: #ccc; |
| | + | height: 500px; |
| | + | margin-top: 100px; |
| | } | | } |
| - | div.toolbar-wrapp{
| + | #wrapper { |
| - | position: fixed;
| + | width: 940px; /* MUST HAVE WIDTH SET, should be the sidebar width + main width */ |
| - | display: block;
| + | margin-left: auto; |
| - | top: 30%;
| + | margin-right: auto; |
| | } | | } |
| - |
| |
| - | div.sticky-toolbar{
| |
| - | position: relative;
| |
| - | top: 30%;
| |
| - | padding: .1em;
| |
| - | background-color: #2C3E50;
| |
| - | float: left;
| |
| - | -webkit-border-radius: 0 .2em .2em 0;
| |
| - | -moz-border-radius: 0 .2em .2em 0;
| |
| - | border-radius: 0 .2em .2em 0;
| |
| - | }
| |
| - | @font-face {
| |
| - | font-family: 'Entypo';
| |
| - | src: url('../font/entypo.eot');
| |
| - | src: local('☺'),
| |
| - | url('../font/entypo.woff') format('woff'),
| |
| - | url('../font/entypo.ttf') format('truetype'),
| |
| - | url('../font/entypo.svg#webfontIyfZbseF') format('svg');
| |
| - | }
| |
| - | [data-icon]:before {
| |
| - | font-family: 'Entypo';
| |
| - | content: attr(data-icon);
| |
| - | }
| |
| - | div.sticky-toolbar ul li a{
| |
| - | display: block;
| |
| - | width: .8em;
| |
| - | margin: 0.2em;
| |
| - | line-height: 80%;
| |
| - | font-size: 2.2em;
| |
| - | text-align: center;
| |
| - | color: #fff;
| |
| - | background-color: #16A085;
| |
| - | -webkit-border-radius: .1em;
| |
| - | -moz-border-radius: .1em;
| |
| - | border-radius: .1em;
| |
| - | -webkit-transition: all 0.1s ease-in-out;
| |
| - | -moz-transition: all 0.1s ease-in-out;
| |
| - | transition: all 0.1s ease-in-out;
| |
| - | -webkit-font-smoothing: antialiased;
| |
| - | }
| |
| - | div.sticky-toolbar ul li a:hover{
| |
| - | background-color: #1ABC9C;
| |
| - | }
| |
| - | div.popup{
| |
| - | display: none;
| |
| - | float: right;
| |
| - | position: relative;
| |
| - | left: 5%;
| |
| - | background-color: #2C3E50;
| |
| - | -webkit-border-radius: .2em;
| |
| - | -moz-border-radius: .2em;
| |
| - | border-radius: .2em;
| |
| - | }
| |
| - | div.popup ul li a{
| |
| - | position: relative;
| |
| - | display: inline-block;
| |
| - | font-size: .85em;
| |
| - | color: #fff;
| |
| - | padding: 0 2em 0 2em;
| |
| - | margin: .4em;
| |
| - | text-align: center;
| |
| - | text-decoration: none;
| |
| - | transition: all 0.1s ease-in-out;
| |
| - | -webkit-border-radius: .2em;
| |
| - | -moz-border-radius: .2em;
| |
| - | border-radius: .2em;
| |
| - | }
| |
| - | div.popup ul li a:hover{
| |
| - | background-color: #1ABC9C;
| |
| - | }
| |
| - | .arrow {
| |
| - | position: absolute;
| |
| - | top: 10%;
| |
| - | left: -.4em;
| |
| - | width: 0; height: 0;
| |
| - | border-top: .5em solid transparent;
| |
| - | border-right: .5em solid #2C3E50;
| |
| - | border-bottom: .5em solid transparent;
| |
| - | }-->
| |
| - |
| |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |
"
