|
|
Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* CSS placed here will be applied to all skins */ |
|
| |
|
| /* experimental begin */
| | #nav .menu_normal li { |
| | | position: static !Important; |
| | |
| /* fonts */
| |
| @font-face {
| |
| font-family: 'raleway-regular';
| |
| src: url('../fonts/raleway-regular.eot');
| |
| src: url('../fonts/raleway-regular.eot?#iefix') format('embedded-opentype'),
| |
| url('../fonts/raleway-regular.woff') format('woff'),
| |
| url('../fonts/raleway-regular.ttf') format('truetype'),
| |
| url('../fonts/raleway-regular.svg#raleway-regular') format('svg');
| |
| font-weight: normal;
| |
| font-style: normal;
| |
| }
| |
| | |
| | |
| | |
| | |
| /* General CSS
| |
| */
| |
| body{
| |
| background: #fdfdfd;
| |
| }
| |
| | |
| .wrapper{
| |
| width: 1100px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .clearfix:before,
| |
| .clearfix:after {
| |
| content: " ";
| |
| display: table;
| |
| }
| |
| .clearfix:after {
| |
| clear: both;
| |
| }
| |
|
| |
| .clearfix {
| |
| *zoom: 1;
| |
| }
| |
| | |
| | |
| .back_link{
| |
| font-family: "raleway-regular", arial;
| |
| font-size: 16px;
| |
| text-align: center;
| |
| margin-bottom: 100px;
| |
| text-decoration: none;
| |
| display: block;
| |
| letter-spacing: 1px;
| |
| padding: 20px 0;
| |
| color:#3e3e3e;
| |
| background: #f1efef;
| |
| }
| |
| | |
| .back_link .arrow{
| |
| vertical-align: middle;
| |
| margin-right: 4px;
| |
| }
| |
| | |
| | |
| | |
| .row{
| |
| margin-bottom: 80px;
| |
| }
| |
| | |
| .row a:first-child{
| |
| float: left;
| |
| }
| |
| | |
| .row a:last-child{
| |
| float: right;
| |
| }
| |
| | |
| .content{
| |
| padding-top: 200px;
| |
| }
| |
| .content p{
| |
| font-family: 'raleway-regular', arial;
| |
| font-size: 16px;
| |
| margin-bottom: 40px;
| |
| line-height: 30px;
| |
| color: #494747;
| |
| }
| |
| | |
| | |
| | |
| | |
| /* Header Styling */
| |
| | |
| header{
| |
| width: 100%;
| |
| height: 100px;
| |
| background: #4b5f6d;
| |
| position: fixed;
| |
| }
| |
| | |
| .logo{
| |
| float: left;
| |
| margin-top: 33px;
| |
| }
| |
| | |
| | |
| | |
| /* nav */
| |
| nav{
| |
| float: right;
| |
| }
| |
| | |
| nav ul li{
| |
| list-style: none;
| |
| float: left;
| |
| margin-left: 40px;
| |
| }
| |
| nav ul li a{
| |
| display: block;
| |
| height: 100%;
| |
| line-height: 100px;
| |
| text-decoration: none;
| |
| color: #e5edf1;
| |
| font-family: 'raleway-regular', arial;
| |
| font-size: 14px;
| |
| letter-spacing: 1px;
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| nav ul li a .nav_arrow{
| |
| display: inline-block;
| |
| width: 9px;
| |
| height: 7px;
| |
| background: url('../images/nav_arrow.png') no-repeat;
| |
| background-position: 0 0;
| |
| margin-left: 6px;
| |
| | |
| -webkit-transition:all linear .1s;
| |
| -moz-transition:all linear .1s;
| |
| -o-transition:all linear .1s;
| |
| transition:all linear .1s;
| |
| }
| |
| | |
| nav ul li:hover > a .nav_arrow, | |
| nav ul li .sm_style1_level1 > ul > li:hover > a .nav_arrow{
| |
| background-position: 0 -8px; | |
| }
| |
| | |
| | |
| | |
| | |
| .sm_style1_level1,
| |
| .sm_style1_level2,
| |
| .sm_style2_level1{
| |
| width: 100%!important;
| |
| height: 80px;
| |
| left: 0;
| |
| top: 100px;
| |
| background: #435765;
| |
| position: absolute;
| |
| opacity: 0;
| |
| z-index: 2;
| |
| | |
| /* transition: <property> <duration> <timing-function> <delay>; */
| |
| -webkit-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
| |
| -moz-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
| |
| -o-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
| |
| transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .4s;
| |
| | |
| -webkit-transform: perspective(1000px) rotateX(-90deg);
| |
| -moz-transform: perspective(1000px) rotateX(-90deg);
| |
| -o-transform: perspective(1000px) rotateX(-90deg);
| |
| transform: perspective(1000px) rotateX(-90deg);
| |
| | |
| -webkit-transform-style: preserve- 3 d;
| |
| -moz-transform-style: preserve- 3 d;
| |
| -o-transform-style: preserve- 3 d;
| |
| transform-style: preserve- 3 d;
| |
| | |
| | |
| -webkit-transform-origin: 50% 0;
| |
| -moz-transform-origin: 50% 0;
| |
| -o-transform-origin: 50% 0;
| |
| transform-origin: 50% 0;
| |
| }
| |
| | |
| .sm_style1_level2{
| |
| top: 80px;
| |
| background: #3c4f5d;
| |
| | |
| -webkit-transition-delay:.2s;
| |
| -moz-transition-delay:.2s;
| |
| -o-transition-delay:.2s;
| |
| transition-delay:.2s;
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| nav ul li ul li{
| |
| list-style: none;
| |
| float: left;
| |
| display: block;
| |
| text-align: center;
| |
| border-right: 1px solid #3c4f5d;
| |
| margin: 0;
| |
| width: 19.9%;
| |
| }
| |
| | |
| nav ul li ul li:last-child{
| |
| border-right: 0;
| |
| } | | } |
|
| |
|
| nav ul li ul li a{ | | #nav .menu_normal .sub-menu { |
| display: block; | | left: 0 !Important; |
| width: 100%;
| | right: 0 !Important; |
| height: 100%; | |
| line-height: 80px;
| |
| text-decoration: none;
| |
| color: #e3eff4;
| |
| } | | } |
|
| |
|
| nav ul li ul li img.menu_icon{ | | #nav .menu_normal .sub-menu > li { |
| margin: 0 10px -5px 0;
| | float: left !Important; |
| }
| |
| | |
| nav ul li ul li li{
| |
| border-right: 1px solid #334552;
| |
| }
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| nav ul li .sm_style2_level1 > ul > li{
| |
| position: relative; | |
| vertical-align: top;
| |
| }
| |
| | |
| nav ul li li .preview{
| |
| display: block;
| |
| width: 150px;
| |
| height: 100px;
| |
| position: absolute;
| |
| left: 50%;
| |
| margin-left: -75px;
| |
| background: #ffffff;
| |
| text-decoration: none;
| |
| border: 2px solid #fff;
| |
| opacity: 0;
| |
| | |
| | |
| /* transition: <property> <duration> <timing-function> <delay>; */
| |
| -webkit-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
| |
| -moz-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
| |
| -o-transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
| |
| transition: all .4s cubic-bezier(0.77, 0, 0.175, 1) .2s;
| |
| | |
| -webkit-transform: perspective(1000px) rotateX(-90deg);
| |
| -moz-transform: perspective(1000px) rotateX(-90deg);
| |
| -o-transform: perspective(1000px) rotateX(-90deg);
| |
| transform: perspective(1000px) rotateX(-90deg);
| |
| | |
| -webkit-transform-style: preserve- 3 d;
| |
| -moz-transform-style: preserve- 3 d;
| |
| -o-transform-style: preserve- 3 d;
| |
| transform-style: preserve- 3 d;
| |
| | |
| | |
| -webkit-transform-origin: 50% 0;
| |
| -moz-transform-origin: 50% 0;
| |
| -o-transform-origin: 50% 0;
| |
| transform-origin: 50% 0;
| |
| | |
| } | | } |
|
| |
|
| nav ul li li .preview .preview_arrow{ | | #nav .menu_normal .label_holder { |
| display: block;
| | width: auto !Important; |
| position: absolute;
| |
| width: 12px; | |
| height: 6px;
| |
| background: url('../images/box-arrow.png') no-repeat;
| |
| left: 50%;
| |
| margin: -7px 0 0 -6px;
| |
| text-align: center;
| |
| } | | } |
|
| |
|
|
| |
|
| | | /* add vertical separator between submenu items */ |
| | | #nav .menu_normal .sub-menu > li { |
| | | border-left: 1px solid #4f4d49; |
| | |
| | |
| | |
| | |
| nav ul li:hover .sm_style1_level1,
| |
| nav ul li li:hover .sm_style1_level2, | |
| nav ul li:hover .sm_style2_level1,
| |
| nav ul li li:hover .preview{
| |
| opacity: 1; | |
| | |
| -webkit-transform: perspective(1000px) rotateX(0deg);
| |
| -moz-transform: perspective(1000px) rotateX(0deg);
| |
| -o-transform: perspective(1000px) rotateX(0deg);
| |
| transform: perspective(1000px) rotateX(0deg);
| |
| } | | } |
| | | #nav .menu_normal .sub-menu > li:first-child { |
| nav ul li:hover .sm_style1_level1, | | border-left: 0; |
| nav ul li:hover .sm_style2_level1{
| |
| -webkit-transition-delay:.6s;
| |
| -moz-transition-delay:.6s;
| |
| -o-transition-delay:.6s;
| |
| transition-delay:.6s; | |
| } | | } |
|
| |
|
| nav ul li li:hover .sm_style1_level2, | | #nav .menu_normal .sub-menu .label_holder { |
| nav ul li li:hover .preview{
| | padding-right: 6px !Important; |
| -webkit-transition-delay:.4s;
| |
| -moz-transition-delay:.4s;
| |
| -o-transition-delay:.4s; | |
| transition-delay:.4s;
| |
| } | | } |
|
| |
|
| |
| html, body, div, span, object, iframe,
| |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre,
| |
| abbr, address, cite, code,
| |
| del, dfn, em, img, ins, kbd, q, samp,
| |
| small, strong, sub, sup, var,
| |
| b, i,
| |
| dl, dt, dd, ol, ul, li,
| |
| fieldset, form, label, legend,
| |
| table, caption, tbody, tfoot, thead, tr, th, td,
| |
| article, aside, canvas, details, figcaption, figure,
| |
| footer, header, hgroup, menu, nav, section, summary,
| |
| time, mark, audio, video {
| |
| margin:0;
| |
| padding:0;
| |
| border:0;
| |
| outline:0;
| |
| font-size:100%;
| |
| vertical-align:baseline;
| |
| background:transparent;
| |
| }
| |
|
| |
| body {
| |
| line-height:1;
| |
| }
| |
|
| |
| img{
| |
| max-width: 100%;
| |
| }
| |
|
| |
| article,aside,details,figcaption,figure,
| |
| footer,header,hgroup,menu,nav,section {
| |
| display:block;
| |
| }
| |
|
| |
| nav ul {
| |
| list-style:none;
| |
| }
| |
|
| |
| blockquote, q {
| |
| quotes:none;
| |
| }
| |
|
| |
| blockquote:before, blockquote:after,
| |
| q:before, q:after {
| |
| content:'';
| |
| content:none;
| |
| }
| |
|
| |
| a {
| |
| margin:0;
| |
| padding:0;
| |
| font-size:100%;
| |
| vertical-align:baseline;
| |
| background:transparent;
| |
| }
| |
|
| |
| /* change colours to suit your needs */
| |
| ins {
| |
| background-color:#ff9;
| |
| color:#000;
| |
| text-decoration:none;
| |
| }
| |
|
| |
| /* change colours to suit your needs */
| |
| mark {
| |
| background-color:#ff9;
| |
| color:#000;
| |
| font-style:italic;
| |
| font-weight:bold;
| |
| }
| |
|
| |
| del {
| |
| text-decoration: line-through;
| |
| }
| |
|
| |
| abbr[title], dfn[title] {
| |
| border-bottom:1px dotted;
| |
| cursor:help;
| |
| }
| |
|
| |
| table {
| |
| border-collapse:collapse;
| |
| border-spacing:0;
| |
| }
| |
|
| |
| /* change border colour to suit your needs */
| |
| hr {
| |
| display:block;
| |
| height:1px;
| |
| border:0;
| |
| border-top:1px solid #cccccc;
| |
| margin:1em 0;
| |
| padding:0;
| |
| }
| |
|
| |
| input, select {
| |
| vertical-align:middle;
| |
| }
| |
|
| |
|
| /* experimental end */ | | /* experimental end */ |