/* Style sheet for Lisa Taylor'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;
   background-image: url("images/background2.png");  
}

body {
  font-family: Georgia, "Times New Roman", serif;

background-color: white; 
max-width: 1400px;
margin: 0 auto;


}

.logo {
      width: 90%;
      margin-left: 5%;
      height: auto;
      margin-top: 4px;
}

.header_phone {
    
        display: none;
}

h1 {
    color: darkblue;
    font-size: 2.0em;
    text-align: center;
    padding-bottom: 0.7em;
    line-height: 1.1em;
}


h2 {
    color: darkblue;
    font-size: 1.7em;
    text-align: center;
    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;
}

.regular-text {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.5em;
}

.question-text {
    font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 0.7em;
    font-style: italic;
}

ul
{
list-style-type: circle;
padding: 0px;
margin: 2em;
}
ul li
{

font-size: 1.2em;
line-height: 1.3em;

}

figure {
    margin-bottom: 3em;
}

figure img {
    width: 90%;
    margin-left: 5%;
}

figcaption {
    font-size: 1.4em;
    font-style: italic;
    text-align: center;
    margin-top: 0.2em;
}

video {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 3em;
}

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


nav {
 
  top: 0.8em;
 
  position: relative;
   width: auto;
      text-align: center;
      
      margin-bottom: 1em;
      margin-left: auto;
      margin-right: auto;

}



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


nav ul li {
 
   
   padding-right: 0em;
   margin-right: 0.5em;
	float: left;
        font-size: 1.3em;
        margin-left: 0.0em;
        border-style: solid;
        border-width: 1px;
        border-color: #4280a7;
        background-image: url('images/nav_button.png');
        width: auto;
        display: inline;
        background-color: #aacbde;
          /*    cursor: url('images/mallet.png'), auto;   */
}
	
	
	nav ul li a {
		display: block; padding: 8px 5px;
		color: blue; text-decoration: none;
                display: inline-block;
                       /* cursor: url('images/mallet.png'), auto; */
                       color: #003a89;
	}
        
        nav ul li:hover {
            border-top: none;
            border-left: none;
        }


    
        
     .selected-nav-link, .selected-nav-link-break {
      
       color: #003a89;
         background-color: #edc252;
        }    
        
 

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

footer {
    float: left;
    clear: both;
    border-top-width: 1px;
    border-top-color: #aacbde;
    border-top-style: solid;
    width: 100%;
    margin-bottom: 3em;
    margin-top: 2.5em;
    padding-top: 1em;
  

}

footer p {
    color: #4280a7;
    text-align: center;
    line-height: 1.3em;
    font-size: 1.1em;
}

img {
    border-color: black;
    border-width: 1px;
    border-style: solid;
}

/***** HOME PAGE *******/
.lisa-top-comment-div {
    width: 55%;
    margin-left: 22.5%;
    margin-right: 22.5%;
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 2.5em;
    padding: 0.5em;
   
}

.lisa-comment-div {
    width: 85%;
    margin-left: 7.5%;
    margin-right: 7.5%;
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 2.5em;
    padding: 0.5em;
   
}

.lisa-comment-div-for-bottom-left {
    width: 62%;
    margin-left: 0%;
    margin-right: 0%;
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 2.5em;
    padding: 0.5em;
   
}

.lisa-comment-div-for-bottom-right {
    width: 45%;
    margin-left: 0%;
    margin-right: 0%;
    border-color: blue;
    border-style: solid;
    border-width: 2px;
    margin-bottom: 2.5em;
    padding: 0.5em;
        float: left;
   
}


.home-top-wrapper-div {
    width: 100%;
    margin-top: 0em;
    float: left;
}

.home-top-left-div {
    width: 50%;
    float: left;
    margin-left: 0%;
    padding-right: 2%;
    border-right: solid;
    border-color: black;
    border-width: 1px;
}


.home-top-right-div {
    width: 50%;
    float: left;
     padding-left: 2%;
    margin-right: 0%;

}

.home-bottom-wrapper-div {
    width: 100%;
    margin-top: 2em;
    float: left;

}

.home-bottom-left-div {
    width: 50%;
    float: left;
 padding-right: 2%;
        border-right: solid;
    border-color: black;
    border-width: 1px;
}


.home-bottom-right-div {
    width: 49%;
    float: left;
  padding-left: 2%;
    margin-right: 0%;
}

.home-left-buttons-div{
    width: 34%;
    float: left;
    clear: both;
}

.home-right-buttons-div {
    width: 34%;
    float: left;
}

.home-right-buttons-div-for-phone {
    display: none;
}

.home-middle-banner-div {
    width: 100%;
    

    margin-top: 0.8em;
    margin-bottom: 1.7em;
}

.home-quote-div {
    width: 40%;
    margin-left: 30%;
    float: left;
    border: none;
}

.archive-button {
    background-color: #00327e;
    text-align: center;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
    color: white;
}

.close-button {
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.home-table {
    width: 70%;
    margin-left: 15%;


background-image: linear-gradient(
    135deg,
    #00327e 0%,
    #0095B7 10%,
    #026cc6 50%,
    #0095B7  90%,
      #00327e 100%
);


    
}

.home-table th {
       text-align: center;
    font-size: 1.2em;
    font-weight: normal;
    padding: 0.4em;
    border-style: solid;
    border-color: #003a89;
    border-width: 1px;
    color: white;
    padding-top: 0.4em;
}

.home-table td {
    text-align: center;
    font-size: 1.0em;
    font-weight: normal;
    padding: 0.6em;
    border-style: none;
    border-right-style: solid;
    border-color: #003a89;
    border-width: 1px;
    color: white;
}

.middle-banner-img {
    width: 100%;
    height: auto;
    border: none;


}

.lesson-img {
    float: right;
    width: 50%;
    height: auto;
    margin-left: 6px;
    margin-bottom: 1em;
    
}

.presentation-img {
    float: left;
    width: 45%;
    height: auto;
    margin-right: 12px;
  
}

.small-text {
    font-size: 0.7em;
}

.lisa-text {
    font-size: 1.0em;
    font-style: italic;
    line-height: 1.1em;
}

        .testimonial-text  {
            font-size: 1.05em;
            font-weight: normal;
            margin-left: 1em;
            margin-right: 2em;
            line-height: 1.1em;
            margin-bottom: 1.1em;
            
            
        }
        

        
        .play-button {
            height: 40px;
            width: auto;
            float: left;
            margin: 4px;
        }

   
/***** END HOME PAGE  ******/


.quote-text {
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.2em;
    margin-bottom: 0.7em;
    width: 70%;
    margin-left: 15%;
}

.quote-attribution {
    font-size: 1.0em;
    font-style: normal;
    margin-left: 18%;
    margin-bottom: 2em;
    
}

/****** PRESENTATIONS PAGE  *****/
.horizontal-wrapper-div {
    width: 96%;
    margin-left: 2%;
    float: left;
    clear: both;
    margin-bottom: 1.5em;
  
    background-color: white;
    
}

.inst-list-text {
    width: 70%;
    margin-left: 15%;
      font-size: 1.2em;
    line-height: 1.2em;
    margin-bottom: 1.5em;
    color: #003a89;
}

.across-page-image, .across-page-image-alphorn {
    width: 96%;
    height: auto;
    margin-left: 2%;
    margin-bottom: 2em;
    border: none;
  
 }
 
 .across-page-image-phone {
     width: 100%;
     display: none;
     margin-bottom: 2em;
 }
 
 .half-width-image {
     width: 50%;
     margin-left: 25%;
     margin-right: 25%;
 }

.large-image {
    float: left;
    width: 42%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px;  
}

.bio-image{
    float: left;
    width: 22%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px;  
}

.medium-image-right, .next-to-resume-image{
    float: right;
    width: 25%;
    height: auto;
    margin-right: 2%;
    margin-bottom: 20px;  
    margin-left: 2%;
}


/* END PRESENTATIONS PAGE *****/


/**** ABOUT ME PAGE *****/
.resume-image {
        float: left;
    width: 70%;
    height: auto;
    margin-left: 15%;
    margin-bottom: 20px;  
}

/** END ABOUT ME PAGE  **/

.large-image-right {
        float: right;
    width: 42%;
    height: auto;
    margin-right: 2%;
    margin-bottom: 20px; 
    margin-left: 1.5%;
}


/** CH MUS PAGE  **/
.medium-image-right, .next-to-resume-image{
    float: right;
    width: 25%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px;  
}

/** END CH MUS PAGE  **/

.large-image-for-lesson-page {
    width: 350px;
    height: auto;
    float: left;
    margin-right: 2em;
}

/* CONTACT  **/

.contact-form {
    margin-bottom: 1em;
 
    width: 95%;

}

.contact-text-div {
    float: left;
    width: 60%;
}

.contact-pic-div {
    float: left;
    width: 38%;
}

.contact-img {
    width: 94%;
    margin-left: 3%;
    height: auto;
}

.contact-form-div {

    margin-top: 1em;
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 2em;
        background-image: linear-gradient(
    135deg,
    #00327e 0%,
    #0095B7 10%,
    #026cc6 50%,
    #0095B7  90%,
      #00327e 100%
);
}

.contact-form-table, .contact-form-table-phone {
    width: 100%;
    margin-left: 0;
}


.contact-form-table-phone .left-prompt {
    padding-top: 1em;
    
}

.contact-form-table td {
    font-size: 1.2em;
    white-space: nowrap;
 padding: 1.5em;
   
}

.contact-form-table-phone td {
        font-size: 1.2em;
    white-space: nowrap;
 padding-left: 1.5em;
 padding-top: 0.3em;
}

.middle-prompt {
    vertical-align: middle;
    text-align: right;
    color: white;
}

.top-prompt {
    vertical-align: top;
    text-align: right;
    color: white;
}

.left-prompt {
    text-align: left;
color: white;
}

select {
   
     font-size: 1.0em;
     border: black;
    
}

input {
    font-size: 1.0em;
    width: 95%;
    vertical-align: top;
}



textarea {
    font-size: 1.0em;
    vertical-align: top;
    width: 100%;
    height: 120px;
}

button {
    font-size: 1.2em;
}

.contact-form-table-phone button {
    margin-bottom: 1.5em;
    margin-top: 0.5em;
}

.contact-form-table-phone {
    display: none;
}

 
    /***************** Begin Screen Sizes  ****************/
 @media screen and (max-width: 1000px) {
     nav ul li {
   font-size: 1.2em;
     }

 }
 /*******************************************************/
 
 
 @media screen and (max-width: 925px) {
.next-to-resume-image{
    float: left;
    width: 100%;
    height: auto;
    margin-right: 20px;
    margin-bottom: 20px;  
}

 .resume-image {
        float: left;
    width: 94%;
    margin-left: 3%;
    height: auto;

     
}

       .nav-link-break {
            float: left;
            clear: both;
        }
             
               .selected-nav-link-break {
            float: left;
            clear: both;
              color: #003a89;
         background-color: #edc252;
        }
            
        nav ul li {
   font-size: 1.3em;
   margin-bottom: 1em;
     }
     
 }
 
  /*******************************************************/

 @media screen and (max-width: 870px) {
     .home-table {
         width: 96%;
         margin-left: 2%;
         margin-right: 2%;
     }
     
     .contact-form-table {
         display: none;
     }
     
     .contact-form-table-phone {
         display: block;
     }
     
.logo {
          width: 100%;
         margin-left: 0;
     }

}

 /*******************************************************/
    @media screen and (max-width: 760px) {
      .header_phone {
         display: block;
        
     }

     
     .header {
         display: none;
     }
 
     .across-page-image-alphorn {
         display: none;
     }

     .across-page-image-phone {
         display: block;
     }
    }
    
    /******************************************************/
 @media screen and (max-width: 600px) {
     .lesson-img, .presentation-img, .large-image, .large-image-right, .bio-image {
    width: 94%;
    margin-left: 3%;
    height: auto;
    margin-bottom: 1em;
     }
     }
     
 /*******************************************************/
    
 @media screen and (max-width: 520px) {
     h1 {
    font-size: 1.6em;
     }
     
     .home-left-buttons-div {
         width: 46%;
         margin-left: 2%;
         margin-right: 2%;
         float: left;
     }
     
     .home-right-buttons-div-for-phone {
                 width: 46%;
         margin-left: 2%;
         margin-right: 2%;
         float: left; 
     }
     
     .home-right-buttons-div {
         display: none;
     }
     
     .home-quote-div {
        margin-left: 5%;
         width: 90%;
     }
     
 }
  
 
/*******************************************************/
    
 @media screen and (max-width: 490px) { 
.home-top-left-div, .home-top-right-div, .home-bottom-left-div, .home-bottom-right-div {
    width: 100%;
    float: left;
    margin-left: 0%;
    padding-right: 0%;
    border-right: none;

}

.medium-image-right {
    width: 55%;
}


 }