/*style sheet for menu-main, menu-category, homepage, global styles*/

@font-face {
    font-family: Quicksand;
    src: url('fonts/quicksand/quicksand-regular.otf');
}
@font-face {
    font-family: QuicksandItalic;
    src: url('fonts/quicksand/quicksand-italic.otf');
}
@font-face {
    font-family: QuicksandBold;
    src: url('fonts/quicksand/quicksand-bold.otf');
}
@font-face {
    font-family: QuicksandLight;
    src: url('fonts/quicksand/quicksand-light.otf');
}

@font-face {
    font-family: Sofia;
    src: url('fonts/sofia/SofiaProLight-webfont.eot');
    src: url('fonts/sofia/SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sofia/SofiaProLight-webfont.woff2') format('woff2'),
         url('fonts/sofia/SofiaProLight-webfont.woff') format('woff'),
         url('fonts/sofia/SofiaProLight-webfont.ttf') format('truetype'),
         url('fonts/sofia/SofiaProLight-webfont.svg#sofia_prolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

   
/*CSS Reset*/
html header head body section footer div nav h1 h2 h3 img p a ul li {
margin: 0;
padding: 0;
}

/*global styles*/
body {
background-color: #f8f8f8;
/*background-color: #fbf9f4;*/
position: relative;
}
#container-main {
background-color: none;
margin: 32px auto 0px;
padding: 0px;
position: relative;
height: 800px;
width: 1168px;
}
#buffer {
height: 64px;
background-color: none;
}
#wrapper {
background-color: none;
clear: both;
}
p {
color: #6d6767;
font-family: Quicksand, Arial, Helvetica, sans-serif;
font-size: 16px;
}
#left {
background-color: none;
float: left;
margin-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0;
position: relative;
}
#right {
background-color: none;
float: right;
margin-bottom: 16px;
margin-right: 242px;
width: 704px;
height: 704px;
}
#artwork {
background-color: none;
float: right;
margin-bottom: 16px;
margin-top: 32px;
width: 944px;
height: 704px;
}
#middle {
background-color: none;
float: right;
width: 944px;
height: 240px;
}
/* text boxes in bio, bibliography, about and contact pages */
.heading {
color: #6d6767;
font-family: QuicksandBold;
font-size: 14.5px;
line-height: 19px;
}
#text {
background-color: none;
float: right;
margin-right: 232px;
width: 680px;
height: 704px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 24px;
}
#textNoScroll {
background-color: none;
float: right;
margin-right: 232px;
width: 704px;
height: 704px;
overflow: hidden;
}
#text p, #textNoScroll p {
font-size: 14px;
line-height: 22px;
}
#textArtwork {
background-color: none;
float: right;
width: 944px;
height: 64px;
}
#textArtwork p {
font-size: 13px;
line-height: 22px;
}
#left p:first-child, #text p:first-child, #textNoScroll p:first-child {
padding-top: 0px;
margin-top: 0px;
}
#text192 {
height: 192px;
width: auto;
}
#text192 p {
text-align: center;
}
/* header styling */
header {
background: none;
float: left;
padding-left: 0px;
position: relative;
top: -30px;
width: 464px;
}
h1 {
color: #d61212;
font-family: QuicksandLight, Futura, Arial, Helvetica, sans-serif;
font-size: 34px;
text-align: left;
text-transform: uppercase;
}
header a {
text-decoration: none;
}

/*global link styles*/
a {
color: #8d8787;
font-family: Quicksand, Arial, Helvetica, sans-serif;
}
a:focus {
outline: thin solid white;
}
a:hover, a:active {
color: #6d6767;
outline: 0;
}
a img {
border: none;
}
#text a, #textNoScroll a, #textArtwork a {
color: #274b96;
font-family: Quicksand, Arial, Helvetica, sans-serif;
}
#text a:hover {
color: #274b96;
font-family: QuicksandBold;
}
/*navigation: menu*/
nav {
float: right;
padding-bottom: 0px;
position: relative;
text-align: center;
}
ul.menu-main {
list-style: none;
margin: 0;
padding: 0;
}
ul.menu-main li {
display: inline;
}
ul.menu-main li a {
background: none;
border-top: 1px dotted #8d8787;
border-bottom: 1px dotted #8d8787;
display: inline-block;
font-family: Quicksand, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 32px;
margin: 0 4px 0 4px;
padding: 0 20px 0 20px;
text-decoration: none;
}

ul.menu-main li a.current {
font-family: QuicksandBold;

/* removed in version2 of site
border-top: 1px solid #6d6767;
border-bottom: 1px solid #6d6767;
*/

color: #6d6767;
}


ul.menu-main li a:hover {
border-top: 1px solid #6d6767;
border-bottom: 1px solid #6d6767;
color: #6d6767;
}
ul.menu-main li a:active {
text-decoration: none;
color: #6d6767;
}
ul.menu-main li:last-child a {
margin-right: none;
}

/*navigation: menu-category*/
ul.menu-category {
list-style: none;
margin: 420px 0 0 0;
padding: 0;
}
ul.menu-category li {
clear: left;
margin: 4px 0 4px 0px;
text-align: right;
background-color: none;
-webkit-transition: background-color .5s ease;
-moz-transition: background-color .5s ease;
-o-transition: background-color .5s ease;
transition: background-color .5s ease;
}
ul.menu-category li:first-child {
margin: 0 0 0px 0;
}
ul.menu-category li a {
display: inline-block;
font-size: 14.5px;
line-height: 16px;
padding: 0px 0px 0 0px;
text-decoration: none;
}
ul.menu-category li a:hover {
color: #8d8787;
font-family: QuicksandBold;
}
/*ul.menu-category li.current {
background-color: #f0e9e9;
}
*/
ul.menu-category a.current-link {
color: #6d6767;
font-family: QuicksandBold;
}

/* this class applied to home, knots and works on paper */
.line {
border-top: 1px solid #c7bebe; 
padding-top: 4px;
width: 160px;
}


/*navigation: menu-subcategory*/
ul.menu-subcategory {
margin: 0;
padding: 0;
background-color: none;
float: right;
list-style: none;
padding-bottom: 4px;
width: 176px;
}
ul.menu-subcategory li, ul.menu-subcategory li:first-child {
background-color: none;
margin: 4px 0 4px 16px;
text-align: left;
}
ul.menu-subcategory li a {
font-size: 13.5px;
line-height: 19px;
}
/*footer*/
footer {
background: none;
padding-top: 48px;
padding-bottom: 8px;
}
footer p {
font-size: 12px;
text-align: center;
text-transform: none;
}

/*
footer p:after {
	content: "\00a9  2014 Copyright | HELEN  MIRANDA WILSON | All Rights Reserved ";
}
*/
/*clearfix*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/*for IE 6/7 (trigger hasLayout)*/
.clearfix {
zoom: 1;
}

/* styling of images on artwork.html */
.square {
background-color: none;
position: relative;
display: inline-block;
margin-bottom: 16px;
height: 224px;
width: 224px;
}
.rectangle {
background-color: none;
position: relative;
display: inline-block;
margin-bottom: 16px;
height: 224px;
width: 176px;
}

.square img {
height: 224px;
width: 224px;
}
.rectangle img {
height: 224px;
width: 176px;
}

.left {
float: left;
margin-right: 16px;
}
.right {
margin-right: 0;
}

.popup {
position: absolute;
top: 0;
line-height: 224px;
opacity: 0;
margin: -16px 0 0 0;
text-align: center;
width: 224px;
height: 224px;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}

.popup-176wide {
position: absolute;
top: 0;
line-height: 224px;
opacity: 0;
margin: -16px 0 0 0;
text-align: center;
width: 176px;
height: 224px;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
.popup p, .popup-176wide p {
background-color: white;
color: #333;
}
.popup:hover, .popup-176wide:hover {
opacity: .8;
}
.square a, #studio a, #calendar a, #wiggly a {
text-decoration: none !Important;
}

/* media queries */
@media only screen and (min-width: 1200px) {
html {zoom: 100%;}
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
html {zoom: 90%;}
}
@media only screen and (min-width: 1040px) and (max-width: 1099px) {
html {zoom: 85%;}
}
@media only screen and (max-width: 1039px) {
html {zoom: 80%;}
}

/* background goes white with these and html shifts down and right! TO FIX 
@media only screen and (min-width: 1200px) {
html {
	webkit-transform: scale(1,1);
	moz-transform: scale(1,1);
	o-transform: scale(1,1);
	transform: scale(1,1);
	}
}
@media only screen and (min-width: 1100px) and (max-width: 1199px) {
html {
	webkit-transform: scale(.9,.9);
	moz-transform: scale(.9,.9);
	o-transform: scale(.9,.9);
	transform: scale(.9,.9);
	}
}
@media only screen and (min-width: 1040px) and (max-width: 1099px) {
html {
	webkit-transform: scale(.85,.85);
	moz-transform: scale(.85,.85);
	o-transform: scale(.85,.85);
	transform: scale(.85,.85);
	}
}
@media only screen and (max-width: 1039px) {
html {
	webkit-transform: scale(.8,.8);
	moz-transform: scale(.8,.8);
	o-transform: scale(.8,.8);
	transform: scale(.8,.8);
	}
}
*/

/*
@media only screen and (min-height: 840px) {
html {zoom: 100%;}
}
@media only screen and (min-height: 720px) and (max-height: 839px) {
html {zoom: 90%;}
}
@media only screen and (max-height: 719px) {
html {zoom: 80%;}
}