/* ========================================================================== HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) ========================================================================== */ html, button, input, select, textarea {color: #fff;} body {font-size: 1em; line-height: 1.4;} ::-moz-selection {background: #b3d4fc; text-shadow: none;} ::selection {background: #b3d4fc; text-shadow: none;} hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} img {vertical-align: middle;} fieldset {border: 0; margin: 0; padding: 0;} textarea {resize: vertical;} .chromeframe {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;} /* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body {font: 16px/26px 'LaneNarrowRegular', Helvetica, Helvetica Neue, Arial;} /* Sprites */ .header-container header nav ul li a, .site-wrapper a.button, input[type="submit"] {background-image: url('../img/site-sprite.png'); background-repeat: no-repeat; background-position: 0 0;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li a, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .play .play-button {background-image: url('../img/icons.png'); background-repeat: no-repeat; background-position: 0 0;} /* =================== ALL: Philip Theme =================== */ /* *** Layout *** */ .wrapper {width: 90%; margin: 0 5%;} .title {color: white;} @font-face { font-family: 'FrancoisOneRegular'; src: url('../fonts/FrancoisOne-webfont.eot'); src: url('../fonts/FrancoisOne-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/FrancoisOne-webfont.woff') format('woff'), url('../fonts/FrancoisOne-webfont.ttf') format('truetype'), url('../fonts/FrancoisOne-webfont.svg#FrancoisOneRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LaneNarrowRegular'; src: url('../fonts/LANENAR_-webfont.eot'); src: url('../fonts/LANENAR_-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/LANENAR_-webfont.woff') format('woff'), url('../fonts/LANENAR_-webfont.ttf') format('truetype'), url('../fonts/LANENAR_-webfont.svg#LaneNarrowRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'BebasNeueRegular'; src: url('../fonts/BebasNeue-webfont.eot'); src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } .header-container {background: url('../img/dark_stripes.png') repeat 0 0; color: #fff; border-bottom: 2px solid #bbd4dd;} .header-container header nav ul li a {text-decoration: none; font-weight: bold; color: white; font-family: 'FrancoisOneRegular', Arial, sans-serif !important; text-transform: lowercase;} .header-container header nav ul li a:hover, .header-container header nav ul li a:visited {color: white;} .site-wrapper .main-container {border-top: 2px solid #bbd4dd;} .site-wrapper .main-container .main {padding: 30px 0;} .site-wrapper .main-container .main article #site-intro img {max-width: 100%;} .site-wrapper .main-container .main aside {padding: 0px 5% 10px;} .site-wrapper .main-container .normal article {margin-bottom: 125px;} .site-wrapper .main-container .normal article > header {margin: 50px 0; text-align: center; text-transform: lowercase; font-family: 'FrancoisOneRegular', Arial, sans-serif; color: #bbd4dd;} .site-wrapper #my-playlist-content {background: #000 url('../img/playlist-bg.png') repeat 50% 0;} .site-wrapper #my-credits-content {background: #fff url('../img/my-credits-bg.png') repeat 0 0;} .site-wrapper #contact-me-content {background: #000 url('../img/outlets.png') repeat 0 0;} .site-wrapper #home-content {background: #000 url('../img/home-bg.png') repeat 0 0; border-top: none !important;} .site-wrapper #home-content .one-col article .marquee {text-align: center;} .site-wrapper #home-content .one-col article .marquee img {max-width: 100%;} .site-wrapper #home-content .one-col article .marquee-text {text-align: center;} .site-wrapper #home-content .one-col article .marquee-text .philipmontesinos {font-family: 'BebasNeueRegular', Arial, sans-serif !important; font-size: 2.5em; line-height: 1em; color: #95d5d5;} .site-wrapper #home-content .one-col article .marquee-text .sentence1 {font-family: 'BebasNeueRegular', Arial, sans-serif !important; line-height: 1em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span {font-family: 'BebasNeueRegular', Arial, sans-serif !important; line-height: 1em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.front {color: #b5a3f6;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.end {color: #95d5d5;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.developments {color: #000; background-color: #fff; padding: 0 5px; display: inline-block;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.my {color: #95d5d5;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.game {color: #b5a3f6;} .site-wrapper #home-content .one-col article .marquee-text {margin-top: -80px;} .site-wrapper #home-content .one-col article .marquee-text .sentence1 {font-size: 2em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {text-align: center; margin: -25px auto 0; padding: 0; overflow: hidden; display: table;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span {float: left; margin: 0 0 -7px; padding: 0;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.front {font-size: 3.5em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.end {font-size: 2em; transform-origin: 50% 50%; transform: rotate(90deg) translate(.3em, .05em); -ms-transform: rotate(90deg) translate(.1em, .05em); -moz-transform: rotate(90deg) translate(.3em, .05em); -webkit-transform: rotate(90deg) translate(.1em, .05em); -o-transform: rotate(90deg) translate(.3em, .05em);} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.developments {font-size: 3.5em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.my {font-size: 2em; transform-origin: 50% 50%; transform: rotate(-90deg) translate(-0.3em, .22em); -ms-transform: rotate(-90deg) translate(-0.1em, .22em); -moz-transform: rotate(-90deg) translate(-0.3em, .22em); -webkit-transform: rotate(-90deg) translate(-0.1em, .22em); -o-transform: rotate(-90deg) translate(-0.3em, .22em);} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.game {font-size: 3.5em; padding-left: 10px;} .site-wrapper #home-content .main article header h1 {font-weight: normal;} .site-wrapper #home-content .main article header h1:first-child {margin-bottom: -10px;} .site-wrapper #home-content .main aside {color: white; background: #000;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track {position: relative; overflow: hidden;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track:hover {cursor: pointer;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track a {display: block; position: relative; text-decoration: none;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .transparency {position: absolute; width: 100%; height: 100%; bottom: 0; left: 0;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption {color: #000; background-color: #000;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption {height: 90px; padding: 5px; float: left; width: 70%; background-color: #fff;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4 {margin: 0 0 10px 0;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption span {display: inline-block;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .play {height: 90px; float: right; width: 24%;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .play .play-button {text-align: center; margin: 20px auto; width: 30px; height: 45px; text-indent: -9999px; background-position: -144px -18px;} .csstransitions .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption {position: absolute; left: 0; width: 100%; text-align: left; overflow: hidden; clear: both; bottom: -90px; height: 90px; transition: bottom .5s; -webkit-transition: bottom .5s; -o-transition: bottom .5s; -moz-transition: bottom .5s;} .csstransitions .site-wrapper #my-playlist-content .wrapper article .playlist-container .track:hover .rollover-caption {bottom: 0px;} .csstransitions .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .transparency {opacity: 0; filter:alpha(opacity=0); transition: opacity 1s; -webkit-transition: opacity 1s; -o-transition: opacity 1s; -moz-transition: opacity 1s; transition: background 1s; -webkit-transition: background 1s; -o-transition: background 1s; -moz-transition: background 1s;} .csstransitions .site-wrapper #my-playlist-content .wrapper article .playlist-container .track:hover .transparency {opacity: 0.5; filter:alpha(opacity=50); background: #000; #background: url('../img/ie7-transparent-black.png') repeat 0 0;} .touch .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption {position: absolute; left: 0; width: 100%; text-align: left; overflow: hidden; clear: both; bottom: 0; height: 90px; transition: bottom 0; -webkit-transition: bottom 0; -o-transition: bottom 0; -moz-transition: bottom 0;} .no-csstransitions .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption {position: absolute; left: 0; width: 100%; text-align: left; overflow: hidden; clear: both; bottom: 0; height: 90px;} .no-csstransitions .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .transparency {opacity: 0.5; filter:alpha(opacity=50); background: #000; #background: url('../img/ie7-transparent-black.png') repeat 0 0;} .site-wrapper #my-credits-content .normal article > header {color: #000;} .site-wrapper #my-credits-content .normal article .skill-set-container {overflow: hidden; margin: 30px 0 0 0;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set section {padding: 10px; height: 300px; background-color: #000; border: 1px solid #fff; -moz-box-shadow: 3px 3px 5px #888; -webkit-box-shadow: 3px 3px 5px #888; box-shadow: 3px 3px 5px #888;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set section header {margin: -10px -10px 10px -10px; background-color: #bbd4dd; border-bottom: 1px solid #fff;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set section header h3 {text-align: left; padding: 10px; margin: 0; font-family: 'LaneNarrowRegular', Arial, sans-serif; font-size: 1.333em; text-transform: capitalize; font-weight: bold; color: #000;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set section ul {padding: 0 0 0 30px;} .site-wrapper #contact-me-content .normal article section header h3 {font-size: 1.333em; font-weight: bold;} .site-wrapper #contact-me-content .normal article section ul.form-inputs li label {font-weight: bold; color: #f4e7fc;} .site-wrapper #contact-me-content .normal article .contact-container .biography {overflow: hidden;} .site-wrapper #contact-me-content .normal article .contact-container .form {overflow: hidden;} .site-wrapper #contact-me-content .normal article .contact-container section {overflow: hidden;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links {list-style-type: none; padding-left: 0; clear: both;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li {float: left; margin-right: 10px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li a {display: block; text-indent: -9999px; width: 72px; height: 72px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li#linkedin a {background-position: -18px -18px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li#linkedin a:hover {background-position: -18px -118px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li#twitter a {background-position: -18px -234px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li#twitter a:hover {background-position: -18px -335px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li#pinterest a {background-position: -18px -450px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li#pinterest a:hover {background-position: -18px -550px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.form-inputs {list-style-type: none; padding-left: 0;} .site-wrapper #contact-me-content .normal article .contact-container section ul.form-inputs li {margin-bottom: 30px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.form-inputs li label {display: block; margin-bottom: 5px;} .site-wrapper .footer-container {background: #000; border-top: 2px solid #bbd4dd;} .site-wrapper .footer-container footer {padding: 10px 0; text-align: center; color: white;} #response {display: none; font-weight: bold;} #error {display: none; font-weight: bold; color: #f65e89;} input[type="text"], textarea {padding: 2px; width: 75%; background-color: #bbd4dd; border: 1px solid #fff; color: #000; -moz-box-shadow: inset 2px 2px 5px #888; -webkit-box-shadow: inset 2px 2px 5px #888; box-shadow: inset 2px 2px 5px #888;} input[type="text"] {height: 35px;} input[type="text"]:focus, textarea:focus {background-color: #fff;} textarea {height: 100px;} input[type="submit"] {background-position: -148px -18px; width: 157px; height: 42px; padding: 7px 0; font-family: 'FrancoisOneRegular', Arial, sans-serif; color: #fff; cursor: pointer; color: #fff; text-decoration: none; text-transform: lowercase; display: block; text-align: center; background-color: transparent; border: none;} input[type="submit"]:hover {background-position: -148px -78px;} .site-wrapper a.button {background-position: -148px -18px; width: 157px; height: 28px; padding: 7px 0; font-family: 'FrancoisOneRegular', Arial, sans-serif; color: #fff; cursor: pointer; color: #fff; text-decoration: none; text-transform: lowercase; display: block; text-align: center;} .site-wrapper a.button:hover {background-position: -148px -78px;} .lb-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/ice_age.png') repeat 0 0; z-index: 111111111; color: #000;} .lb-overlay .lb-overlay-wrapper {overflow: hidden; position: absolute; padding: 50px;} .lb-overlay .lb-overlay-wrapper .lb-content {position: relative; overflow: hidden; clear: both; } .lb-overlay .lb-overlay-wrapper .lb-content .screenshot {float: left; width: 59%; text-align: center;} .lb-overlay .lb-overlay-wrapper .lb-content .screenshot .screenshot-wrapper {background-color: #eee; border: 1px solid #ccc; padding: 10px;} .lb-overlay .lb-overlay-wrapper .lb-content .screenshot img {max-width: 100%; max-height: 100%; border: 1px solid #ccc;} .lb-overlay .lb-overlay-wrapper .lb-content .information {float: left; width: 29%;} /* =============== ALL: IE Fixes =============== */ .ie7 .title {padding-top: 20px;} /* ========================================================================== Media Queries ========================================================================== */ @media only screen and (min-width: 320px) { /* ==================== INTERMEDIATE: Menu ==================== */ /* *** LAYOUT *** */ .header-container {position: relative; text-align: center;} .header-container header h1.title {margin: 10px 0;} .header-container header h1.title a {width: 200px; height: 42px; display: block; text-align: center; margin: 0 auto; /*background: url('../img/logo-small.png') no-repeat 50% 0;*/} .header-container header h1.title a img {/*display: none;*/ display: block; max-width: 100%;} .header-container header nav {float: left; position: relative; width: 100%; overflow: hidden;} .header-container header nav .nav-wrapper {clear: left; float: left; position: relative; left: 50%; text-align: center;} .header-container header nav ul {display: block; float: left; position: relative; list-style: none; margin: 5px 0 15px -10px; padding: 0; right: 50%;} .header-container header nav ul li {float: left; text-align: center; width: 75px;} .header-container header nav ul li a {display: block; margin: 0 5px; padding: 1px 0; margin-bottom: 0; height: 31px; font-size: .9em; line-height: 1em;} .header-container header nav ul li a span {padding: 1px 4px 0; display: block;} .header-container header nav ul li:first-child a {margin-left: 10px;} .header-container header nav ul li:last-child a {margin-right: 0;} .header-container header nav ul > li a {background-position: -18px -348px;} .header-container header nav ul > li a:hover {background-position: -18px -398px;} .header-container header nav ul > li a.active {background-position: -18px -448px;} .header-container header nav ul li.home {display: none;} .site-wrapper .main-container .normal article header h2 {font-size: 1.333em; margin-bottom: 1em;} .site-wrapper #home-content .one-col article .marquee img {display: none;} .site-wrapper #home-content .one-col article .marquee-text {margin-top: -60px;} .site-wrapper #home-content .one-col article .marquee-text .philipmontesinos {margin-bottom: -20px;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {font-size: .45em; display: table; margin: -20px auto 0; text-align: center;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span {float: left; display: block; line-height: 1.3em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.end {font-size: 2.8em; transform-origin: 50% 50%; transform: rotate(90deg) translate(.1em, .05em);} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.developments {margin-bottom: -4px;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.my {font-size: 2.8em; transform-origin: 50% 50%; transform: rotate(-90deg) translate(-0.1em, .22em);} .site-wrapper #home-content .main article h1 {font-size: 1.5em; line-height: 1.2em;} .site-wrapper #home-content .main article header h1:first-child {font-size: 2em;} .site-wrapper #home-content .one-col article #site-intro {font-size: 14px;} .site-wrapper #home-content .one-col article #site-intro .intro-text-second {margin-top: -30px;} .site-wrapper .main-container .wrapper article .playlist-container {overflow: hidden; width: 100%; clear: both;} .site-wrapper .main-container .wrapper article .playlist-container .track {height: 50%; width: 75%; margin: 2px auto; text-align: center; background-color: #fff;} .site-wrapper .main-container .wrapper article .playlist-container .track a > img {text-align: center; max-width: 100%; max-height: 100%;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track {} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption span {font-size: .85em; line-height: 1.2em;} .site-wrapper #my-credits-content .normal article .skill-set-container {padding: 0 10px;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set {margin-bottom: 40px;} .site-wrapper #contact-me-content .normal article .contact-container section {margin-bottom: 50px; padding-bottom: 50px;} .site-wrapper #contact-me-content .normal article .contact-container .biography section {border-bottom: 1px solid #fff;} .fancybox-close {font-size: 1.8em; padding: 5px 8px 5px 8px !important; background-color: #000; color: #fff; text-decoration: none; text-align: center; text-transform: capitalize;} .fancy-two-col-ctr {padding: 0 40px;} .fancy-two-col {width: 100%; overflow: hidden; clear: both; } .fancy-two-col .fancy-left {width: 100%; } .fancy-two-col .fancy-right {width: 100%; text-align: center;} .fancy-img-ctr {padding: 10px;} .fancy-two-col .fancy-right img {max-width: 100%; max-height: 100%; -moz-box-shadow: 3px 3px 5px #888; -webkit-box-shadow: 3px 3px 5px #888; box-shadow: 3px 3px 5px #888888;} .fancybox-nav {display: block; position: absolute; cursor: pointer; text-decoration: none; z-index: 8040; font-size: 1.8em; padding: 1px 5px 4px 5px !important; background-color: #000; color: #fff;} .fancybox-nav:hover, .fancybox-close:hover, .fancybox-close:hover {background-color: #242424;} /* ======================== INTERMEDIATE: IE Fixes ======================== */ .header-container header nav ul li {} .oldie nav a {margin: 0 0.7%;} } @media only screen and (min-width: 480px) { /* *** LAYOUT *** */ .header-container header h1.title {float: left; width: 40%;} .header-container header h1.title a {display: inline; text-align: left; margin: 0; background-image: none;} .header-container header h1.title a img {display: block; max-width: 100%;} .header-container header nav {float: right; position: static; width: 60%; overflow: hidden; margin-top: 10px;} .header-container header nav .nav-wrapper {clear: both; float: none; position: static; text-align: center;} .header-container header nav ul {display: block; float: right; position: static; margin: 5px 0 15px 10px; padding: 0;} .header-container header nav ul li a {float: left; margin-bottom: 0;} .header-container header nav ul li:first-child a {margin-left: 0;} .header-container header nav ul li:last-child a {margin-right: 0;} .site-wrapper #home-content .one-col article #site-intro {font-size: 16px;} .site-wrapper #home-content .one-col article .marquee img {display: inline;} .site-wrapper #home-content .one-col article .marquee-text .philipmontesinos {display: none;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {font-size: .5em;} .site-wrapper .main-container .wrapper article .playlist-container .track {float: left; height: 40%; width: 48%; margin: 2px;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption span {font-size: .9em; line-height: 1.2em;} /* *** STYLE *** */ /* ======================== INTERMEDIATE: IE Fixes ======================== */ .header-container header nav ul li {display: inline;} .oldie nav a {margin: 0 0.7%;} } @media only screen and (min-width: 600px) { .header-container header nav ul li a {float: left; margin-bottom: 0;} .header-container header nav ul li a span {padding: 0; display: inline;} .header-container header nav ul li:first-child a {margin-left: 0;} .header-container header nav ul li:last-child a {margin-right: 0;} .site-wrapper #home-content .one-col article section {margin: 0 12%;} .site-wrapper #home-content .main article h1 {font-size: 2em; line-height: 1.2em;} .site-wrapper #home-content .main article header h1:first-child {font-size: 2.5em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {font-size: .5em;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 span.next-row {clear: none;} /* .site-wrapper #home-content .one-col article #site-intro {} .site-wrapper #home-content .one-col article #site-intro p.philip {float: left;} .site-wrapper #home-content .one-col article #site-intro p.montesinos {float: left; transform-origin: 50% 50%; transform: translate(.5em, .5em);} .site-wrapper #home-content .one-col article #site-intro p.is {font-size: 5em; transform-origin: 50% 50%; transform: translate(-3.8em, 1em);} .site-wrapper #home-content .one-col article #site-intro p.my1 {font-size: 4em; transform-origin: 50% 50%; transform: rotate(90deg) translate(.2em, 1.4em);} .site-wrapper #home-content .one-col article #site-intro p.name {font-size: 6em; transform-origin: 50% 50%; transform: translate(1em, -.75em);} .site-wrapper #home-content .one-col article #site-intro p.front {transform-origin: 0 0; transform: translate(0em, 0em);} .site-wrapper #home-content .one-col article #site-intro p.end {transform-origin: 50% 50%; transform: rotate(90deg) translate(0em, 0em); } .site-wrapper #home-content .one-col article #site-intro p.developments {transform-origin: 0 0; transform: translate(0em, 0em); } .site-wrapper #home-content .one-col article #site-intro p.my2 {transform-origin: 50% 50%; transform: rotate(-90deg) translate(0em, 0em);} .site-wrapper #home-content .one-col article #site-intro p.game {transform-origin: 0 0; transform: translate(0em, 0em);}*/ .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4 {margin-bottom: 5px;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption span {font-size: 1em; line-height: 1.2em;} .site-wrapper #contact-me-content .wrapper article .contact-container {overflow: hidden; width: 100%; clear: both;} .site-wrapper #contact-me-content .wrapper article .contact-container .biography {float: left; width: 55%;} .site-wrapper #contact-me-content .wrapper article .contact-container .biography section {border-bottom: none;} .site-wrapper #contact-me-content .wrapper article .contact-container .form {float: left; width: 43%;} .site-wrapper #contact-me-content .wrapper article .contact-container section {margin-left: 50px; margin-bottom: 0; padding-bottom: 0;} } @media only screen and (min-width: 768px) { .header-container {position: fixed; width: 100%; left: 0; top: 0; z-index: 1000;} .header-container header h1.title {float: left; width: 25%;} .header-container header h1.title img {max-width: 100%;} .header-container header nav {float: right; width: 75%; overflow: hidden; margin-top: -15px;} .header-container header nav ul {float: right; margin-top: 28px;} .header-container header nav ul li {float: none;} .header-container header nav ul li a {float: left; margin: 0 2px; padding: 9px 23px; margin-bottom: 0; height: 18px; font-size: 1em;} .header-container header nav ul li:first-child a {margin-left: 0; padding: 9px 20px;} .header-container header nav ul li.home {display: inline;} .header-container header nav ul li.contact a {margin-left: -3px;} .header-container header nav ul > li.home a {background-position: -18px -198px;} .header-container header nav ul > li.home a:hover {background-position: -18px -248px;} .header-container header nav ul > li.home a.active {background-position: -18px -298px;} .header-container header nav ul > li.my-playlist a {background-position: -128px -198px;} .header-container header nav ul > li.my-playlist a:hover {background-position: -128px -248px;} .header-container header nav ul > li.my-playlist a.active {background-position: -128px -298px;} .header-container header nav ul > li.my-credits a {background-position: -288px -198px;} .header-container header nav ul > li.my-credits a:hover {background-position: -288px -248px;} .header-container header nav ul > li.my-credits a.active {background-position: -288px -298px;} .header-container header nav ul > li.contact a {background-position: -438px -198px;} .header-container header nav ul > li.contact a:hover {background-position: -438px -248px;} .header-container header nav ul > li.contact a.active {background-position: -438px -298px;} .header-container, .site-wrapper .main-container .main aside { -webkit-box-shadow: 0 5px 10px #171919; -moz-box-shadow: 0 5px 10px #171919; box-shadow: 0 5px 10px #171919; } .site-wrapper {font-size: 1.125em; margin-top: 61px; z-index: 1;} .site-wrapper .one-col article {width: 100%;} .site-wrapper #home-content .main article h1 {font-size: 1.83333333333em;} .site-wrapper #home-content .one-col article .marquee-text {margin-top: -80px;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {font-size: .6em;} .site-wrapper .main-container .wrapper article .playlist-container .track {float: left; height: 30%; width: 32%;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption span {font-size: .85em;} .site-wrapper #my-credits-content .normal article .skill-set-container {padding: 0;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set {float: left; width: 49%;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set section {margin: 15px;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set:last-child {width: 98%;} .fancybox-close {font-size: 2.3em; padding: 15px 14px 15px 14px !important; *padding: 0px 14px 18px 14px !important;} .fancy-two-col-ctr {padding: 0 80px;} .fancy-two-col {width: 100%; overflow: hidden; clear: both; } .fancy-two-col .fancy-left {float: left; width: 39%; } .fancy-two-col .fancy-right {float: right; width: 59%; overflow: hidden;} .fancy-two-col .fancy-right .gal-ctr {display: block; overflow:hidden;} .fancy-two-col .fancy-right img { max-width: 100%; max-height: 100%;} .fancybox-nav-ctr {*margin-top: -50px !important;} .fancybox-nav {font-size: 3.75em; padding: 10px 10px 18px 10px !important; *padding: 0px 10px 50px 5px !important;} } @media only screen and (min-width: 800px) { .site-wrapper #home-content .one-col article #site-intro {margin: 0 auto; text-align: center; overflow: hidden; width: 85%; font-size: 14px;} .site-wrapper #home-content .one-col article #site-intro .intro-text-first {float: left; border-bottom: none; width: 49%;} .site-wrapper #home-content .one-col article #site-intro .intro-text-second {float: right; padding-top: 0; margin-top: 15px; width: 49%;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {font-size: .8em;} } @media only screen and (min-width: 992px) { .header-container header {width: 960px; margin: 0 auto; text-align: center;} .header-container header nav {margin-top: -10px;} .site-wrapper .main-container .wrapper {width: 960px; /* 1140px - 10% for margins */ margin: 0 auto;} .site-wrapper #home-content .one-col article #site-intro {font-size: 16px; width: 80%;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4 {margin-bottom: 10px;} .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption h4, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .caption span {font-size: 1em;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set {width: 33%;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set:last-child {width: 33%;} .site-wrapper #my-credits-content .normal article .skill-set-container .skill-set section {margin: 15px;} .header-container header h1.title {width: 30%;} .header-container header nav {width: 70%; margin-top: -15px;} .header-container header nav ul li a {float: left; margin: 0 2px; padding: 12px 38px; margin-bottom: 0; height: 18px;} .header-container header nav ul li:first-child a {margin-right: 0; padding: 12px 30px;} .header-container header nav ul > li.home a {background-position: -18px -18px;} .header-container header nav ul > li.home a:hover {background-position: -18px -78px;} .header-container header nav ul > li.home a.active {background-position: -18px -138px;} .header-container header nav ul > li.my-playlist a {background-position: -148px -18px;} .header-container header nav ul > li.my-playlist a:hover {background-position: -148px -78px;} .header-container header nav ul > li.my-playlist a.active {background-position: -148px -138px;} .header-container header nav ul > li.my-credits a {background-position: -338px -18px;} .header-container header nav ul > li.my-credits a:hover {background-position: -338px -78px;} .header-container header nav ul > li.my-credits a.active {background-position: -338px -138px;} .header-container header nav ul > li.contact a {background-position: -518px -18px;} .header-container header nav ul > li.contact a:hover {background-position: -518px -78px;} .header-container header nav ul > li.contact a.active {background-position: -518px -138px;} } @media only screen and (min-width: 1140px) { .header-container header nav {margin-top: -5px;} .header-container {width: 100%;} .header-container header nav ul li a {padding: 7px 20px; height: 28px; font-size: 1.5em;} .header-container header nav ul li:first-child a {padding: 7px 20px; height: 28px;} .site-wrapper {margin-top: 83px;} .site-wrapper #home-content .one-col article #site-intro {font-size: 19px;} .site-wrapper #home-content .one-col article #site-intro .intro-text-second {margin-top: -5px;} .site-wrapper #home-content .one-col article .marquee-text .sentence2 {font-size: 1em;} } @media only screen and (min-width: 320px) and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (min-width: 320px) and (-moz-min-device-pixel-ratio: 1.5), only screen and (min-width: 320px) and (-o-min-device-pixel-ratio: 3/2), only screen and (min-width: 320px) and (min-device-pixel-ratio: 1.5) { /*.header-container header h1.title a {background-image: url('../img/logo-small@2x.png'); background-size: 50%;}*/ } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .header-container header nav ul li a, .site-wrapper a.button, input[type="submit"] {background-image: url('../img/site-sprite@2x.png'); background-size: 750px 550px;} .header-container {background-image: url('../img/dark_stripes_@2x.png'); background-size: 50px;} .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li a, .site-wrapper #my-playlist-content .wrapper article .playlist-container .track .rollover-caption .play .play-button {background-image: url('../img/icons@2x.png'); background-size: 200px 1200px;} .site-wrapper #contact-me-content {background-image: url('../img/outlets@2x.png'); background-size: 4px 8px;} .site-wrapper #my-playlist-content {background-image: url('../img/subtle_carbon@2x.png'); background-size: 18px 15px;} .site-wrapper #my-credits-content {background-image: url('../img/my-credits-bg@2x.png'); background-size: 600px 1000px;} /* .site-wrapper #contact-me-content .normal article .contact-container section ul.social-media-links li a, .site-wrapper #my-playlist-content .wrapper article .playlist-container .lb-overlay {background-image: url('../img/ice_age@2x.png'); background-size: 50%;}*/ } /* ========================================================================== Helper classes ========================================================================== */ .ir {background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px;} .ir:before {content: ""; display: block; width: 0; height: 100%;} .hidden {display: none !important; visibility: hidden;} .visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;} .invisible {visibility: hidden;} .clearfix:before, .clearfix:after {content: " "; display: table;} .clearfix:after {clear: both;} .clearfix {*zoom: 1;} .bold {font-weight: bold;} /* ========================================================================== Print styles ========================================================================== */ @media print { * {background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow:none !important; text-shadow: none !important;} a, a:visited {text-decoration: underline;} a[href]:after {content: " (" attr(href) ")";} abbr[title]:after {content: " (" attr(title) ")";} /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {content: "";} pre, blockquote {border: 1px solid #999; page-break-inside: avoid;} thead {display: table-header-group; /* h5bp.com/t */} tr, img {page-break-inside: avoid;} img {max-width: 100% !important;} @page {margin: 0.5cm;} p, h2, h3 {orphans: 3; widows: 3;} h2, h3 {page-break-after: avoid;} }