1/* =Theme 2----------------------------------------------- */ 3 4/* Body */ 5body { 6 overflow-x: hidden; 7 padding: 40px 0 0; 8 width: 100%; 9 background: #303030; 10 color: #656565; 11 -ms-word-wrap: break-word; 12 word-wrap: break-word; 13} 14body:after, 15body:before { 16 content: ''; 17 display: block; 18 position: fixed; 19 z-index: -1; 20 top: 0; 21 height: 200%; 22} 23body:after { 24 left: 0; 25 width: 300px; 26 background: #1abc9c; 27} 28body:before { 29 left: 300px; 30 width: 100px; 31 background: #303030; 32} 33 34/* Page */ 35#page { 36 z-index: 1; 37 margin: 0; 38 width: 940px; 39} 40#page:before { 41 content: ''; 42 display: block; 43 position: fixed; 44 z-index: -1; 45 top: 0; 46 left: 400px; 47 width: 540px; 48 height: 100%; 49 background: #fff; 50} 51 52/* Sidebar */ 53.sidebar-area { 54 position: relative; 55 float: left; 56 width: 300px; 57 padding: 0 40px; 58 -webkit-box-sizing: border-box; 59 -moz-box-sizing: border-box; 60 box-sizing: border-box; 61} 62#sidebar-toggle { 63 display: none; 64 position: absolute; 65 z-index: 3; 66 top: -40px; 67 left: 0; 68 height: 40px; 69 width: 40px; 70 background: #16a085; 71 color: #fff; 72 line-height: 40px; 73 text-align: center; 74 text-decoration: none; 75} 76#sidebar-toggle:before, 77#sidebar-toggle:after { 78 content: ''; 79 display: block; 80 position: absolute; 81 border-top: 40px solid #16a085; 82 border-right: 40px solid transparent; 83} 84#sidebar-toggle:before { 85 top: 40px; 86} 87#sidebar-toggle:after { 88 top: 0; 89 left: 40px; 90} 91#sidebar-toggle .genericon { 92 margin-top: 5px; 93 height: 40px; 94 width: 40px; 95 font-size: 40px; 96 line-height: 40px; 97 -webkit-transform: rotate(45deg); 98 -moz-transform: rotate(45deg); 99 -ms-transform: rotate(45deg); 100 -o-transform: rotate(45deg); 101 transform: rotate(45deg); 102} 103#sidebar-toggle.open .genericon { 104 -webkit-transform: rotate(0deg); 105 -moz-transform: rotate(0deg); 106 -ms-transform: rotate(0deg); 107 -o-transform: rotate(0deg); 108 transform: rotate(0deg); 109} 110 111/* Header */ 112.site-header { 113 display: none; 114 background: #1abc9c; 115 color: #fff; 116} 117.site-logo { 118 display: block; 119 margin: 0 0 20px; 120 text-align: center; 121} 122.site-logo img { 123 display: block; 124} 125.site-branding { 126 position: relative; 127 padding: 0; 128 margin: 0 0 20px; 129 border-bottom: 15px double #16a085; 130 text-align: center; 131} 132.site-title { 133 padding: 0 0 5px; 134 margin: 0; 135 font-size: 20px; 136 font-weight: bold; 137 text-transform: uppercase; 138} 139.site-title a { 140 display: inline-block; 141 color: #fff; 142 text-decoration: none; 143} 144.site-title a:hover { 145 color: #16a085; 146} 147.site-description { 148 margin: 0 0 20px; 149 color: #fff; 150 font-size: 12px; 151 text-transform: uppercase; 152} 153 154/* Primary */ 155.content-area { 156 float: right; 157 width: 540px; 158 height: auto; 159 padding: 0 40px; 160 background: #fff; 161 -webkit-box-sizing: border-box; 162 -moz-box-sizing: border-box; 163 box-sizing: border-box; 164} 165 166/* Sidebar */ 167.widget-area, 168.widget-area a, 169.widget-area h1, 170.widget-area h2, 171.widget-area h3, 172.widget-area h4, 173.widget-area h5, 174.widget-area h6 { 175 color: #fff; 176} 177.widget-area a:hover, 178.widget-area a:focus, 179.widget-area a:active { 180 color: #e5e5e5; 181} 182.widget-area { 183 width: 220px; 184} 185 186/* Footer */ 187.site-footer { 188 visibility: hidden; 189 opacity: 0; 190} 191.site-info { 192 padding: 0 0 40px; 193 color: #fff; 194 font-size: 12px; 195 text-align: center; 196} 197.site-info a { 198 color: #fff; 199 text-decoration: none; 200} 201.site-info a:hover { 202 color: #16a085; 203} 204