/* resets */ * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: 0; } #wrapper {position:relative; margin: 20px auto; padding:0; } /* spotlight */ body {background:url(http://i.imgur.com/93roCas.png); } a {text-decoration: none; color: #7d081e; text-shadow: 1px 1px 1px #370f38; transition: all 0.5s ease; } a:hover, a:active {color: #773447; } #main {position: fixed; top: 50%; left:50%; width:900px; height:500px; margin-left:-450px; margin-top:-250px; padding-bottom: 10px; font-family: 'Zilla Slab', sans-serif; font-weight: 400; font-size: 14px; line-height: 1.28; text-shadow: 0 0 1px rgba(130, 130, 130, 0.25); background-color: rgba(35, 35, 35, 0.8); border-left: 4px solid #773447; overflow: hidden; } #sidemenu {width:200px; height: 500px; float:left; overflow-y: auto; padding: 5px 0; } #spotlight {width:700px; height: 500px; margin-left:200px; } #sidemenu ul {list-style-type: none; margin:0; padding:0; } #sidemenu li {display: block; color: #2b2a2b; background-color: rgba(153, 148, 152, 0.2); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -1px; text-transform: uppercase; text-shadow: 2px 0px 2px #5a5a5a; padding: 4px 8px; margin-bottom: 4px; transition: all 0.5s ease; cursor: pointer; } #sidemenu li:hover, #sidemenu li.selected {letter-spacing: 1px; background-color: rgba(200, 200, 200, 0.2); } #spotlight > div {display: none; width: 100%; height:100%; cursor:default; } #spotlight > div:not(#splash) {width: 696px; /* fix for the scrollbar */ padding: 13px 20px; background-color: rgba(200, 200, 200, 0.2); text-shadow: 0 0 1px #000; color: #171717; overflow-y: auto; } #spotlight > div:not(#splash) > h3 {display: inline; margin: 0; padding: 0 2px; border-top: 1px dashed #171717; border-bottom: 1px dashed #171717; color: #171717; text-transform: uppercase; } #spotlight > div:not(#splash) > p {color: #292929; font-size: 20px; margin: 0 0 20px; padding: 5px; -webkit-transition: background-color 0.6s linear; -ms-transition: background-color 0.6s linear; transition: background-color 0.6s linear; } #spotlight > div:not(#splash) > p:hover {color: #080808; background: rgba(43, 42, 43, 0.8); } #splash {text-align: center; padding: 30px; } #splash img {height: 100%; opacity: 0.8; } #splash1 {display: inline-block; height: 240px; border-top-left-radius: 18px; border-bottom-left-radius: 18px; overflow: hidden; vertical-align: middle; border-right: 4px solid #773447; padding-right: 5px; } #splash2 {display: inline-block; height: 200px; border-top-right-radius: 18px; border-bottom-right-radius: 18px; overflow: hidden; vertical-align: middle; } #splashimage {position: absolute; width: 80%; } #splash h1 {font-family: 'Righteous', serif; font-size: 92px; color: rgba(74, 72, 73, 0.65); text-shadow: 4px 3px 0px rgba(35, 35, 35, 0.8); transition: all 0.6s ease; margin: 240px 0 10px; padding: 0; line-height: 0; text-transform: uppercase; letter-spacing: -2px; opacity: 0.4; } #splash h1:hover {color: rgba(177, 171, 171, 0.5); letter-spacing: 1px; } #splash h1 a {color: inherit; text-decoration: none; } #splash p {display: inline-block; padding: 0px 15px; color: #545454; font-size: 28px; margin-top: 44px; border-top: 1px dashed #808080; font-style: italic; font-family: times new roman, serif; } ::-webkit-scrollbar {width: 5px;} ::-webkit-scrollbar-track {background-color:rgba(200, 200, 200, 0.2);} ::-webkit-scrollbar-thumb {border-radius:0px;background-color:rgba(200, 200, 200, 1);} ::selection {color:#eee;} ::-moz-selection {color:#eee;}