/* Style sheet for Dana Hofer's' website */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* After reset for standard stuff */

* {
    box-sizing: border-box;   
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

strong {
    font-weight: bold;
}

i {
    font-style: italic;
}

/* Specific to this site */
html {
border-color: white;
border-style: solid;
border-right-width: 2px;
border-left-width: 2px;

}

body {
  font-family: Georgia, "Times New Roman", serif;
     
background-color: #f3f6e1; 
max-width: 1400px;
margin: 0 auto;


}

.logo {
      max-width: 90%;
      height: auto;
}

.header_phone {
    
        display: none;
}

h1 {
    color: #bc7631;
    font-size: 3em;
    text-align: left;
    padding-bottom: 0.7em;
    line-height: 1.1em;
}

.the-customer-list h2, .affiliations h2 {
    color: #bc7631;
    font-size: 1.7em;
    text-align: left;
    padding-bottom: 0.7em;
    line-height: 1.1em;
    
}

h2 {
    color: #bc7631;
    font-size: 2.4em;
    text-align: left;
    padding-bottom: 0.7em;
    line-height: 1.1em;
}

h3 {
    color: black;
    font-size: 1.8em;
    text-align: left;
    padding-bottom: 0.5em;
    margin-top: 50px;
}

/* NAVIGATION **********************/

nav {
 
  top: 1em;
 
  position: relative;
      width: 100%;
      text-align: left;
      
      margin-bottom: 1em;

}



nav ul{
	list-style: none;
	  /*    cursor: url('images/mallet.png'), auto;   */
	display: inline-table;
       
        
}
	


nav ul li {
 
   
   padding-right: 0.1em;
   
	float: left;
        font-size: 1.3em;
        margin-left: 0.4em;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        background-image: url('images/nav_button.png');
        width: 7em;
          /*    cursor: url('images/mallet.png'), auto;   */
}
	nav ul li:hover {
                 
             /* cursor: url('images/mallet.png'), auto;  */
        }
		nav ul li:hover a {
			
                          /*    cursor: url('images/mallet.png'), auto;   */
                        
		}
	
	nav ul li a {
		display: block; padding: 8px 5px;
		color: white; text-decoration: none;
                       /* cursor: url('images/mallet.png'), auto; */
	}
        
        nav ul ul {
      display: none;  
   
}

nav ul li:hover > ul {
		 display: inline; 
 /* cursor: url('images/mallet.png'), auto; */
	}
        
     
		nav ul li:hover a {
			
                     /*    cursor: url('images/mallet.png'), auto;   */
		}
	
	


nav ul ul {
	background: transparent; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
        margin-left: 18px; margin-top: -3px;
          /*    cursor: url('images/mallet.png'), auto;   */
}
	nav ul ul li {
		float: none; 
		position: relative;
            font-size: 1em;
                     /*    cursor: url('images/mallet.png'), auto;   */
   
                
	}
		nav ul ul li a {
		   /*    cursor: url('images/mallet.png'), auto;   */	
			
		}	
			nav ul ul li a:hover {
			color: black;	
                          /*    cursor: url('images/mallet.png'), auto;   */
			}

nav ul ul ul {
	position: absolute; left: 100%; top:0;
          /*    cursor: url('images/mallet.png'), auto;   */
    }
        
     .selected-nav-button {
       background-image: url('images/nav_button_selected.png');
       color: #bc3611;
       font-weight: bolder;
        }       
        
    

/* END NAVIGATION **********************/   

.wrapper {
    float: left;
    clear: both;
    margin-top: 3em;
    width: 100%;
}

.wrapper-2 {
    width: 100%;
}

.main-content {
    width: 100%;
    clear: both;
    font-size: 0.8em;
    color: black;
    padding-left: 1%;
    
    line-height: 1.4em;
    

}
 
.the-customer-list {
    width: 42%;
    margin-left: 2em;
    float: left;
    clear: both;
    margin-top: 3em;
    padding-left: 5em;
    border-style: groove;
    border-width: 4px;
    padding-top: 1em;
    padding-bottom: 1em;
    border-color: #bc7631;
}

.the-customer-list li, .affiliations li {
    font-size: 1.0em;
	
	color: #20170E;
	font-weight: normal;
        line-height: 1.4em;   
        list-style-type: circle;
        margin-right: 1em;
}

.main-content li  {
    font-size: 1.3em;
    margin-bottom: 1em;
	
	color: #20170E;
	font-weight: normal;
        line-height: 1.4em;   
        list-style-type: circle;
        margin-right: 1em;
}



.affiliations {
width: 45%;
    margin-left: 2em;
    float: left;
    clear: none;
    margin-top: 3em;
    padding-left: 5em;
    border-style: groove;
    border-width: 4px;
    padding-top: 1em;
    padding-bottom: 1em;
    border-color: #bc7631;    
}

.main-content .col1 {
    width: 60%;
    float: left;
    margin-left: 1.5%;
    margin-right: 0%;
}


.main-content .col1-for-sale {
    width: 40%;
    float: left;
    margin-left: 1.5%;
    margin-right: 0%;
}


.main-content .col1-museum {
     width: 70%;
    float: left;
    margin-left: 1.5%;
    margin-right: 3%;
}

.main-content .col2-chime-video {
    width: 50%;
    float: right;
    clear: none;
    margin-bottom: 2em;
    
}

video {
    width: 90%;
    height: auto;
}

.main-content .col2 {
    width: 35%;
    float: left;
    clear: none;
    
    margin-right: 1%; 
 
   
}


.regular-text {
 font-size: 1.3em;
	
	color: black;
	font-weight: normal;
        line-height: 1.3em;   
        margin-bottom: 1em;
        word-wrap: break-word;
}

.attribution {
    font-size: 1.2em;
    color: black;
	font-weight: normal;
        line-height: 0.4em;   
        margin-bottom: 2em;
        margin-top: 1.5em;
        margin-left: 0.5em;
        word-wrap: break-word;
}

.main-content .col2 .regular-text {
    font-size: 1.3em;
	
	color: #20170E;
	font-weight: normal;
        line-height: 1.3em;   
        margin-bottom: 1em;
}

.main-content .regular-text-bolded {
 font-size: 1.1em;
	
	color: #20170E;
	font-weight: bold;
        clear: both; 
        margin-bottom: 1em;
       
}

.main-content .regular-text-clear {
    clear: both; 
    font-size: 1.3em;
	
	color: #20170E;
	font-weight: normal;
        line-height: 1.3em;   
        margin-bottom: 1em;

}

.main-content ul {
    padding-bottom: 1.2em;
}

.home-page-person-photos {
    width: 95%;
    height: auto;
    float: none;
    margin-right: 1em;
}

.home-page-building-photo {
    width: 40%;
    height: auto;
    float: none;
    display: block;
    margin-left: 26%;
    margin-right: 30%;
    margin-top: 2em;
    
}

.services-pic {
    float: none;
    width: 70%;
    height: auto;
    margin: 2em;

}

.service-explanation {
    margin-top: 2em;
    width: 60%;
    margin-left: 2em;
    float: left;
    clear: both;
}

/****** SERVICES PAGE  **********/


.main-content .col1-services {
    width: 40%;
        float: left;
        margin-left: 1.5%;
    margin-right: 0%;
}

.main-content .col2-services {
    width: 55%;
    float: left;
    clear: none;
    
    margin-right: 1%; 
 
   
}

/******* END SERVICES PAGE ********/




 /*** CONTACT FORM   ******************/   
.contact-form {
    background-color: #f3f1eb;
     margin-top: 5em;
    padding-top: 1em;
    padding-left: 0.5em;
    padding-bottom: 4em;
   border-style: solid;
        border-width: 1px;
        border-color: black;
}

.form-label {
    font-size: 1.3em;
    margin-top: 0.8em;
}


input {
    font-size: 1.2em;
    width: 90%;
}

textarea {
    width: 95%;
}
button {
    width: 6.5em;
    height: 2.5em;
    float: left;
    clear: none;
    margin-right: 3em;
    font-size: 1.0em;
    margin-top: 1em;
   
}

.contact-us-pic {
    width: 90%;
    height: auto;
    margin-left: 5%;
    margin-top: 5.5em;
    margin-bottom: 1.4em;
}

.narrow-text {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 1.4em;
    line-height: 1.2em;
}

/*** END CONTACT FORM   ******************/   

/**** FOR MUSEUM PAGE  ******/

.museum-category-pic {
     
   width: 100%;
    height: auto;
    float: left;
}

.museum-label {
    color: blue;
    text-decoration: underline;
    font-size: 1.3em;
    
}

.instrument-pictures, .people-pictures,
.event-pictures {
    display: none;
    width: 95%;
    float: left;
    
    clear: both;
    margin-top: 4em;
}



.museum-pic {
    height: auto;
    width: 100%;
  
}

.museum-category-table-div {
    width: 100%;
    float: left;
    clear: both;
}

 .museum-category-table {
    background-image: none;
    width: 1098px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 366px;

}

.museum-table {
     background-image: none;
    

     
}

.museum-table td {
    text-align: left;
    font-style: italic;
    font-size: 1.3em;
    line-height: 1.3em;
    vertical-align: top;
    font-weight: normal;
}





/*** END FOR MUSEUM PAGE   ******************/   

/*****FOR FOR SALE PAGE *****/
.for-sale-pictures {
    width: 95%;
    float: left;
    
    clear: both;
    margin-top: 4em;
}
.for-sale-pictures td {
  text-align: left;
    font-style: normal;
    font-size: 1.3em;
    line-height: 1.3em;
    vertical-align: top;
    font-weight: normal;
}
audio {
    margin-top: 0.5em;
}

/**END FOR SALE PAGE   *****?


/**** TABLE (FOR PRICE LIST)  ******/

table {
    width: 100%;
    background-image: url('images/building_sepia.png');
    background-size: cover;
    
}

th {
	padding: 1.0em 0.5em;
	text-align: center;
        background: #dce0c7;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        font-weight: bold;
        font-size: 1.5em;
	}

           
   /*     
tr:nth-child(odd) {background: #d6d7d5;}
*/
tr.yellow td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
        
	
	}

td {
    font-size:1.4em;
    font-weight: bold;
	border-bottom: 1px solid #CCC;
	padding: 0.7em 0.5em;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        
	}
                
        .gallerytd {
            display: table-cell;
            vertical-align: middle;
            font-size: 1.3em;
        }
        
        .centeredtd {
            text-align: center;
        }
        
        .caption {
            color: black;
            font-size: 1.3em;
            margin-top: -14px;
            margin-bottom: 8px;
        }

td:first-child {
	width:60%;
	}

td+td {
	border-left: 1px solid #CCC;
	text-align: center;
	}
        
        .gallery-topper {
            background-color: white;
            margin-top: 1em;
            padding-top: 0.2em;
            padding-bottom: 0.4em;
            font-size: 1.0em;
        }
        
/**** END TABLE (FOR PRICE LIST)  ******/        
  
.pricelist-photo {
    margin-left: 3%;
    width: 85%;
    height: auto;
}


/*****MAP PAGE ****/
.maps {
    width: 95%;
    margin-top: 3em;
}

.map-image {
    width: 95%;
    margin-bottom: 4em;
    margin-top: -1.5em;
}

.address-text {
    line-height: 1.1em;
    font-weight: bold;
    font-size: 1.4em;
}


/**** END MAP PAGE ***/


/***CONTACT PAGE***/
select {
font-size: 1.4em;   
}

.form-label {
    margin-bottom: 0.6em;
    margin-top: 1em;
}

form {
    border-style: solid;
    border-width: 1px;
    border-color: black;
    padding-left: 1em;
    padding-bottom: 6em;
    margin-bottom: 1em;
}

button {
    margin-top: 2em;
}

/***END CONTACT PAGE***/

 footer {
     width: 100%;
     float: left;
     clear:both;
     border-top: #d9c67b;
     border-top-style: solid;
     border-top-width: 1px;
     text-align: center;
     margin-bottom: 2em;
     margin-top: 1em;
     line-height: 1.4em;
     
 }

 footer p {
     color: #a4996b;
     margin-top: 0.4em;
     font-size: 0.9em;
 }
 
 footer a {
     color: #a4996b;
     line-height: 1em;
 }
 
 .footer-contact {
     margin-bottom: 1.3em;
     margin-top: 0.4em;
     font-size: 1.0em;   
     color: #bc7631;
 }
 
 footer.regular-viewport {
     display: block;
 }
 
 footer.narrow-viewport {
     display: none;
 }

    /***************** Begin Screen Sizes  ****************/


 /*******************************************************/
 
 
 @media screen and (max-width: 1200px) {

 nav ul li {
     font-size: 14pt;
 }
    
   h1 {
     font-size: 2.5em;
 }
 

 
}

/* end 1200px */
 /*******************************************************/
    
@media screen and (max-width: 1100px) {

 nav ul li {
     font-size: 13pt;
 }
 
  .museum-category-table {
    background-image: none;
    width: 1098px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 366px;

}

 .museum-category-table {
    background-image: none;
    width: 960px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 320px;

}
 
 
    
}

/* end 1100px */
 /*******************************************************/

@media screen and (max-width: 960px) {
    
    
    
    h1 {
        font-size: 2.3em;
    }
    
    h2 {
        font-size: 1.8em;
    }
    
    .header  {
        height: 230px;
    }
    
    nav ul li {
     font-size: 11pt;
 }

 
 .main-content .map {
     float: left;
     clear: both;
    width: 90%;
    height: auto;  
    margin-bottom: 3em;
    border-color: green;
    border-style: solid;
    border-width: 5px;
}

 .museum-category-table {
    background-image: none;
    width: 888px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 296px;

}
}
/* end 960px */

 /*******************************************************/

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

    nav {
   top: -4em;
   width: 100%;
   font-size: 16px;
   margin-bottom: 0em;
    }
    
    .wrapper {
        margin-top: 0em;
    }

    a:link {
        font-size: 1.3em;
    }
    
    .gallerytd a:link {
        font-size: 1.0em;
    }
    
    .gallery-sidebar a:link {
        font-size: 1.1em;
    }
    

    
.home-page-building-photo {
    width: 60%;
    height: auto;
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;;
    margin-top: 2em;
    
}
    
    
 
            
 .enlarged-image {
    width: 100%;
    height: auto;
    max-height: 85%;
}

h1 {
    font-size: 1.8em;
}

 .museum-category-table {
    background-image: none;
    width: 760px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 253px;

}


}
/* end 895px */

 /*******************************************************/
@media screen and (max-width: 764px) {
    
    .header  {
        display: none;
    }
    
    .header_phone {
        height: 240px;
        display: block;
    }
    
 
    /* Now change nav to vertical */
    nav{
        width: 35%;
        float: left;
        top: -5em;
        margin-bottom: -1em;
    }
    
    h1.for-price-list, h1.for-contact-page, h1.for-custom-work,  h1.for-favorite-links, h1.for-location-page, h2.for-location-page {
        text-align: center;
        margin: 0;
    }
    
    nav li {
        float: left;
        clear: both;
        margin-bottom: 0.8em;
    }
    

    
    nav ul ul {
	margin-left: 0em;
	position: relative; 
     background: transparent;
   
}


        

nav ul ul li {
    clear: both;;
    margin-bottom: 0em;
    margin-left: 0em;
     width: 10em;
     height: 3.5em;
     text-align: center;

}

.service-explanation {
    margin-left: 0.7em;
    width: 90%;
}


.wrapper {
   margin-top: -2em;
}

    
.the-customer-list {
    
    padding-left: 2em;
    
}

.affiliations {
    padding-left: 2em;
}

 .museum-category-table {
    background-image: none;
    width: 710px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 236px;

}
    
}


@media screen and (max-width: 710px) {
    
    h1 {
        font-size: 1.5em;
    }    
    
    
            .museum-category-table {
    background-image: none;
    width: 560px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 180px;
    
}
}


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

    
    



.header {
    height: 170px;
}


.main-content .col1 {
    width: 90%;
    
}

.main-content .col2 {
    width: 90%;
    float: left;
    clear: both;
    margin-left: 2%;
    padding-top: 3em;
  
}


       .home-page-image {
         height: 110px;  
 }
 
   footer.regular-viewport {
           display: none;
       }
    
       footer.narrow-viewport {
           display: block;
       }
       
       h1 {
           font-size: 2.0em;
       }
       

    
}
/* end 640 width */
 /*******************************************************/

@media screen and (max-width: 560px) { 
    
    .affiliations {
        float: left;
        clear: both;
        width: 90%;
    } 
    
    .the-customer-list {
        width: 90%;
    }
    
  nav{
       
        top: -8em;
        margin-bottom: -4em;
      
    }   
    
            .museum-category-table {
    background-image: none;
    width: 360px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 120px;
    
}
}
                                       

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

 
       footer.regular-viewport {
           display: none;
       }
    
       footer.narrow-viewport {
           display: block;
       }
       
 .museum-label {
    color: blue;
    text-decoration: underline;
    font-size: 1.0em;
    
}

        .museum-category-table {
    background-image: none;
    width: 330px;
    table-layout: fixed;
}    

.museum-category-table td {
  
   vertical-align: top;
    text-align: center; 
    width: 110px;
    
}
       
}

/* end 400 width */