@charset "UTF-8";
/* CSS Document */

body {
margin: 0px;
padding: 0px;
background-color: #ECECEC;
width: 100%;
height: 100%;
}
p {font-size: 14px;}
a:link {text-decoration: none; color: #800;}
a:visited {text-decoration: underline; color: #600;}
a:hover {text-decoration: underline; color: #900;}
a:active {text-decoration: none; list-style-position: outside; margin-top: 0px; margin-bottom: 0px;}

a[data-tooltip]:link, a[data-tooltip]:visited {
position: relative;
text-decoration: none;
width:100%;
}
a[data-tooltip]:before {
content: "";
position: absolute;
border-top: 16px solid #111;
border-left: 16px solid transparent; /* left box arrow transparent*/
border-right: 15px solid transparent; /* right box arrow transparent*/
visibility: hidden;
top: -20px; /* arrow pos */
left: 0px; 
}

a[data-tooltip]:after {
content: attr(data-tooltip);
font-size: 14px;
width: 90px;
position: absolute;
border-style:solid;
border-width:medium;
border-color:#999;
color: #fff;
bottom: 31px; /* position of box*/
left: 0px; /* position of box*/
background: #111;
padding: 2px 3px; /* 5px 10px; */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
visibility: hidden;
-moz-box-shadow:4px 4px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:4px 4px 2px rgba(0,0,0,0.4);
-o-box-shadow:4px 4px 2px rgba(0,0,0,0.4);
box-shadow:4px 4px 2px rgba(0,0,0,0.4);
}
a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
-moz-transition: visibility 0s linear .3s;
-webkit-transition: visibility 0s linear .3s;
-ms-transition: visibility 0s linear .3s;
-o-transition: visibility 0s linear .3s;
transition: visibility 0s linear .3s;
visibility: visible;
}
h1 {
font-family: times, sans-serif;
font-weight: 400;
font-size: large;
/*font-variant: small-caps; */
letter-spacing: .1ex;
border-top: 4px double #000;
border-bottom: 2px solid #000;
border-color: #999;
padding: 4px 10px;
margin-left: 0;
margin-top: 8px;
margin-bottom: 8px;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h2 {font-size: medium; padding: 0 .5ex; margin-left: -.5ex;
font-family: times, sans-serif;
font-weight: 400;
}
h3 {font-size: 14px; padding: 0 .5ex; margin-left: -.5ex;
font-family: times, sans-serif;
font-weight: 400;
}
figure {text-align: center;}
figcaption {font-style: italic; padding-top: 2px;}
hr { height: 12px; border: 0; box-shadow: inset 0 12px 12px -12px rgba(0,0,0,0.5); width: 70%;}

.drop-shadow {
position:relative;
float:left;
width:100%;
padding: 0px 5px 0px 5px;
margin: 9px 0px 30px;
background:#ffffff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.drop-shadow:after, .raised:after{
content: "";
display: table;
clear: both;
}
/* Raised shadow - no pseudo-elements needed */
.raised {
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.red8pt {color: #FF0000;font-weight: bold;}
.content {padding-top: 5px; padding-bottom: 14px;}
table.center {margin-left: auto;margin-right: auto;}

blockquote{background:#dbdbdb;border-left:1em solid #fff;margin:1.5em 1em;padding:.5em 1em;quotes:"\201C""\201D";
-moz-box-shadow:    3px 3px 3px 0px #bbb;
-webkit-box-shadow: 3px 3px 3px 0px #bbb;
box-shadow:         3px 3px 3px 0px #bbb;
}
blockquote:before{color:#808080;content:open-quote;font-size:3em;line-height:.1em;margin-right:.25em;vertical-align:-.4em;
}
blockquote :first-child{display:inline;}
blockquote :last-child{margin-bottom:0;}
#page-slide {
z-index:9;
background-color: #ECECEC;
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-moz-box-shadow: 0 0 15px #000;
-webkit-box-shadow: 0 0 15px #000;
box-shadow: 0 0 15px #000;
}

/* #pnav {margin-left: auto;margin-right: auto; width: 95%;} */
#pnav-links {font-size: 16px; padding: 10px;line-height:85%;padding-bottom:8px;}
#navig {height:80px;}
#news-typography {font-style: italic;}
#home-copyright {font-size: 9px;font-style: italic;}
#main-image {font-size: 14px; padding-top: 10px; position: relative; margin-bottom:10px;}
#main-image-addedinfo {
background-color: #FFF;
background: rgba(255,255,255,0.6);
width: 104px;
position: absolute;
bottom: 58px;
right: 10px;
padding: 4px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-align: center;
font-size: 10px;
}
#mid-footer {
font-size: 9px;
font-style: italic;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
}
#portfolio {text-align: center;}
#port-image {
position: relative;
padding-bottom: 8px;
max-width: 100%;
height: auto;
}
/* moving arrows addition */
#port-image{position:relative;margin: 0px auto; max-width:700px;}
#port-image.vert{max-width:410px;}

#arrows-caption {
text-align: center;
padding-bottom: 15px;
margin:auto;
}
#tn-nav {text-align: center;padding-bottom: 5px;}
#tn-nav a img {
opacity: 0.5;
filter: alpha(opacity=50);
zoom: 1;
margin-top: 2px;
margin-right: 1px;
margin-bottom: 2px;
margin-left: 1px;
border: solid 2px #000;
-webkit-transition: all .5s ease-out 0s;
-moz-transition: all .5s ease-out 0s;
-ms-transition: all .5s ease-out 0s;
-o-transition: all .5s ease-out 0s;
transition: all .5s ease-out 0s;
}
#tn-nav a img:hover {
opacity: 1;
filter: alpha(opacity=100);
zoom: 1;
border: solid 2px #FFF;
}
#footer {
z-index: 0;
font-size:10px;
padding-top: 4px;
}
#footer ul {
margin: 0px;
padding: 8px 8px 10px 8px;
list-style-type: none;
text-align: center;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background: -moz-linear-gradient(top, #cccccc 60%, #eeeeee 90%);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#eee));
}
#footer ul li {display: inline;}

/*----------------------------------------------*/
/* dd menu adjusting Layout */
.page {position: relative;}
.page nav {position: absolute;top: 10px;right: 60px;}
#pdn-award {position: absolute;top: 0px;right: 0px;}


/* Small Screen Rules */
 @media screen and (max-width: 639px) {
.page {margin: 0px;padding: 0px;}
.page nav {position: inherit;right: 0px;}
#pdn-award {top: 60px;right: 40px;}
#pdn-award img { max-width: 50%; height: auto; }
/*#pdn-award {position: inherit;right: 65px;} */
#menu ul li.port-menu-height a:hover {height: 18px;}
#menu ul li.port-menu-normheight a:hover {height: 18px;}
#main-image-addedinfo {bottom: 68px;}
}
@media screen and (min-width: 640px) and (max-width: 814px) {
.page {margin: 0px;padding: 0px;}
.page nav {top: 10px;right: 15px;}
#pdn-award {top: 60px;right: 40px;}
#pdn-award img { max-width: 75%; height: auto; }
#menu ul li.port-menu-height a:hover {height: 70px;}
#menu ul li.port-menu-normheight a:hover {height: 12px;}
}
@media screen and (min-width: 815px) and (max-width: 869px) {
.page {margin: 0px;padding: 0px;}
.page nav {top: 10px;left: 418px;}
#pdn-award {top: 70px;right: 65px;}
#menu ul li.port-menu-height a:hover {height: 70px;}
#menu ul li.port-menu-normheight a:hover {height: 12px;}
}
@media screen and (min-width: 870px) and (max-width: 1154px) {
.page {margin: 0px;padding: 0px;}
.page nav {top: 10px;right: 65px;}
#pdn-award {top: 70px;right: 65px;}
#menu ul li.port-menu-height a:hover {height: 70px;}
#menu ul li.port-menu-normheight a:hover {height: 12px;}
}

/* Large Screen Rules */
@media screen and (min-width: 1155px) and (max-width: 10000px) {
.page {margin: 0px;padding: 0px;}
.page nav {top: 10px;left: 700px;}
#pdn-award {top: 70px;right: 65px;}
#menu ul li.port-menu-height a:hover {height: 70px;}
#menu ul li.port-menu-normheight a:hover {height: 12px;}
#main-image-addedinfo {left: 585px;}
}

/*---------------------------------*/
/* Mobile Layout: 480px and below. */
#header {
/*background-image:url('/images/banner2-web.jpg'); */
font-family: times, sans-serif;
font-weight: 400;
font-size:36px;
padding-top: 5px;
text-align: center;vertical-align:middle;
color:#000000;
background-repeat:no-repeat;
/*background-color:#333; */
background-position:center;
height:45px;
z-index: 9;
}
#header a{text-decoration:none;display:block;color:#000000;}
#back-img{top:50px;}
#navig {display:block;} /* was none */
#page-slide{margin-top:50px;} /* tryit was 50px */
#pnav {display: block;}
#news {font-size: 14px;padding-top: 0px;}
#mid-footer {display: none;}
#port-image {padding-top: 10px;} 
#port-image.vert img{height:auto; width:90%;}
#arrows-caption {width: 80%;}
#article-right {display: none;}
#article-lower {display: none;}
#bnav {height: 65px;}
/* port nav arrows at bottom */
#l-arr {position:absolute;bottom:-20px;left:25px;width:25px;}
#r-arr {position:absolute;bottom:-20px;right:25px;width:25px;}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
#header {
/* background-image:url('/images/banner2-lg.jpg'); */
font-family: times, sans-serif;
font-weight: 400;
font-size:36px;
padding-top: 5px;
text-align: center;vertical-align:middle;
color:#000000;

-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
background-repeat:no-repeat;
/*
background-color:#333;
*/
width:255px;
height:45px;
z-index: 9;
}
#header a{
/*width:210px;height:65px; */
display:block;
color:#000000;
text-decoration: none;
}
#back-img{top:0px;}
#navig {display:block;}
#page-slide{margin-top:-30px;} /* tryit was -25px */
#pnav {display: block;}
#main-image {display: block;}
#news {font-size: 14px;padding-top: 0px;}
#mid-footer {display: block;}
#port-image {padding-top: 10px;} 
#port-image.vert img{height:auto; width:auto;} 
#arrows-caption {width: 70%;}
#article-right {display: block;
/* seems to help for tablet display setting margin left*/
margin-left:0;}
#article-lower {display: none;}
#bnav {height: 65px;}
}

/* Desktop Layout: 769px to 1232px.  Inherits styles from: Mobile and Tablet */
@media only screen and (min-width: 769px) {
#header {
/*background-image:url('/images/banner2-lg.jpg'); */
font-family: times, sans-serif;
font-weight: 400;
font-size:36px;
padding-top: 5px;
text-align: center;vertical-align:middle;
color:#000000;
background-repeat:no-repeat;
/* background-color:#333; */
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
width:260px;
height:45px;
z-index: 9;
}
#header a{
/*width:210px;height:65px;
*/
display:block;
color:#000000;
text-decoration:none;
}
#back-img{top:0px;}
#navig {display:block;}
#page-slide{margin-top:30px;}
#pnav {display: none;height: 0px;border: none;}
#main-image {display: block;}
#news {font-size: 10px;padding-top: 30px;}
#mid-footer {display: block;}
#port-image.vert img{height:auto; width:auto;}
#arrows-caption {width: 50%;}
#article-right {margin-left: 1.0989%;}
#article-lower {display: block;}
#bnav {height: 0px;}
/* port nav arrows at top */
#l-arr {position:absolute;top:250px;bottom:0;left:-35px;width:25px;}
#r-arr {position:absolute;top:250px;bottom:0;right:-35px;width:25px;}
}
@media screen and (min-width: 1450px) and (max-width: 10000px) {
#page-slide{margin-top: 240px;}
/* port nav arrows at top */
#l-arr {position:absolute;top:250px;bottom:0;left:-35px;width:25px;}
#r-arr {position:absolute;top:250px;bottom:0;right:-35px;width:25px;}
}

/* Print styles.  Also see boilerplate.css for add'l definitions*/
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adj for high resolution devices */
}
@media print {
#header:before {
background-color: #fff;
position:absolute;
top: 20px;
height: 24px;
display: block;
content: "Andrea Wolff's book Nymphaea - Fine Art Photography";
margin-bottom: 5px;
border: 1px solid #bbb;
padding: 3px 5px;
font-size: 20px;
font-style: italic;
}
#bnav {display:none;}
.drop-shadow, .raised {
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#main-image {display: block;}
#header a {display: none;}
#l-arr, #r-arr {display:none;}
p {font-size: 12px;}
p a {word-wrap: break-word;}
figcaption {font-size: 12px;}
#tn-nav a:after, #arrows-caption a:after, #footer a:after {content: ""; display:none;}
}