/* xslDesigns
   Hand coded in the USA by Carl Peterson, xslDesigns  */

/* general styles 
**************************************************************** */

body {
    font-weight: 100; font-size: 100%; font-family: "proxima-nova","Proxima Nova",sans-serif;
    text-align: left;
    color: #877;
    margin: 0; }
section {
    position: relative; }
h1 {
    position: relative;
    font-weight: 900; font-size: 380%; line-height: 120%;
    padding: 150px 0 35px 0; }
p { 
    font-weight: 100; line-height: 50%; }
a {
    text-decoration: none;
    color: inherit; }
nav, table {
    text-align: center;}
ul {
    list-style-type: none; }
table {
    margin: 10px auto 0; }
td {
    vertical-align: middle;
    height: 47px; width: 10em; }
li {
    display: inline; }

/* site specific styles
**************************************************************** */

.centered {
    margin: 0 auto;
    text-align: center; }
.disabled {
    color: white; }
h1.small {
    font-size: 200%; }
.small {
    font-size: 90%; }
.smaller {
    font-size: 70%; }
.heavy, .active {
    font-weight: 700; }
.dark, .down-arrow, .a_inline, .a_back, h2, ul, table {
    color: #444; }
.dark {
    font-weight: 400; }
.a_inline, .a_back, h2 {
    font-weight: 500; }
.red, a:hover {
    color: #bd5151; }
.white {
    color: white; }
.wide {
    width: 50em; }
.button {
    color: white;
    padding: 3px 5px;
    border-radius: 5px;
    background-color: #aaa; }
.button:hover {
    color: white;
    background-color: #bd5151; }

.a_inline, .a_back {
    cursor: pointer;}
.a_inline:after {
    padding-left: 5px; /* Add a little space between text and arrow */
    content: "\25B8"; /* Unicode hex for RIGHT-POINTING SMALL TRIANGLE */ }
.a_back:before {
    padding-right: 2px; /* Add a little space between text and arrow */
    content: "\25C2"; /* Unicode hex for LEFT-POINTING SMALL TRIANGLE */ }
.scroll-down {
    font-size: 60%;
    position: relative;
    top: -45px; }
.down-arrow:after {
    padding-left: 5px; /* Add a little space between text and arrow */
    content: "\25be"; /* Unicode hex for DOWN-POINTING SMALL TRIANGLE */ }
.active {
    border-bottom: 4px solid #777; }
.no-line {
    border: none; }
.small_line{
    border-bottom-width: 2px; }
.active:hover, smaller a.active:hover {
    border-bottom-color:  #bd5151; }
.float-l {
    float: left; }
.float-r {
    float: right; }
.clear, .clear-both {
    clear: both; }
.example-spacing {
    padding-bottom: 200px;
    background-color: white;}
.half-spacing {
    padding-bottom: 110px;
    background-color: white;}

.foreign_language, .tech-term, .important {
    font-style: italic; }
.foreign_language, .tech-term {
    cursor: help; }

/* section styles
**************************************************************** */

/* *** STATIC PAGE *** */
/* NAV */
#nav_top {
    position: fixed;
    top: -30px;
    width: 100%;
    height: 40px;
    background-color: white;
    z-index: 9; }
#t_main {
    min-width: 527px;
    padding: 20px 0 10px; }
#ul_sub {
    position: relative;
    top: -30px;
    opacity: 0; }
#ul_sub li {
    border-top: 1px solid #ccc;
    margin: -2px;
    padding: 5px 0.7em; }
#avatar {
    position: relative;
    top: 15px;
    opacity: 0.7; }
#n-hr {
    position: fixed;
    width: 100%; height: 150px;
    top: -45px; left: 0;
    z-index: 8; }

/* BODY */
#home {
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 2; }
#home-section {
    position: relative;
    margin-bottom: 200px; }
#home-section p {
    font-size: 120%;
    margin: 15px; }
#home-section div {
    margin: 10px; }
#home-section .a_inline {
    font-weight: 700; }
#rose {
    position: absolute;
    width: 40%;
    top: 60px; left: -80px;
    opacity: 0.3;
    z-index: 1; }
#leaf {
    position: absolute;
    width: 30%;
    top: 300px; right: 0;
    opacity: 0.4;
    z-index: 1; }
div#disclaimer {
    position: relative;
    top: 250px;
    font-size: 150%; }
#disclaimer a {
    color: #fabd18; }
#disclaimer a:hover {
    color: #bd5151; }
#disclaimer a:visited {
    color: white; /* effectively removes it from the design after the disclaimer has been viewed */ }

/* *** PORTFOLIO PAGES *** */
.nav_sub {
    font-size: 140%;
    position: relative;
    padding: 20px 0 0; }
.d_portfolio {
    position: relative;
    top: 790px;  /* positions it correctly under the static nav bar or image */
    width: 100%;
    background-color: white;
    
    /* allows for a transparent border and an opaque fill (used for the "scroll down" nav)
        clips the background fill to the padding instead of to the border */
    border-top: 35px solid rgba(0, 0, 0, 0.2);  /* rgba adds a transparency property to the color value */
    -webkit-background-clip: padding;       /* Safari 4? Chrome 6? */
       -moz-background-clip: padding;       /* Firefox 3.6 */
            background-clip: padding-box;   /* Firefox 4, Safari 5, Opera 10, IE 9 */
    z-index: 3; }
.examples {
    margin: 0 auto;
    width: 1053px; }
.text-box {
    position: relative;
    width: 18em;
    float: left; }
.i_example {
    float: right; }
.examples h2, .examples p, .examples div { 
    margin: 0 0 11px 0;
    line-height: normal; }
h1.other {
    margin: 0;
    padding: 0; }
h2.client {
    font-size: 160%; }
p.position {
    margin-bottom: 0; }
p.project { }
p.scope {
    margin-bottom: 20px; }
.cta { }
.description { }


q {
    display: block;
    font-weight: 200; font-size: 105%/130%; font-family: "clavo","Clavo",serif;
    padding-left: 10px;
    margin: 70px 0px 0px -15px;
    border-left: 5px solid #ccc; border-radius: 5px; }
q:before, q:after {
    content: none; }
.author {
    font-size: 85%;
    padding-top: 0.5em;
    text-align: right; }
.author:before {
    content: "- "; }
#i_about, #i_hire, #i_ux {
    position: relative;
    top: -37px; left: 0px;
    width: 100%;
    min-width: 1000px;
	-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
	        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); }

/* *** UX / ABOUT / CONTACT *** */
.d_about, .d_contact, .d_ux {
    margin: 0px auto 0;
    width: 40em;}
div.d_about p, div.d_contact p, div.d_ux p {
    text-align: left;
    line-height: normal; }
div.d_contact {
    padding-bottom: 200px; }

/* *** UX *** */
#i_pizza {
    position: relative;
    top: 15px; left: -300px; }

/* *** ABOUT *** */
.skillset {
    width: 200px;
    position: absolute;
    top: 250px; left: 80%; }
.skillset p {
    margin: 2px 0;
    padding: 10px 5px;
    background-color: #d6f6fa;
    color: white; }

.skillset p.s-100 {
    width: 200px; }
.skillset p.s-90 {
    width: 180px; }
.skillset p.s-80 {
    width: 160px; }
.skillset p.s-0 {
    background-color: #fff; }

/* resume */
#resume {
	position: relative;
	width: 40em;
	padding: 40px 0 0;
	margin: 0 auto; }
#resume article {
    width: 600px; }
#resume ul {
    list-style-type: disc;
    color: #aaa; }
#resume li {
    display: list-item; }
#resume p {
	margin: 0;
    padding-left: 3em;
    text-indent: -1em;
    line-height: normal; }

.job-title, .location, .school-name, #resume .heavy {
    font-weight: 500;
    color: #444; }
.gpa {
    font-weight: 100; }

/* *** CONTACT *** */

/* *** PRINT EGC *** */
#eighties {
    position: absolute;
    top: 700px; left: 50px; }

/* xtra pages specific styles
**************************************************************** */

.x_page {
    padding: 40px; }
.x_page-image .examples {
    position: relative;
    top: 100px;  /* positions it correctly under the static nav bar or image */ }
.x_page-image img {}

/* *** X_PAGE UX-REASON *** */
#x_reason .text-box {
    width: 70%; }
#x_reason q.topquote {
    margin-top: 0; }
#x_reason q, #x_reason .author {
    width: 75%; }

/* *** X_PAGE SAPPHSYS *** */
#code_css {
    position: absolute;
    top: 550px; left: 80px; }
#sprite {
    margin-bottom: 50px; }
#favicon, #bombay, #header {
    position: relative; }
#header {
    top: -20px; }
#favicon {
    top: -40px; left: 50px; }
#bombay {
    left: 80px; }

/* *** X_PAGE BANDWAGON *** */
#final_smoke { /* aligns the image with the one above it. The phone sticks out to the right */
    position: relative;
    right: -79px; }
#css_detail {
    position: relative;
    z-index: 20; }
    
/* modal box
**************************************************************** */

.modal {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
    height: 4000px;
	background: rgba(0,0,0,0.4);
	z-index: 100;
	opacity:0;
	-webkit-transition: opacity 200ms ease-in;
	   -moz-transition: opacity 200ms ease-in;
	        transition: opacity 200ms ease-in; 
	pointer-events: none; }

.modal div {
	width: 350px;
	position: relative;
    margin: 120px 0 0 300px;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	-webkit-box-shadow: -5px 5px 20px #555;
	   -moz-box-shadow: -5px 5px 20px #555;
	        box-shadow: -5px 5px 20px #555; }
.modal p {
    line-height: normal;
    text-align: left; }

.modal:target {
	opacity: 1;
	pointer-events: auto; }

.close {
	width: 24px;
	line-height: 25px;
	position: absolute;
	top: -10px; right: -12px;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
	background: #606061;
	-webkit-border-radius: 12px;
	   -moz-border-radius: 12px;
	        border-radius: 12px;
	-webkit-box-shadow: 1px 1px 3px #000;
	   -moz-box-shadow: 1px 1px 3px #000;
	        box-shadow: 1px 1px 3px #000; }
.close:hover { 
    background: #bd5151; }

/* parallax styles
**************************************************************** */

#parallax1, #parallax2, #parallax3 {
    z-index: 1;
    position: fixed;
    width: 100%; }
#parallax1 img, #parallax2 img, #parallax3 img { 
    position: absolute;
    z-index: 1;  }

/* copyright
**************************************************************** */

#copyright {
    position: relative;
    bottom: 0;
    text-align: center;
    padding: 10px;
    background-color: #aaa;
    color: #666; }
#copyright:before {
    padding-right: 5px; /* Add a little space between text and symbol */
    content: "\a9"; /* Unicode hex for COPYRIGHT SYMBOL */ }