@link-blue: #3A76D1; .rounded-corners (@radius: 3px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } .bottom-corners (@radius: 3px) { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-border-bottom-right-radius: @radius; -webkit-border-bottom-left-radius: @radius; -moz-border-radius-bottomright: @radius; -moz-border-radius-bottomleft: @radius; border-bottom-right-radius: @radius; border-bottom-left-radius: @radius; } .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } .vertical-gradient(@start: #000, @stop: #FFF) { background-color: #444444; background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@stop)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, @start, @stop); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, @start, @stop); /* FF3.6 */ background-image: -ms-linear-gradient(top, @start, @stop); /* IE10 */ background-image: -o-linear-gradient(top, @start, @stop); /* Opera 11.10+ */ background-image: linear-gradient(top, @start, @stop); } .transition (@properties:all, @time:0.3s, @easing:ease-out) { -moz-transition: @properties @time @easing; -o-transition: @properties @time @easing; -webkit-transition: @properties @time @easing; -ms-transition: @properties @time @easing; transition: @properties @time @easing; } /* ---------------------------------------------- */ /* ---------------- Welcome Page ---------------- */ /* ---------------------------------------------- */ #welcome-content .entry-title { display: none; } #welcome-content p strong { font-weight: bold; font-size: 2em; float: left; line-height: 1em; padding-right: 10px; font-family: 'Arvo', serif; color: #333; } #welcome-content p a.last { margin: 5px 0 10px; } #welcome-content #headline { line-height: 0; text-align: left; text-shadow: 0 1px 1px #fff; padding-left: 130px; } #welcome-content #headline h2 { font-size: 3.5em; } #welcome-content #headline small { display: block; font-size: 0.6em; line-height: 0; color: #333; } #welcome-content #headline #tommy { font-size: 1.7em; line-height: 1.4em; display: block; color: #3A76D1; } #welcome-content #wave { position: relative; width: 251px; height: 181.7111px; background-image: url(pages_images/Welcome.png); background-color: #fcfcfc; float: right; margin-right: 30px; margin-bottom: 40px; -moz-box-shadow: inset 0px 0px 50px #444; -webkit-box-shadow: inset 0px 0px 50px #444; box-shadow: inset 0px 0px 50px #444; -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -webkit-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); filter: ~"progid:DXImageTransform.Microsoft.Matrix(M11=0.9993908270190958, M12=-0.03489949670250097, M21=0.03489949670250097, M22=0.9993908270190958, sizingMethod='auto expand')"; zoom: 1; } #welcome-content #intro, #welcome-content #outro { display: block; clear: both; font-size: 2em; padding: 0 0 15px; margin-top: 0; } #welcome-content #outro { font-size: 3.5em; margin-bottom: 10px; text-align: center; } #welcome-content #intro { padding-left: 40px; } #welcome-content #intro a:link, #welcome-content #outro a:link { font-weight: bold; float: none; display: inline-block; font-size: 1em; margin: 0; } #welcome-content #outro em { z-index: 1; font-size: 0.8em; line-height: 1em; position: relative; display: block; clear: both; padding: 40px 0 5px; color: #555; } #welcome-content #outro em { font-size: .4em; } #welcome-content #intro em span, #welcome-content #outro em span { background-color: #dcdcdc; background-image: url(images/content_bg.png); padding: 0 10px; } #welcome-content #outro em:after { z-index: -1; position: absolute; content: ""; top: -25%; left: 0; width: 100%; height: 100%; border-bottom: 1px solid #888; } #welcome-content #copy{ } #welcome-content #copy:first-line { font-family: 'Arvo', serif; font-weight: bold; } #welcome-content ul.front-loop { list-style: none; margin: 0; padding: 0; float: right; width: 412px; height: 310px; margin-left: 40px; position: relative; } #welcome-content ul.front-loop li { text-align: center; float: left; margin: 0; position: absolute; top: 0; left: 0; } #welcome-content ul.front-loop li:not(:first-child) { display: none; } #welcome-content ul.front-loop li p { clear: both; margin-top: 5px; } #welcome-content ul.front-loop li img { padding: 6px; .transition; .box-shadow(0, 1px, 5px, rgba(0,0,0,0.5)); } #welcome-content ul.front-loop li a { .transition; position: relative; } #welcome-content ul.front-loop li a:hover { background: none; } #welcome-content ul.front-loop li a:hover img { background: @link-blue; } #welcome-content ul.front-loop li a:active { top: 2px; } /* ---------------------------------------------- */ /* ---------------- Theatre Page ---------------- */ /* ---------------------------------------------- */ #theatre-content dl#info { min-width: 290px; position: relative; color: #fff; background: @link-blue; float: right; padding: 5px 24px 5px 10px; margin-right: -35px; .vertical-gradient(#4184CC, #2F5FC8); .box-shadow(0, 3px, 5px, rgba(0,0,0,0.5)); } #theatre-content dl#info:after { position: absolute; bottom: -14px; right: 0; content: ""; width: 0; height: 0; border-color: #08449F; border-top: 7px solid #08449F; border-left: 7px solid #08449F; border-bottom: 7px solid transparent; border-right: 7px solid transparent; z-index: -1; } #theatre-content dl#info dt { float: left; clear: left; font-weight: bold; text-align: right; padding-right: 5px; width: 120px; } #theatre-content dl#info dt:after { content: ": "; } #theatre-content dl#info dd { float: left; margin: 0; padding-bottom: 5px; } #theatre-content dl#info + a:link, #theatre-content dl#info + a:visited, #theatre-content dl#info + a:hover, #theatre-content dl#info + a:active { background: none; margin: 0; padding: 0; float: left; } #theatre-content dl#info + a:link img { .transition; margin: 0 0 0 40px; padding: 10px; .box-shadow(0, 1px, 5px, rgba(0,0,0,0.5)); } #theatre-content dl#info + a:hover img { background: @link-blue; } #theatre-content .alignright a:link, #theatre-content .alignright a:visited, #theatre-content .alignright a:hover, #theatre-content .alignright a:active { background: none; margin: 0; padding: 0; float: left; } #theatre-content .alignright a:link img { .transition; margin: 20px 0 0 0; padding: 5px; .box-shadow(0, 1px, 5px, rgba(0,0,0,0.5)); } #theatre-content .alignright a:hover img { background: @link-blue; } #theatre-content h4 { font-size: 1.5em; margin-top: 0.5em; margin-bottom: 0; clear: both; } #theatre-content .gallery { margin: 5px 0 10px; clear: both; } #theatre-content .gallery .gallery-item { float: left; margin: 3px; } #theatre-content .gallery .gallery-item.col-6 { float: left; } #theatre-content .gallery img { padding: 3px; .box-shadow(0, 1px, 5px, rgba(0,0,0,0.5)); .transition; } #theatre-content .gallery a { display: block; background: transparent; margin: 0; padding: 0; } #theatre-content .gallery a:hover img { background: @link-blue; } #theatre-content hr { clear: both; } #theatre-content #contents { .transition; background: #fcfcfc; position: fixed; z-index: 1000; top: 0; right: 0; .box-shadow(0, 1px, 5px, rgba(0,0,0,0.5)); padding: 5px 15px 5px 5px; list-style: none; opacity: 0.75 } #theatre-content #contents:hover { opacity: 1; } #theatre-content #contents li { padding: 1px 5px; } #theatre-content #contents h4 { margin: 0 0 5px; font-size: 1.2em; text-align: center; } #theatre-content #contents h4:after { content: "\2026"; } .js #theatre-content #contents { /* Prevent FOUC */ display: none; } #theatre-content h4 + p { margin: 0; } a:link.resume, a:visited.resume { float: right; display: block; background: #fff; padding: 10px 55px 10px 20px; margin: -50px -35px 0 0; position: relative; color: #222; .vertical-gradient(#fff, #dfdfdf); .box-shadow(0, 3px, 5px, rgba(0,0,0,0.5)); .rounded-corners(0); text-decoration: none; olor: #444; } a:link.resume:before, a:visited.resume:before { position: absolute; z-index: -1; bottom: -14px; right: 0; content: ""; width: 0; height: 0; border-color: #C1C1C1; border-top: 7px solid #C1C1C1; border-left: 7px solid #C1C1C1; border-bottom: 7px solid transparent; border-right: 7px solid transparent; } a:link.resume:after, a:visited.resume:after { content: " \2192" } a:hover.resume { text-decoration: underline; } ul.mini-loop { list-style: none; margin: 10px 0; padding: 0; } ul.mini-loop li { text-align: center; float: left; margin: 0 3px; } ul.mini-loop li p { clear: both; margin-top: 5px; } ul.mini-loop li img { padding: 3px; .transition; .box-shadow(0, 1px, 5px, rgba(0,0,0,0.5)); } ul.mini-loop li a { .transition; position: relative; } ul.mini-loop li a:hover { background: none; } ul.mini-loop li a:hover img { background: @link-blue; } ul.mini-loop li a:active { top: 2px; } /* ---------------------------------------------- */ /* ---------------- Computer Page --------------- */ /* ---------------------------------------------- */ #computer-content img { border: 1px solid #7b7b7b; padding-top: 13px; background: transparent url(pages_images/window_chrome.png) no-repeat top left; .rounded-corners(5px); .box-shadow(0, 2px, 10px, rgba(0,0,0,0.25)); } #computer-content img.no-border { border: 0 solid transparent; padding-top: 0; background: none; .rounded-corners(0); .box-shadow(0, 0, 0, transparent); } #computer-content hr { clear: both; } #web-badges{ clear:both; float: left; margin: 10px 107px 30px; } #web-badges img:nth-of-type(2){ padding: 27px 0; } #web-badges img:nth-of-type(3){ padding: 17px 0; } #web-badges img:nth-of-type(4){ padding: 8px 0; } #web-badges img:nth-of-type(5){ padding: 8px 0; } /* ---------------------------------------------- */ /* ---------------- Contact Page --------------- */ /* ---------------------------------------------- */ #contact-content .half input, #contact-content .half textarea { font-family: 'PT Sans', sans-serif; border: 3px solid #ccc; font-size: 1.2em; padding: 5px 7px; color: #222; background: #fcfcfc; .transition; margin: 0; width: 418px; } #contact-content .half input:focus, #contact-content .half textarea:focus { border: 3px solid #3A76D1; outline: none; } #contact-content .half { float: left; width: 462px; } #contact-content textarea { resize: none; height: 207px; } #contact-content input.wpcf7-submit { cursor: pointer; float: right; font-weight: bold; display: block; background: #2f5fc8; padding: 5px 65px 5px 20px; margin: 0 -35px 0 0; position: relative; .vertical-gradient(#468eda, #2f5fc8); .box-shadow(0, 3px, 5px, rgba(0,0,0,0.5)); .rounded-corners(0); text-decoration: none; color: #fcfcfc; border: none; font-size: 1.2em; font-family: 'PT Sans', sans-serif; } #contact-content #submit_p { float: right; display: block; position: relative; top: -15px; } #contact-content #submit_p:before { position: absolute; bottom: -14px; right: -35px; content: ""; width: 0; height: 0; border-color: #08449F; border-top: 7px solid #08449F; border-left: 7px solid #08449F; border-bottom: 7px solid transparent; border-right: 7px solid transparent; }