/*
catalog.css 01/24/14 Thu 23 Aug 2012 02:08:53 PM CDT
gene @ wedu dot biz
used by: sanangelo.html
*/
/*body {width: 320px;}*/
img {max-width: 100%}

#docwrap {
    /*float: left;
            margin: 40px auto;		padding: 0 1em;
    max-width: 61.75em;		 988px / 16px = 61.75em */
    position: relative;
    width: 100%;
}

#coverpg,
#titlepg {
    text-align: center;
}
.coverpgbgrd {
    background-image: url("./img2013w/dscn0706.jpg");
    background-repeat: no-repeat;/* #0e27a9; */
    background-position: center center;
    background-size: auto 100%;/*auto 900px; */
    margin: 0 auto;/* margin & max-width & text-align above to center */
    width: auto;/* 320px;force bgrdimg with width & height 1024px;*/
    height: 910px;/* 426px; auto; height: 880px;opacity: 0.30;*/
    max-width: 1024px;
}
#titlepg {
    color: #0E27A9;/*Dark blue, Light blue #55A0F3;*/
    font-weight: bold;
    margin: 0 auto;
    position: relative;
}
#forewordpg {
    line-height: 150%;
    margin: 1em 0;
    position: relative;
    width: 100%;
}/* float: left; float: right;	width: 85.425%;		844px / 988px = 0.85425 */

#backpg {width: 100%; margin: 25% 0;}

#footer {
    margin: 3em auto;
    position: relative;
    width: 100%;
}

#bgrdwrapper {
    height: 2px;
}	/* Parent div for titlepgbgrd that allows an opacity on background-image,
    but does not affect the other divs in #titlepg. These div float up to
    the this div with the background-image size controlled by width: and
    height. The links (not working) are covered by the background. */
.titlepgbgrd {
    /* Dimensions 1188 × 1588 1188÷951 	 File size 693.95KB
    background-image: url("./img2013w/collage.jpg"); */
    background-image: url('./img2013w/dscn7199.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    margin: 0 auto;
    opacity: 0.20;/* 0.0 - 1.0 */
    filter: alpha(opacity=40);/*  0 - 100 For IE8 and earlier*/
    width: auto;
    height: 954px;/*100%; 80em; max-width: 48em;*/
    max-width: 1024px;
    z-index: 6;
}	/* opacity: 0.20; 0.0 - 1.0
        background: shorthand order
    background-color    background-image    background-repeat
    background-attachment    background-position
    background-attachment: fixed;
    background-size: 800px auto;  CSS3
    background-origin: content-box;
    -webkit-background-origin: content-box;  Safari
    margin: 0 2%; padding: 4px; position: absolute;	top: 0; */
.header {
    /*color: rgba(14,39,169,1.0);
    float: left;	width: 100%;*/
    font-weight: 900;
    margin: 2px;
    text-align: center;
}
.title {
    text-align: center;
}/*width: 100%;*/

.about {
    text-align: center;
    /*width: 100%;*/
    z-index: 7;
}

#contents {
    /*float: left;*/
    margin: 1em 0;
    position: relative;
    width: 100%;
}

.caption {
    clear: both;
    font-family: Georgia;
    font-size: 0.625em;
}
.align-center {
    text-align: center;
}

.container {
    margin: 0 auto;
    max-width: 360px;
    text-align: center;
}
/* margin centers content placed in .container */

h1.hidden {
    /* hides an element, but it will still take up the same space as before.*/
    visibility:hidden;}
.none {
    /* hides an element, and it will not take up any space.*/
    display:none;
}
.entry {
    float: left;
    width: 100%;
}
.entry h1 {
    margin: 1em 0 0.4em 1em;
}
.entry h2 {
    /* float: right;*/
    margin: 1em 1em 0.40em 2em;
    /* width: 85.425%;		844px / 988px = 0.85425 */
}
.entry .content {
    float: right;
    margin: 0 4px;
    /* width: 85.425%;		 844px / 988px = 0.85425 */
}
/*.entry .content img {
    min-width: 99.8%;
    height: auto;
}*/
.entry .content ul {
    margin-top: 2px
}
.entry .content h2 {
    float: left;
}
.entry .info {
    float: left;
    margin-top: 0.72727em;	/* 8px / 11px = 0.72727em */
    width: 12.551%;		/* 124px / 988px = .12551 */
    min-width: 4em; /* 72 / 988 7.287%*/
}
.entry .main {
    float: left;
    width: 82.938%;	/* 700px / 844px = 0.82938 */
}
.entry .meta {
    float: right;
    width: 14.692%;	/* 124px / 844px = 0.14692 */
    min-width: 6em;
}
.entry .sig {float: right; font-family: cursive,
    'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif;
}
/*comic sans ms verdana;garuda; scripts;
Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif;
"DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;*/

/*div p:first-child {font-weight: bold;}  applied to first p */
div > p:first-child {text-indent: 2em;}

.entry p::first-letter {font-size: 150%;}
.entry ol p::first-letter {font-size: 100%;}/* #listof remove 150% */

q {
    font-size: 1em;
    font-weight: bold;
}
/* p q::first-letter {font-size: 150%} NOT working */

.frame0 {
    float: right;
    top: 720px;
}

#frame1 {
    float: right; width: 0.97in; height: 6.05in; border: none; padding: 0in;
    background: #808019
}

.frame-contents {
    color: #000080;
    font-size: 54pt;
    /*	bottom: 1em;	left: 200px;*/
    /* right: 10%;	width: auto;	height: 1.2em;*/
    -moz-transform: rotate(-37deg);
    -ms-transform: rotate(-37deg);
    -webkit-transform: rotate(-37deg);
    transform: rotate(-37deg);
}

.mymeta {
    float: none;
    height: 18em;
    margin: 0 0 0 0;
    width: 100%;
}
.no-deco { text-decoration: none; }

.sig {
    float: right;
    font-weight: bold;
}
.textleft {text-align: left;}
.textcenter {text-align: center;}

.tile {
    border: 1px solid #E5E5E5;
    box-shadow: 0 2px 8px #323232;/*#E6E6FA;*/
    -moz-box-shadow: 0 2px 8px #323232;/* */
    -webkit-box-shadow: 0 2px 8px #323232;/* */
    margin: 4px;
    padding: 4px;
    /*width: 90.8%;	height: auto;*/
}

h1.transf {/* Place this inside div.vtc */
    color: #0E27A9;/*Dark blue
    color: #4D4D4D;	float: left;	float: right;*/
    font-size: 3.2em;
    font-weight: bold;
    letter-spacing: 0.4em;
    margin: 0;
    width:700px;
/*	position: absolute;
    top: 350px;
    right: auto;
    left: 0px;
    z-index: 3;*/
}
.transf {
    transform: rotate(-90deg);/*  scale(0.95) skew(-10deg,20deg)*/
    /* -moz-transform: rotate(-37deg) scale(0.75) translate(-46%, -400%); */
    -ms-transform: rotate(-90deg);/* rotate(-47deg) scale(0.75) skew(-10deg,20deg);*/
    -o-transform: rotate(-90deg);/* rotate(-47deg) scale(0.75) skew(-10deg,20deg);*/
    -webkit-transform: rotate(-90deg);/* scale(1.25); skew(-10deg,20deg);*/
    /*transform-origin: 100px -160px;  right 200px */
}
.vtc {
    position: absolute;
    top: 400px;
    right: 31em;
    width: 1.0em;
}/* height: auto; left: -4.2em; margin: 0 auto;center */

.width20 { width: 20%; min-width: 17em;}
/*.width32 { width: 32%; min-width: 17em;}*/
.width50 { width: 46%; min-width: 17em;}
.width40e { max-width: 40em; }

.western {
    font-family: Vendana;
}
.western44 {
    font-family: Vendana;
    font-size: 2.75em;/* 44pt; */
}
.western32 {
    font-family: Vendana;
    font-size: 2.5em;/* 32pt; */
}

/* From cards.css */
.b8tile {
    margin: 10px;
    padding: 8px;
    /* -moz-box-shadow: 0 2px 8px #323232; */
    /* -webkit-box-shadow: 0 2px 8px #323232; */
    box-shadow: 0 2px 8px #323232;/*#E6E6FA;*/
    width: 90.8%;
    height: auto;
}
.cards {
    display: inline;/*block;*/
    /*float: left; 	margin-left: 1%;	margin-right: 1%;	width: 98%;*/
}
.cards ul {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
.cards li {
    /*background-color: #1a1a1a; #4D4D4D; #E6E6FA; */
    border: 1px solid #E5E5E5;/*lite gray;*/
    display: inline-block;/* display: inline; */
    margin: 10px;
    padding: 8px;
    /* -moz-box-shadow: 0 2px 8px #323232; */
    /* -webkit-box-shadow: 0 2px 8px #323232; */
    box-shadow: 0 2px 8px #323232;/*#E6E6FA;*/
    text-align: center;
    vertical-align: top;
}
.cards img {
    border: 0;
    max-width: 1024px;
    /* border: 1px solid #000;1em groove black;*/
    /*background-color: black; */
    /*  float: right; */
    width: 100%;
    height: auto;
}
.cards img:hover {
    /*border: 4px solid red;*/
    opacity: 0.20;/* 0.0 - 1.0 */
    filter: alpha(opacity=40); /* 0 - 100 For IE8 and earlier */
}
.centered {
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;
}

/* From base.css */
.bhmenu {	/* bottom horizontal box menu for a list */
    /* background-color: green; text-decoration: none; */
    border: 0;
    clear: left;
    font-family: arial, helvetica, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.bhmenu ul {
    border: 0;
    list-style-type: none;	/* we don't want to view the list as a list */
    line-height: 1.5em;	/*	 globally SET the menu's item spacing. */
    /* Note:  line-height must be 1.0 or 1.5 or 2.0 for Mozilla */
    margin: 1px;/*	margin-left: 0; margin-top: 1px; margin-bottom: 0; */
    padding: 8px;/*  0; */
    text-align: center; /* SET to center, left, or right to align as desired*/
}
.bhmenu li {
    display: inline;	/* side-by-side 	margin: 18px 6px;	*/
    display: inline-block;	/* keep from breakup, maintain spacing */
    float: none;/* left; */
    height: 24px;
    margin: 0;
    padding: 8px;
}
.bhmenu a {
    /*border: solid 1px #ffffff;*/
    color: #ffffff;
    /*display: block;*/
    /*margin: 0 4px 6px 4px;*/
    padding: 4px;
    text-decoration: none;
}
.bhmenu a:link,
.bhmenu a:visited {
    color: #ffffff;
}
.bhmenu a:hover {
    background-color: green;	/* #A020F0; */
    color: #ffffff;
    /*border-top-width: 2px;	border-top-color: #ffffff;	border-bottom-color: #00FF00;*/
    /* Stop movement by keeping top padding and border equal to a: */
    padding-bottom: 2px;/*	 Decrease from 4px for a pushup affect. */
    padding-top: 4px;/* Decrease top pad to match border increase. */
}
.bhmenu a:active {
    color: #ffffff;
}	/* end bottom horizontal box menu */

#img003 {width: 99.9%; height: auto;}
#img101 {width: auto; height: auto;}
#img102 {width: 68%; height: auto; max-width: 1024px}
#img201 {float: right; width: 96.0%; max-width: 480px; height: auto;}
#img202 {width:94%; height: auto;}
#img301 {width:99.9%; height: auto;}
#img302 {float: right; height: auto; /*  width: 47.0%; max-width: 167px;*/}
#img303 {width:70%; height: auto;}
#img10 {width: 94%; height: auto; max-width: 720px;}
/*#img52 {margin: 25% 0;}*/


@media screen and (min-width: 990px) {/*1200px Screen >= 648px = 40.5em*/
    .cards img { max-width: 960px; }
    .coverpgbgrd {
    /* 	width: 1024px; auto height will not work: 880px;;opacity: 0.30;*/
        /*max-width: auto;1024px;*/
        height:	1408px;
    }
    .entry .content {
        width: 85.425%;/* 844px / 988px = 0.85425 */
    }
    .entry .content p {
        max-width: 40em;
    }
    /*.tile {
        width: 90.8%;	height: auto;
    }*/
    /*.titlepgbgrd {
        background-size: 800px 900px; CSS3
        width: 50em;
        height: 70em;
    } */
    .vtc {left: 36%;}
    /*#img201 { float: right; }max-width: 200px; height: auto; padding: 0 0 0 6px;*/
    /*#img202 {  float: right; } max-width: 167px; height: auto;*/
}

/* hide blank pages only for printing */
.pg-br-hide {display: none;}

/*
 Working on FireFox 27.0; NOT working on Chromium 32.0;
Note: Cannot use page-break on an empty <div> or on absolutely positioned elements.
Need a breakafter at the end of many printed pages when there are no page-breaks.
left 	Insert page breaks before the element so that the next page is formatted as a left page
right 	Insert page breaks before the element so that the next page is formatted as a right page
p {page-break-inside: avoid;}  	Avoid page break inside the element (if possible)

 Suppress our whole menu when not an interactive mode and more.
 
 Must check Print Backgound colors and images in Options. 90%
*/

@media print {
    .breakbefore {page-break-before: always;}
    .breakafter {page-break-after: always;}
    p {page-break-inside: avoid;}
    .pg-br-hide {display: block;}
    .coverpgbgrd {
        width: auto;
        height: 910px;	/* 980 fills page & creates following blank page */
        max-width: 1024px;
    }
    .entry {float: none;}
    .entry img {max-height: 910px;}/* max-width: 500px; height: auto; */
    .nav {display: none;}
    .noprint {display: none;}
    .vtc {left: 40%;}
    .width50 {width: 55%}
    /* Flowers #img10 - #img17
       Birds   #img21 - #img27
       Glass   #img30 - #img41
       #10, #30, #41 are single page */
    #img11, #img12, #img13, #img14, #img15, #img16, #img17,
    #img21, #img22, #img23, #img24, #img25, #img26, #img27,
    #img31, #img32, #img33, #img34, #img35, #img36, #img37,
    #img38, #img39, #img40 {max-width: 500px;}/*560*/

    #img52, #img003 {max-height: 910px;}
}
/*	#img201 { max-width: 300px; }
#img6 { max-width: 300px; }	.entry img { max-width: 280px; height: auto; }
*/