@font-face {
	font-family: sansText;
	src: url('gothic.ttf');
   src: local('jmm'), url('gothic.ttf');
font-weight: normal;
font-style: normal;
}

html, body { color: #555; height: 100%; margin: 0 0 1px; padding: 0px; background-color: #ffffff; font-size: 1em;
             text-decoration: none; font-family: sansText, Century Gothic, Arial, Trebuchet MS, sans-serif; font-weight: normal; }
img { outline:none }
a { outline:none; text-decoration: none; color: #548fcb; }
a:hover { color: #333; } 
h1 { font-size: 1.625em; }
h2 { font-size: 1.5em; }
h3 { margin-bottom: 3px; }

body { border-top: 8px solid #6699cc; } 

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

.clear { clear: both; }
.center { margin: 0px auto; text-align: center; }
#skipNav { visibility: hidden; display: none; }

/* ********** COLORS ************************
   blue:  6699cc
   light gray:  dbdbdb

font sizes based on 16pt

30 = 1.875
28 = 1.75
26 = 1.625
24 = 1.5
20 = 1.25
19 = 1.1875
18 = 1.125
17 = 1.0625
16 = 1
15 = 0.9375
14 = 0.875
12 = 0.75

*/

/* *************  MAIN PAGE IMAGE LIST NAV  ********************* */
#mainTNcntr { display: none; margin-top: 10px; }
.wideTNcntr { margin: 0px auto; text-align: center; margin-top: 5px; }
.imgCaption { margin: 0px auto; background-color: #666360; color: #fff; width: 97%; min-height: 24px; line-height: 24px; }  


/* **************  PANEL ******************** */
#sidePanel{
    width: 300px;
    height: 100%;
    background-color: #b9b2aa;
    float: left;
    margin-left: -300px;
}
#panelContent{
    float:left;
    width: 300px;   /* was 300px */
    height:100%;
    background-color:#fff;
    display: none;
}

.pmenuTop { background-color: #8e8c8a; color: #fff; height: 40px; border-bottom: 1px solid #9f9f9f; padding-top: 20px; padding-left: 10px; cursor: pointer; }

/* color: #777  too light ...   3f3f3f and 414141  better  */
.pmenu { background-color: #fff; color: #3f3f3f; height: 100%; border-right: 1px solid #ccc; }
.pmenu a { color: #777; }
.pmenu a:hover { color: #fff; }

.pmenuItemHeader { background-color: #dbdbdb; width: 100%; min-height: 60px; border-top: 1px solid #efefef; border-bottom: 1px solid #9f9f9f; }
.pmenuItemHeader > div { padding: 8px 8px 2px 8px; display: inline-block; } 
.pmenuItemHeader > div span:nth-child(1) { font-weight: bold; padding-left: 8px; } 

.pmenuItem { background-color: #eee; width: 100%; min-height: 60px; border-top: 1px solid #efefef; border-bottom: 1px solid #9f9f9f; cursor: pointer;  }
.pmenuItem:focus a { color: #fff; }
.pmenuItem:hover { background-color: #b1aeab; color: #fff; border-top: 1px solid #696969; border-bottom: 1px solid #696969; }
.pmenuItem:hover * div { background-color: #b1aeab; color: #fff; }
.pmenuItem * img { padding: 3px; background-color: #fff; border: 1px solid #999; }
.pmenuItem > div { padding: 8px 8px 0px 8px; display: inline-block;  } 
.pmenuItem > div span:nth-child(1) { font-weight: bold; padding-left: 8px; } 
.pmenuText {  margin-left: 8px; padding: 0px 12px 12px 0px; }  /* font-size: .9em; */

/* *************  NAVIGATION  ********************* */
body#gallery a#gallery-nav,
body#about a#about-nav,
body#contact a#contact-nav,
body#exhibits a#exhibits-nav
{
   border-bottom: 2px solid #6699cc; color: #6699cc;
}

body#gallery a#alt-gallery-nav > div,
body#about a#alt-about-nav > div,
body#contact a#alt-contact-nav > div,
body#exhibits a#alt-exhibits-nav > div
{
  background-color: #817a72; color: #fff;
}


a.ghostBtn:hover { 
	color: white;
}

/* *************  ALTERNATE MENU  ***************** */
.navContAlt { display: none; position: relative; float: right; margin-top: -8px; width: 190px; height: 40px; text-align: center; 
              background-color: #6699cc; border: 1px solid #dbdbdb; border-top: 0px; z-index: 50; }
.altMenuBtn { cursor: pointer; font-weight: bold; color: #fff; height: 40px; line-height: 40px; text-align: left; margin-left: 20px; font-size: 1.5em; } /* font-size: 1.3em; */

.altMenu { display: none; color: #555; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: left; }
div.alt-menuItem { height: 40px; line-height: 40px; }

.alt-menuItem { background-color: #eee; border-top: 1px solid #ccc; min-height: 40px; }
.alt-menuItem div { padding-left: 14px; }
.alt-menuItem a { color: #555; font-size: 1.25em; }  

.altMenu > div:hover { background-color: #b1aeab; }
.altMenu > div:hover > a { color: #fff; }

.menuBtn { vertical-align: middle; margin-right: 15px; padding-bottom: 4px;  }


/* *************  MAIN PAGE  ********************* */
.mainCntr { border: 1px solid #fff; width: 100%; height: 100%; }  /*  put width: 100%; if you want the main area to stay the same size and just move off the screen */
#menuBtn { cursor: pointer; float: left; width: 60px; height: 100%; text-align: center; padding-top: 3px; border-right: 1px solid #ccc; }

.header { min-height: 40px; width: 100%; display: inline-block; background-color: #f8f8f8; color: #548fcb; box-shadow: 2px 1px 6px #9f9f9f;  }
.headerLeft { float: left;  padding: 8px 4px 0px 20px; }
.headerLeft a { color: #548fcb; }

.headerRight { float: right; }

.menuItem { padding: 3px 8px 0px 20px; } 
.menuItem a { min-width: 50px; padding-left: 4px; padding-right: 10px; line-height: 30px; color: #333; font-size: 1.125em; } 
.menuItem a:hover { color: #6699cc; }

/* MAIN Images - rotating */
.rotating-item { display: none; }
.mainImgCntr { margin: 0px auto; margin-top: 13px; position: relative; text-align: center; }
.mainImgWrapper img { padding: 15px; border: 1px solid #ccc; background-color: #efefef; box-shadow: 2px 3px 6px rgba(159,159,159,0.7); height: 70vh; width: auto; }
.mainImgCapCntr { box-shadow: 2px 3px 6px rgba(63,63,63,0.7); background-color: #efefef; min-width: 10%; position: absolute; bottom: 50px; height: 60px; line-height: 60px; padding-left: 30px; padding-right: 30px; opacity: .9; }
#mainImgCap { display: none; }
a.galPageCap { color: #555; }
a.galPageCap:hover { color: #6699cc; }
div#mainImgs:hover div#mainImgCap { display: block; }


/* ****************  FOOTER  ******************* */

.footer { margin: 0px auto; text-align: center; margin-top: 40px; background-color: #817a72; color: #fff; display: inline-block; border-top: 3px solid #625a51; width: 100%; }
.footer a { color: #fff; } 
.footer a:hover { color: black; }

.footerWrapper { margin: 0px auto; width: 95%; display: inline-block; }  

.footerNoticeCol { max-width: 45%; float: left; margin: 18px; min-width: 10%; min-height: 300px; height: auto; text-align: left; 
                   font-weight: normal; color: #fff; margin-right: 5%; }
.underlineA { text-decoration: underline; }

.footerNoticeCol h1 { font-weight: bold; text-align: left; } /* font-size: 1.5em;  */
.footerNoticeCol div { text-align: left; } 
.footerNoticeCol li { line-height: 1.7em; list-style-type: square; text-decoration: none; } 
.footerNoticeCol li a { color: #fff; text-decoration: none; }
.footerNoticeCol p {  line-height: 1.7em; }


.bottomLinks { background-color: #625a51; padding-bottom: 25px; border-top: 1px solid #555; }

.bottomLinksWrapper { color: #fff; margin: 0px auto; padding: 5px 0px 5px 0px; display: inline-block;  }
.bottomLinksWrapper ul li { float: left; line-height: 40px; padding-right: 40px; list-style: none; }

.bottomLinks div:nth-of-type(2) { float: none; clear: both; margin: 0px auto; width: 85%; } 


/* **************  OTHER PAGES  *************** */
.floatL { float: left; padding-bottom: 30px; }
.snapShot { padding: 5px; box-shadow: 2px 3px 6px rgba(159,159,159,0.7); border: 1px solid #efefef; }
.spacerR { padding-right: 25px; }

.contentCntr { width: 100%; margin: 0px auto; text-align: center; }

#sectionHeader { display: none; background-color: #6699cc; color: #fff; padding: 10px 0px; width: 100%; } /* font-size: 1.6em; */

.sectionCntr { width: 95%; padding-top: 15px; margin: 0px auto; display: inline-block; text-align: left; }
 
.sectionTitle { font-size: 1.625em; text-align: left; padding-bottom: 2px; font-weight: normal; }
.sectionText { margin-right: 20px; word-spacing: initial;  }
.sectionText p::first-line { font-size: 1.1875em; }  /*  font-size: 0.9375em; */

.subSectionText { border-top: 1px solid #999999; line-height: normal; word-spacing: normal; margin-top: 30px;  }  /* font-size: .96em; */

.sep-R { padding-right: 35px; border-right: 3px solid #ccc; }
.sep-L { margin-left: 10px; padding-left: 15px; border-left: 3px solid #ccc; }

.boxWrapper { max-width: 65%;}
.boxWrapperText { max-width: 64%; min-height: 100px; }

.specialBox {float: left;  max-width: 30%; min-height: 100px; }


/* *******************  CONTACT FORM  ********************** */
.reqText { color: #ff6633; font-size: small; text-decoration: none; text-align: left; }
.commentForm { min-width: 50%; max-width: 55%; text-decoration: none; line-height: 24px; padding-right: 40px; } 

/* #commentForm { clear: both; } */
#commentForm li { list-style-type:none; padding-bottom: 24px; margin-left: -40px; }
#commentForm span { display: none; }
#commentForm input { border: 1px solid #817a72; background-color: #efefef; height: 30px; padding-left: 4px; border-radius: 4px; }
#commentForm textarea { border: 1px solid #817a72; background-color: #efefef; padding: 4px; border-radius: 4px; }

input#sendEmailBtn { background: linear-gradient(to bottom right, rgba(255,255,255,0.2),rgba(255,255,255,0)); }
input#sendEmailBtn { background-color: #508bc7; color: #fff; font-weight: bold; }
input#sendEmailBtn { width: 270px; height: 50px; }

#commentForm textarea.error{
	background: #f8dbdb;
	border-color: #e77776;
}

/* ERROR */
.errorInput { 	background-color: #f8dbdb;
	border-color: #e77776;
}
.errorText { font-family: Arial; font-size: 9pt; color: #c93a39; text-decoration: none; text-align: right; white-space: nowrap; } 



/* **************  INDV GALLERY  *************** */

.galcontentContainer { float: left;  width: 60%; max-width: 100%; text-align: left;  }
.galleryHeader { color: #6699cc; font-size: 2em; } /* font-size: 2em; .... font-size: 2em; font-weight: bold; font-family: Century Gothic, sans-serif;  */


.galTitle { float: right; color: #6699cc;  font-weight: bold; white-space: nowrap; font-size: 3em;
            padding: 0px 0px 10px 20px; margin-right: 50px; } 

.galleryHint { color: #333; padding-bottom: 10px; width: 95%; }

.galTNcntr { clear: both; float: none; word-spacing: 8px; line-height: 25px; margin-top: 20px; }
.galTN { padding: 6px; border: 1px solid #ccc; }
.galTN:hover { box-shadow: 2px 3px 6px #666; }

.galMenuBtn { padding: 2px; border: 1px solid #ccc; background-color: #efefef; vertical-align: bottom; margin-right: 15px;  }


/* ****************  WIDGET RANDOM IMAGE ******************* */
.galRandomImageCntr { float: left; text-align: center; width: 32%; max-width: 30%; border-left: 0px solid #6699cc;}
.galRandomImage { padding: 16px; border: 1px solid #ccc; box-shadow: 2px 3px 6px rgba(159,159,159,0.7); }
img.galRandomImage { width: 80%; }



/* ****************  SHOWINGS and AWARDS ******************* */
#linusInfo,#ipaInfo,#ppgInfo,#pfmagInfo,#smcInfo { display: none; }

.awardCntr { clear: both; margin-top: 25px; margin-bottom: 20px; padding: 9px 0px 10px 9px; border-top: 1px solid #ccc; }

.awardCntrWrapper > h2 { clear: both; margin: 0px; cursor: pointer; width: 95%; font-size: 1.25em; } /* font-size: 1.1875em; */
.awardCntrWrapper > h2 > span { float: left; margin-right: 8px; cursor: pointer; background-color: #b1aeab; color: #fff; 
                         padding: 2px 8px; margin-bottom: 10px; border: 1px solid #ccc; min-width: 12px; text-align: center; } /* font-size: .75em; */

.awardCntrWrapper > div { clear: both; float: none; margin-top: 5px; }
.awardDesc    { float: left; max-width: 70%; min-width: 40%; }
.awardDesc a { font-size: .9375em; }
.awardImgCntr { float: left; max-width: 15%; min-width: 150px; }

.awardCntrWrapper h2 { clear: both; margin: 3px; font-weight: normal; font-size: 1.25em; } /* font-size: 1em; */

.awardCntr div img { max-height: 240px; border: 1px solid #ccc; padding: 4px; margin-top: 10px; } 

.awardImgCntr { display: inline-block; padding-bottom: 30px;  }


/* ****************  MEDIA QUERIES  ******************* */

@media only screen and ( max-width: 320px ) {
#mainTNcntr > div > a > img { width: 283px; }
.galTitle { float: none; clear: both; display: block; }
}

@media only screen and ( max-width: 510px ) {
.mainImgCntr { display: none; }
#mainTNcntr { display: block; }
#mainTNcntr > div > img:hover { opacity: .7; }
.footerNoticeCol { max-width: 95%; margin: 5px; padding: 8px; } 
}

@media only screen and ( max-width: 445px ) {
.header { box-shadow: none; }
.headerLeft { float: none; clear: both; text-align: center; }
.navContAlt { float: none; clear: both; margin-top: 2px; width: 99%; height: 50px; 
              border: 1px solid #dbdbdb; border-top: 2px solid #ccc; } 
.altMenuBtn { height: 50px; line-height: 50px; font-size: 1.5em; }
.alt-menuItem { min-height: 50px; }
div.alt-menuItem { height: 50px; line-height: 50px; }
.alt-menuItem a { font-size: 1.5em;  } 
.sectionCntr { margin-left: 4px; margin-right: 20px; }
.galcontentContainer { float: none; clear: both; margin-left: 10px; padding-right: 18px; }
.galMenuBtn { display: none; }
#contactBox { margin-left: 10px; }
.sectionText { width: 98%;  }
.sectionText > span { clear: both; float: none; padding-bottom: 20px; }
.specialBox { clear: both; float: none; }

h1.sectionTitle { font-size: 2em; }
.sectionText p::first-line { font-size: 1.1875em; } 
.sectionText p { font-size: 1.25em; }
}

@media only screen and ( max-width: 550px ) {

.specialBox { clear: both; padding-top: 30px; }
div.snapShot { width: 100%; }

}

@media only screen and ( max-width: 720px ) {
.commentForm { float: none; clear: both; max-width: 87%; min-width: 55%; }
}

@media only screen and ( max-width: 850px ) {  /* was 768 */
.sectionCntr > div { float: none;  }
.navContAlt { display: block; }
.headerRight { display: none; }
.awardDesc { max-width: 100%; float: none; clear: both; width: 100%; }
.awardImgCntr { max-width: 100%; float: none; clear: both; display: block; text-align: center; }

}

@media only screen and ( max-width: 800px ) {
.awardCntr { border: 0px; margin-top: 5px; margin-bottom: 2px; }
.awardCntrWrapper h2 { padding: 8px; min-height: 50px; width: 97%; background-color: #e4e4e4; border: 1px solid #ccc;  border-left: 10px solid #817a72; } 
.awardCntrWrapper > h2 > span { display: none; }
.awardCntrWrapper > div { padding-left: 4px; }

.galRandomImageCntr { display: none; }
.galcontentContainer { width: 100%; }

.snapShot { margin: 0px auto; text-align: center;  }
}


@media only screen and ( max-width: 950px ) {
.footerNoticeCol { max-width: 50%; } 
}
@media only screen and ( max-width: 920px ) {
.footerNoticeCol { max-width: 95%; margin: 8px; padding: 8px; } 
}

@media only screen and ( max-width: 870px ) {
.footerNoticeCol { max-width: 98%; float: none; clear: both; padding: 10px; min-height: 40px; }
}

@media only screen and ( max-width: 1920px ) {
	.mainImgCntr { width: 60%; }
}
@media only screen and ( max-width: 1600px ) {
	.mainImgCntr { width: 75%; }
}

@media only screen and ( max-width: 1280px ) {
	.boxWrapper { float: none; max-width: 100%; margin: 0px auto; margin-left: 10px;  }
	.boxWrapperText { clear: both; float: none; max-width: 100%; }
	.specialBox { float: none; max-width: 100%; margin-left: 10px; }
	.mainImgCntr { width: 90%; }
}

@media only screen and ( max-width: 420px ) {
	.mainImgCntr { width: 95%; }
	.mainImgCntr img { height: auto;  }
}