|
|
| Line 197: |
Line 197: |
| | float:right; | | float:right; |
| | margin-right: 500px; | | margin-right: 500px; |
| | + | |
| | } | | } |
| | | | |
| Line 205: |
Line 206: |
| | margin-left: auto; | | margin-left: auto; |
| | margin-top:0; | | margin-top:0; |
| | + | |
| | | | |
| | } | | } |
| Line 212: |
Line 214: |
| | } | | } |
| | | | |
| − | .header_c {width:100%; margin-left:auto; margin-right:auto; display:block; padding-left:50%; } | + | .header_c {width:100%; margin-left:auto; margin-right:auto; display:block; padding-left:50%; z-index:2000; } |
| | | | |
| | | | |
| Line 1,023: |
Line 1,025: |
| | | | |
| | | | |
| − | *,
| |
| − | *:before,
| |
| − | *:after {
| |
| − | -webkit-box-sizing: border-box;
| |
| − | moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| | | | |
| − | /*container for the whole website*/
| |
| − | .web-container{
| |
| − | max-width: 500px;
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | /*main container for content*/
| |
| − | .main-container{
| |
| − | z-index: 1;
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − | /*container for the nav*/
| |
| − | .nav-menu-wrap {
| |
| − | position: absolute;
| |
| − | top: 0px;
| |
| − | height: 100%;
| |
| − | width: 65%;
| |
| − | -webkit-transition: all 450ms ease-in-out;
| |
| − | -moz-transition: all 450ms ease-in-out;
| |
| − | transition: all 450ms ease-in-out;
| |
| − | z-index: 3;
| |
| − | -moz-transform: translate3d(-100%,0px,0px) rotate(90deg);
| |
| − | -webkit-transform: translate3d(-100%,0px,0px) rotate(90deg);
| |
| − | -ms-transform: translate(-100%,0%) rotate(90deg);
| |
| − | -o-transform: translate(-100%,0%) rotate(90deg);
| |
| − | transform: translate3d(-100%,0px,0px) rotate(90deg);
| |
| − | -moz-transform-origin: 0% 0%;
| |
| − | -webkit-transform-origin: 0% 0%;
| |
| − | -ms-transform-origin: 0% 0%;
| |
| − | transform-origin: 0% 0%;
| |
| − | }
| |
| − | .nav-menu-wrap.active{
| |
| − | -moz-transform: translate3d(0%,0px,0px) rotate(0deg);
| |
| − | -webkit-transform: translate3d(0%,0px,0px) rotate(0deg);
| |
| − | -ms-transform: translate(0%,0%) rotate(0deg);
| |
| − | -o-transform: translate(0%,0%) rotate(0deg);
| |
| − | transform: translate3d(0%,0px,0px) rotate(0deg);
| |
| − | }
| |
| − |
| |
| − | /*nav menu background*/
| |
| − | .nav-menu-background{
| |
| − | position: absolute;
| |
| − | top: 0px;
| |
| − | left: 0px;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background: #222;
| |
| − | background: rgba(0,0,0,0.75);
| |
| − | opacity: 0;
| |
| − | -webkit-transition: opacity 400ms ease-in-out;
| |
| − | -moz-transition: opacity 400ms ease-in-out;
| |
| − | -o-transition: opacity 400ms ease-in-out;
| |
| − | transition: opacity 400ms ease-in-out;
| |
| − | -webkit-backface-visibility: hidden;
| |
| − | -moz-backface-visibility: hidden;
| |
| − | backface-visibility: hidden;
| |
| − | -moz-transform: translate3d(0,0,0);
| |
| − | -webkit-transform: translate3d(0,0,0);
| |
| − | transform: translate3d(0,0,0);
| |
| − | z-index: 0;
| |
| − | }
| |
| − | .nav-menu-background.active{
| |
| − | opacity: 1;
| |
| − | z-index: 2;
| |
| − | }
| |
| − |
| |
| − | .menu {
| |
| − | margin: 0px;
| |
| − | padding: 0px;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | .nav-menu {
| |
| − | position: relative;
| |
| − | top: 0px;
| |
| − | width: 100%;
| |
| − | height:100%;
| |
| − | overflow:hidden;
| |
| − | overflow-y:auto;
| |
| − | background: #eee;
| |
| − | }
| |
| − | .nav-menu li {
| |
| − | list-style-type: none;
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | }
| |
| − | .nav-menu li > a {
| |
| − | display: block;
| |
| − | color: #333;
| |
| − | text-decoration: none;
| |
| − | padding: 10px 15px;
| |
| − | border-top: solid 1px #ccc;
| |
| − | position: relative;
| |
| − | background: #eee;
| |
| − | -moz-transition: all 300ms ease;
| |
| − | -webkit-transition: all 300ms ease;
| |
| − | -o-transition: all 300ms ease;
| |
| − | transition: all 300ms ease;
| |
| − | }
| |
| − | .nav-menu li > a:hover,
| |
| − | .nav-menu li > a:active{
| |
| − | background: #ccc;
| |
| − | }
| |
| − |
| |
| − | /*Nav menu toggle*/
| |
| − | .nav-menu-toggle {
| |
| − | border: solid 1px #ddd;
| |
| − | background: #ccc;
| |
| − | height: 35px;
| |
| − | width: 35px;
| |
| − | display: inline-block;
| |
| − | text-align: center;
| |
| − | cursor: pointer;
| |
| − | margin-bottom: 15px;
| |
| − | z-index: 999;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .nav-menu-toggle .toggle {
| |
| − | color: #fff;
| |
| − | line-height: 35px;
| |
| − | font-size: 150%;
| |
| − | }
| |
| − |
| |
| − | /*Close menu items*/
| |
| − | .nav-menu .close div{
| |
| − | padding: 10px 15px;
| |
| − | cursor: pointer;
| |
| − | background: #ccc;
| |
| − | -moz-transition: all 300ms ease;
| |
| − | -webkit-transition: all 300ms ease;
| |
| − | -o-transition: all 300ms ease;
| |
| − | transition: all 300ms ease;
| |
| − | }
| |
| − | .nav-menu .close div:hover,
| |
| − | .nav-menu .close div:active{
| |
| − | background: #aaa;
| |
| − | }
| |
| − | .nav-menu .close div i{
| |
| − | float: right;
| |
| − | }
| |
| | | | |
| | | | |