/*
Kyle Mackey
KWM Art Website
5-17-21
*/
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

/* reset rules */
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 { background-color: black;
       /*background-color: #2c2c33;*/
       font-family: Verdana, Arial, sans-serif;
       color: #fff; }
           
#wrapper { margin-left: auto;
           margin-right: auto;
           width: 80%;
           min-width: 1200px;
           background-color: black;
		     /*background-color: #2c2c33;*/ }


h3 { font-size: 1.3em;
     font-weight: bold;
     line-height: 2em; }
       
#logo { margin-left: 13px;
        margin-top: 13px;
	     float: left; }

img#logo { margin-left: 0px; }

img#logo:hover { transform: scale(1.03); }

#title { font-size: .1em;
         text-indent: -9999px; }

.tab-panel a img:hover { transform: scale(1.03); }

#left { width: 370px ;
        float: left;
        height: 880px;
        padding-bottom: 10px;
	     padding-left: 10px;
        background-color: #000; }
        
#right { width: 780px;
         float: left;
         height: 880px; 
         padding: 20px;
         padding-bottom: 0px;
         background-color: #000;
         text-align: center; } 
	    
span { display: none;
       padding-left: 10px; }

li a:hover span { display: block;
                  position: absolute;
                  text-align: center;
                  font-size: small;
                  right: 20%;
                  top: 5%;
                  float: right; }

#gallery1 { clear: left;
	         display: block; }

#gallery2 { display: block; }

#thumb9 { display: none; }
#thumb9li { display: none; }
#gallerytoggle { display: none; }

.tab-panel { display: none;
             padding-left: 10px;
			    clear: left; }

.tab-panel.active { padding-left: 0px; }
	
.tab-panel.active { display: block; }

#gallerytoggle { text-align: center; }

#tab-1 { font-size: .7em; }

#mouseover { text-decoration: none;
             font-size: .8em; }
#mouseover:visited { color: #fff; }
#mouseover:hover { font-size: .805em; }

#click { text-decoration: none;
         font-size: .8em; }
#click:visited { color: #fff; }
#click:hover { font-size: .805em; }
      
ul  { list-style-type: none;
      margin-left: 10px;
      padding-top: 8px; }

ul li { padding: 1px;
        margin-left: 0; }

a { text-decoration: none; }

ul li a {  margin-left: 0;
		     font-size: .9em; }

a:visited { color: #fff; }

ul.tab-list li a:hover { font-size: .905em; }

a:link { color: #fff; }

ul.tab-list  { float: left;
               display: block;
               margin: 0px;
			      margin-left: 20px;
			      padding-top: 6px;
			      padding-left: 5px;
               padding-bottom: 5px;
               height: 75px; }

ul.content { display: inline;
             clear: left;
			    padding-top: 0px;
			    margin-top: 0px;
			    margin-left: 15px; }

ul.content div { padding-top: 10px; }

a.tab-control { display: block; }		 

div.tab-panel { font-size: .9em; }

ul.content li { float: left;
	             padding: 5px; }

form { margin-left: 10px; }

span.back { font-size: .9em;
            position: fixed;
            top: 0px;
            left: 0px; }

legend a { margin-left: 10px;
           display: none; }

footer  { clear: left;
          padding: 10px;
	         font-size: .7em; }

footer a:hover { color: #ddd; }

#forjq { display: none; }

#showAll { font-size: 2em; }

#showAll:hover { color: #ddd; }

span.back { font-size: 1.3em; }

footer li { display: inline; }
footer li a.tab-control { display: inline;
                          font-size: .77em;
                          background-color: #333; }
.bottomNav { margin: auto;
             padding: 0px; }

/*shorter widths*/
@media only screen and (max-width: 1320px) {
   li a:hover span { right: 5%; }
}

@media only screen and (max-width: 1220px) {
   body { margin: 0; padding: 0;
          background-color: #000; } 
   #wrapper { min-width: 0px;
              width: 100%;
              margin: 0;
			     display: flex;
				  flex-direction: row; }
	#left  { width: auto;
            flex: 1;
            height: auto; }
	#right { width: auto;
            flex: 2;
            height: auto; }
   span img { width: auto;
              height: auto; }
   li a:hover span { right: 5%; }
}
	
@media only screen and (max-width: 1120px) {
   #left  { width: auto;
            flex: 3;
            height: auto; }
	#right { width: auto;
            flex: 4;
            height: auto;
            margin: 0px;
            padding: 0px; }
   #logo { width: 150px;
               height: 83px; }
   span img { width: 550px;
              height: auto;
              margin: 10px; }
   li a img.thumb  { width: 85px;
                         height: 111px; }
   ul.content li { padding-bottom: 1px; }
   ul.content div { padding-top: 20px; }
}
@media only screen and (max-width: 1000px) {
      span img { width: 460px;
                 height: auto; }
}

@media only screen and (max-width: 970px) {
      span img { width: 450px;
                 height: auto; }
}

@media only screen and (max-width: 950px) {
      #logo { width: 130px;
               height: 72px; }
      ul li a { font-size: .9em; }
      ul.tab-list li a:hover { font-size: .92em; }
}
@media only screen and (max-width: 900px) {
      #logo { width: 120px;
              height: 66px; }
      ul li a { font-size: .8em; }
      ul.tab-list li a:hover { font-size: .84em; }
      span img { width: 450px;
                 height: auto; }
      li a img.thumb { width: 78px;
                            height: 101px; }
}

@media only screen and (max-width: 850px) {
   #left  { width: auto;
            flex: 3;
            height: auto; }
	#right { width: auto;
            flex: 4;
            height: auto; }
   ul li a { font-size: .7em; }
   ul.tab-list li a:hover { font-size: .72em; }
   div.tab-panel { font-size: .7em; }
   span img { width: 400px;
              height: auto; }
   li a img.thumb { width: 70px;
                         height: 90px; }
}
@media only screen and (max-width: 740px) {
   #left { width: 100%; }
}
@media only screen and (max-width: 720px) {
   ul.tab-list { display: none; }
   #forjq { display: block; }
   ul.tab-list { background: #000;
                 clear: left;
                 position: absolute;
                 z-index: 10;
                 display: none;
                 padding: 2px;
                 top: 80px;
                 margin: 0px;
                 padding-bottom: 20px; }
   ul.tab-list li:hover { background-color: grey; }
   ul.tab-list li a:hover { font-size: .7em;
                            background-color: grey; }          
   ul.tab-list li { background-color: #000;
                    width: 130px;
                    padding: 4px; }
}
@media only screen and (min-width: 720px) {
   ul.tab-list { display: block; }
}
@media only screen and (max-width: 680px) {
   #left  { flex: 4; }
	#right { flex: 5; }
      span img { width: 375px;
                 height: 485px; }
}
@media only screen and (max-width: 640px) {
   #left { display: block;
            width: auto; }
   #right { display: none;
            width: auto;
            clear: left; }
   ul.content { margin-right: 10px; }
   form { display: none; }
   legend a { display : block; }
   a#showAll { font-size: 1.3em; }
   span { display: none;
           width: auto; }
   span a img { margin: auto;
                padding-top: 30px;
                width: 90%;
                height: auto; }
   #forjq { display: none; }
   div.tab-panel { font-size: 1em; }
   ul li a { font-size: 1em; }
   ul li a:hover { font-size: 1em; }
   ul.tab-list li a:hover { font-size: 1em; }
   ul.tab-list { clear: none;
                 position: relative;
                 float: right;
                 display: block;
                 right: 20px;
                 top: 12px;
                 bottom: 20px; }
   ul.content { float: left; }
   ul.tab-list li { padding: 0px;
                    width: auto; }
   nav { padding-bottom: 10px;}
   img#logo { margin-left: 20px; }
   footer { padding-left: 20px; }
   li a:hover span { display: none; }
 }
 @media only screen and (max-width: 360px) {
   ul.tab-list {  float: none;
                  margin-top: 70px;
                  margin-left: 38px; }
 }
/* for shorter heights */
@media only screen and (min-width: 1220px) and (max-height: 800px) {
   span img { height: 725px;
              width: auto; }
   div#left { width: 500px; }
   div#right { width: auto; }
}
@media only screen and (min-width: 960px) and (max-height: 750px) {
   span img { height: 680px;
              width: auto; }
   div#left { width: 455px; }
   div#right { width: auto; }
}
@media only screen and (min-width: 960px) and (max-height: 700px) {
   span img { height: 640px;
              width: auto; }
   div#left { width: 455px; }
   div#right { width: auto; }
}
@media only screen and (min-width: 960px) and (max-height: 670px) {
   span img { height: 625px;
              width: auto; }
   div#left { width: 455px; }
   div#right { width: auto; }
}
@media only screen and (min-width: 960px) and (max-height: 640px) {
   span img { height: 600px;
              width: auto; }
   div#left { width: 455px; }
   div#right { width: auto; }
}