/*  eman
Site URI: http://www.jennyscheu.com
Site Name: Jenny Potter Scheu website
Description: Printmaker and Painter, Jenny Scheu's website
Version: 1.0	
Author: jmbroekman	
Author URI: http://www.jmbroekman.com

*/

/* DEFAULT PALETE

Nameplate & Bar: rgb (75, 82, 99) #4b5263;
Lighter version (bottom rule and rs): rgb(151 155 165) #979ba5
text: (102, 102, 102) #666
thumb shadows: #AEADAD
single shadow: #8C8C8C
Selected and hover: rgb( 74, 74, 59) #4a4a3b
link a: rgb(123 123 112) # 7b7b70
*/

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #666;
}

body {
    font-size: 0.9em;
    line-height: 1.4;
	font-family:Arial, Helvetica, sans-serif;
	border-top: solid 5px #4b5362;
}


/* RESET */
/*using html 5; to make elements block rather than in-line*/

header, footer, section, aside, nav, article, hgroup, details, figure, figcaption {display: block;}

/*global elements */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img { 
	border: 0;
	}
ol,ul {
	list-style: none;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	
	}
	
h4 {}
abbr,acronym { border: 0;
	}
figure {margin:0; padding:0;}	

/*JS SPECIFIC */

a:link, a:visited { color:#7b7b70; text-decoration:none;} 
a:hover {color:#4a4a3b;}
	

#wrapper { max-width:960px; width:100%; margin:5px auto; position:relative; clear:both; overflow:auto;}


header { 
	background-image:url(../assets/js-nameplate.jpg);
	background-repeat:no-repeat; 
	background-position:top left;
	margin-left:20px;
	height:106px;
	margin-top:2%;
	background-color: #FFFFFF;
	max-width:960px;
	

	}
h1 {
	text-indent:-99999px; display:none;
}

#homelink {
	height:91px;
	width:537px;
	background-color: transparent;
	position:absolute;
}

#contact {
	font-size: 90%;
    float: right;
    position: relative;
    text-align: right;
    top: 45%;
	padding-right:2%;
	}


	
section {
	margin-bottom: 5%;
    margin-left: 30%;
    overflow: hidden;
    width: 68%;
}

#portfolio > #wrapper> section {margin-left:32%; width:64%;}
#portfolio figure {margin-left:24px; margin-top:12px;}
#portfolio img { box-shadow: 2px 2px 5px rgba(91, 91, 91, 0.4);}

article {
	overflow:hidden;
	position:relative;
	margin-top:36px;}


/*HOME PAGE THUMBS */
/*p.thumbs {margin: 3% 4%;}*/

ul.thumbs, ul.thumbs-paint, ul.thumbs-design { 
	background-color: #FFFFFF;
    margin: 24px auto 12px;
    overflow: hidden;
    position: relative;
    width: 80%;
}
ul.thumbs-paint {width:90%; margin:8px auto 35px;}
ul.thumbs-design {width:98%; text-align:center;}
ul.thumbs-design li {font-size:85%; padding:0 16px 16px 0; display:inline-block;}
ul.thumbs-design li figcaption {padding-top:2px; font-size:85%; padding-left:2px;}

ul.thumbs li, ul.thumbs-paint li {display:inline; width:135px; line-height:0; float:left; padding: 0 16px 16px 0; height:135px;}

ul.thumbs-paint li {
	height: 115px;
    margin: 8px;
    position: relative;
    width: 115px;
	padding: 0 5px 5px 0;
}

ul.thumbs-paint li img {
	position:absolute;/* this makes the thumb move down and right rather than left and up in the animation*/
	left:0;
	top:0;
	height:115px;
	width:115px; /* height and width make thumbs smaller, so they get bigger in the animation */
}

footer {
	clear: both;
    font-size: 75%;
    padding-top: 1%;
    text-align: right;
	border-top: 1px dotted #A0AFB8;
}


aside {
	float: left;
    font-size: 120%;
    line-height: 150%;
    margin-left: 58px;
    margin-top: 36px;
    max-width: 235px;
	width:20%;
	margin-right:24px;}

aside ul li {margin-top:8px; color:#4a4a3b;}
aside ul li a:hover {color:#4a4a3b;}

aside ul.more {margin-top:36px; font-size:90%;}
aside ul.more li {margin-top:0px;}

aside p {
	font-size: 65%;
    margin-top: 36px;
	line-height:115%;
	width: 75%;
	}

section p{ margin: 2% 2% 2% 0;}

img { margin: 0 auto; 
-webkit-box-shadow:1px 1px 3px rgba(91, 91, 91, 0.4);
box-shadow:1px 1px 3px rgba(91, 91, 91, 0.4);  
}


#design {margin:15px auto; position:relative; text-align:center;}
#design figure {margin:35px auto; display:inline-block;}
#design figcaption, #contact-pg figcaption, #portfolio figcaption {font-size:80%; text-align:left; padding:5px; width:390px; margin:0 auto;}
#portfolio figcaption {width:auto;}

#contact-pg figure { float:left; margin-right:36px;}
#contact-pg figcaption {width:224px;}
#contact-pg p {padding-top:6px;}

#contact-pg address {font-style:normal; margin-top:36px;}
span.name {color:#4b5362;}

/* #link-pg figure {float:right; margin-left:52px; width:324px;}*/
#link-pg figcaption {font-size:75%; padding:5px;}
#link-pg figure img {padding:10px; border: solid grey thin;}

#link-pg h4 {font-weight:bold; color:#4b5263; font-size:120%; margin-top:12px;}
#link-pg p {font-size:95%; margin-bottom:0;}

#resume figure{ float:right; left-right:52px; margin-top:24px;}
#resume figcaption{font-size:80%; text-align:left; padding:5px;}

#resume ul {margin-left: 45px; margin-bottom:1.5%; font-size:95%;}
#resume h4 { font-size: 100%; font-weight:600; margin-bottom:6px; margin-top:3%;  color:#4b5263;}

/*#resume ul {font-size: 95%; text-align:left; padding-top:18px; color:#4b5263; } */
#resume h5 {font-size:85%; display:inline; float:left; }

#resume ul li {margin-bottom:3px; font-size:85%}
#resume ul.extra {margin-left: 0;}




ul.links-list {font-size:85%;}
ul.links-list li {width: 145px; display:inline-block; padding:4px 12px 2px 2px;}
p.links-list {font-size:85%; text-align:justify; margin-top:6px; width:360px;}
div.links-list {margin-top:24px;}

ul.number-nav, ul.number-nav-more {font-size:75%; margin-top:0; float:left;}
ul.number-nav li, ul.number-nav-more li {display:inline-block; margin-right:10px;}
ul.number-nav-more {margin-left:96px;} /*was 36px; 96px should line up with figure above */

ul.number-nav li a:link {font-weight:400;}
ul.number-nav li {font-weight:600; color:#4b5263;}



/*
img { margin: 0 auto; 
-webkit-box-shadow:1px 1px 3px rgba(91, 91, 91, 0.4);
box-shadow:1px 1px 3px rgba(91, 91, 91, 0.4);  
}

*/






nav { }



/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@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;
    }