/* new */ 
/* <link rel="stylesheet" type="text/css" href="https://www.katieandkrishatcher.com/css/style.css" /> */

/* old */
/* <link rel = "stylesheet" href = "https://www.katieandkrishatcher.com/css/desktop.css"> */
/* <link rel = 'stylesheet' media = 'screen and (min-device-width : 320px) and (max-device-width : 480px)' href = "https://www.katieandkrishatcher.com/css/handheld.css"> */
/* <link rel = 'stylesheet' media = 'screen and (min-width: 768px) and (max-width: 1024px)' href = "https://www.katieandkrishatcher.com/css/tablet.css"> */


/*         DESKTOP        */
/* last edited 03.15.2023 */

body{
  border-style:      none;
  border-width:      .25em; 
  border-color:      #C0C0C0;
  border-radius:     1em;
  height:            100%; 
  width:             50em;
  padding-top:       .1em;
  padding-bottom:    .1em;
  padding-left:      0em;
  padding-right:     0em;
  margin-top:        1em;
  margin-bottom:     1em;
  margin-left:       auto;     
  margin-right:      auto;
  background-color:  #FFFFFF; 
  font-size:         medium;
  font-family:       Georgia, Serif;
  color:             #000000;
} 

  header{
    border-style:         none;
    border-width:         .05em;
    border-rfadius:        0em;
    border-color:         #C0C0C0;
    width:                19em; 
    padding-top:          0em;
    padding-bottom:       0em;
    padding-left:         0em;
    padding-right:        0em;
    margin-top:           0.5em;
    margin-bottom:        0em;
    margin-left:          auto;
    margin-right:         auto;
    font-family:          'Indie Flower', cursive;
    font-size:            1.25em;
    text-align:           center;
    vertical-align:       middle;
    column-count:         5;
    column-gap:           0em;
    -moz-column-count:    5;
    -moz-column-gap:      0em;
    -webkit-column-count: 5;  
    -webkit-column-gap:   0em;
  } 	      

#katieHeader{
  border-style:    none;
  border-width:    0em;
  padding-top:     0em;
  padding-bottom:  0em;
  padding-left:    0em;
  padding-right:   0em;
  margin-top:      0em;
  margin-bottom:   0em;
  margin-left:     0em;
  margin-right:    0em;
  color:           #DA1010;
} 

#andHeader{
  border-style:    none;
  border-width:    0em;
  padding-top:     0em;
  padding-bottom:  0em;
  padding-left:    0em;
  padding-right:   0em;
  margin-top:      0em;
  margin-bottom:   0em;
  margin-left:     0em;
  margin-right:    0em;
  color:           #000000;
} 

#krisHeader{
  border-style:    none;
  padding-top:     0em;
  padding-bottom:  0em;
  padding-left:    0em;
  padding-right:   0em;
  margin-top:      0em;
  margin-bottom:   0em;
  margin-left:     0em;
  margin-right:    0em;
  color:           #1A10DA;
} 

#hatcherHeader{
  border-style:    none;
  border-width:    0em;
  padding-top:     0em;
  padding-bottom:  0em;
  padding-left:    0em;
  padding-right:   0em;
  margin-top:      0em;
  margin-bottom:   0em;
  margin-left:     0em;
  margin-right:    0em;
  color:           #000000;
} 

#comHeader{
  border-style:    none;
  border-width:    0em;
  padding-top:     0em;
  padding-bottom:  0em;
  padding-left:    0em;
  padding-right:   0em;
  margin-top:      0em;
  margin-bottom:   0em;
  margin-left:     0em;
  margin-right:    0em;
  color:           #000000;
} 

nav{
  border-style:         none;
  border-width:         .1em;
  border-radius:        0em;
  border-color:         #C0C0C0;
  width:                25em; 
  padding-top:          0em;
  padding-bottom:       0em;
  padding-left:         0em;
  padding-right:        0em;
  margin-top:           0.3em;
  margin-bottom:        0em;
  margin-left:          auto;
  margin-right:         auto;
  font-size:            1em;
  text-align:           center;
  vertical-align:       middle;
  column-count:         4;
  column-gap:           0em;
  -moz-column-count:    4;
  -moz-column-gap:      0em;
  -webkit-column-count: 4;  
  -webkit-column-gap:   0em;
}

#miscNav{
  color: #767676;
}

#miscDropDown{
  background-color: #FFFFFF;
  border:           .1em solid black;
  padding:          .1em .1em .1em .1em;
  visibility:       hidden;
  position:         absolute;
  /*
  left:             600px;
  top:              85px;
  */
  z-index:          1;
}

#picsNav{
  color: #767676;
}

#picsDropDown{
  background-color: #FFFFFF;
  border:           .1em solid black;
  padding:          .1em .1em .1em .1em;
  visibility:       hidden;
  position:         absolute;
  /*
  left:             425px;
  top:              85px;
  */
  z-index:          1;
}

  main{
    border-style:      none;
    border-width:      .1em;
    border-radius:     0em;
    border-color:      #C0C0C0;
    padding-top:       0em;
    padding-bottom:    0em;
    padding-left:      0em;
    padding-right:     0em;
    margin-top:        1em;
    margin-bottom:     0em;
    margin-left:       1em;     
    margin-right:      1em;
    font-size:         1em;
  }

  footer{
    border-style:    none;
    border-width:    .1em; 
	border-color:    #C0C0C0;
	border-radius:   0em;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      .25em;
	margin-bottom:   .25em;
	margin-left:     1.4em;
	margin-right:    1.4em;
	font-size:       0.75em;
	text-align:      center;
  }	

  img{
    border:none;
  }

  article{border-style:    none;
          padding-top:     0em;
          padding-bottom:  0em;
          padding-left:    0em;
          padding-right:   0em;
          margin-top:      0em;
          margin-bottom:   0em;
          margin-left:     0em;
          margin-right:    0em;
          font-size:       0.9em;
          text-align:      left;}

  #indexDateTime{
    border-style:         none;
    border-width:         0.1em;
	border-radius:        0em;
	border-color:         #C0C0C0;
	width:                25em; 
	padding-top:          0em;
	padding-bottom:       0em;
	padding-left:         0em;
	padding-right:        0em;
	margin-top:           0.5em;
	margin-bottom:        0em;
	margin-left:          auto;
	margin-right:         auto;
	font-size:            .75em;
	text-align:           center;
	vertical-align:       middle;
	column-count:         8;
	column-gap:           0em;
	-moz-column-count:    8;
	-moz-column-gap:      0em;
	-webkit-column-count: 8;  
	-webkit-column-gap:   0em;
  } 

  .indexDateTimeColumns{
	border-style:      none;
	border-width:      0.1em;
	padding-top:       0em;
	padding-bottom:    0em;
	padding-left:      0em;
	padding-right:     0em;
	margin-top:        0em;
	margin-bottom:     0em;
	margin-left:       0em;
	margin-right:      0em;
  }	

  #introduction{
    border-style:    none;
    padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     0em;
	margin-right:    0em;
	font-size:       1em;
	text-align:      center;
  }

  #subject{
	border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0.5em;
	margin-left:     0em;
	margin-right:    0em;
	font-size:       1em;
	text-align:      center;
  }

  #about{
    border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     8em;
	margin-right:    8em;
	font-size:       1em;
	text-align:      justify;
  }  

  #index{
	border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     auto;
	margin-right:    auto;
	font-size:       1em;
	text-align:      center;
  }

  #pictures{
	border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     auto;
	margin-right:    auto;
	font-size:       1em;
	text-align:      center;
  }

  #jackson{
    border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     auto;
	margin-right:    auto;
	font-size:       1em;
	text-align:      center;
  }

  #jFirstPictureShoot{
    border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     auto;
	margin-right:    auto;
	font-size:       1em;
	text-align:      center;
  }

  #slideShow{
	border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     auto;
	margin-right:    auto;
	font-size:       1em;
	text-align:      center;
  }

  #pre2013SlideShow{
	border-style:    none;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     auto;
	margin-right:    auto;
	font-size:       1em;
	text-align:      center;
  }

  #leftColumn{
	border-style:    none;
	width:           25em;
	float:           left;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     0em;
	margin-right:    0em;
  }

  #rightColumn{
	border-style:    none;
	width:           25em;
	float:           right;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.5em;
	margin-bottom:   0em;
	margin-left:     0em;
	margin-right:    0em;
  }

  .leftColumnJ{
	border-style:    none;
	border-width:    .1em; 
	height:          22em; 
	width:           48%;
	float:           left;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      2em;
	margin-bottom:   2em;
	margin-left:     0em;
	margin-right:    0em;
	text-align:      center;
  }

  .rightColumnJ{
	border-style:    none;
	border-width:    .1em; 
	height:          22em; 
	width:           48%;
	float:           right;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      2em;
	margin-bottom:   2em;
	margin-left:     0em;
	margin-right:    0em;
	text-align:      center;
  }

  #leftColumnMisc{
	border-style:    none;
	border-width:    .1em; 
	height:          22em; 
	width:           51%;
	float:           left;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.9em;
	margin-bottom:   0em;
	margin-left:     0em;
	margin-right:    0em;
	text-align:      right;
  }

  #rightColumnMisc{
	border-style:    none;
	border-width:    .1em; 
	height:          22em; 
	width:           45%;
	float:           right;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0.9em;
	margin-bottom:   0em;
	margin-left:     0em;
	margin-right:    0em;
	text-align:      left;
  }

  h3{
    text-align:      center;
  }

  #leftColumnBlog{
	border-style:    none; 
	border-width:    0.1em; 
	border-radius:   0em;
	border-color:    #C0C0C0;
	width:           70%; /* 35em; 610px */
	float:           left;
	padding-top:     .1em;
	padding-bottom:  0em;
	padding-left:    1em;
	padding-right:   1em;
	margin-top:      .1em;
	margin-bottom:   .25em;
	margin-left:     0em;
	margin-right:    0em;
	font-size:       1em;
	text-align:      left;
  }

  #rightColumnBlog{
	border-style:    none;
	border-width:    0.1em; 
	border-radius:   0em;
	border-color:    #C0C0C0;
	width:           25%; /* 8em; 146px */
	float:           right;
	padding-top:     .25em;
	padding-bottom:  .5em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      .25em;
	margin-bottom:   .25em;
	margin-left:     0em;
	margin-right:    0em;
	font-size:       1.2em;
	text-align:      center;
  }

  #blogComments{
	border-style:    none;
	border-width:    .1em;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      1em;
	margin-bottom:   1em;
	margin-left:     0em;
	margin-right:    0em;
	font-size:       0.75em;
	text-align:      left;
  }                                  

  #blogCommentInputBox{
	border-style:    solid;
	border-width:    .1em;
	border-radius:   1em;
	border-color:    #C0C0C0;
	padding-top:     0em;
	padding-bottom:  0em;
	padding-left:    0em;
	padding-right:   0em;
	margin-top:      0em;
	margin-bottom:   0em;
	margin-left:     0em;
	margin-right:    0em;
	font-size:       0.8em;
	text-align:      center;
  }

  #ads{
	border-style:       none;
	border-width:       0.1em;
	border-radius:      0em;
	border-color:       #C0C0C0;
	padding-top:        0em;
	padding-bottom:     0em;
	padding-left:       0em;
	padding-right:      0em;
	margin-top:         2.5em;
	margin-bottom:      0em;
	margin-left:        1.7em;
	margin-right:       1.7em;
	font-size:          0.6em;
	color:              #C0C0C0;
	text-align:         center;
	clear:              both;
  }

  #pictureFrame{
    border-style:  solid;
    border-width:  0.1em; 
    border-color:  #C0C0C0;
    border-radius: 0.5em;
  }


  #pictureFrameIndex{
	border-style:      solid;
	border-width:      0.1em; 
	border-color:      #C0C0C0;
	border-radius:     0.5em;
	float:             none;
	clear:             both;
	height:            20em; 
	width:             30em;
  }

  #pictureFrameAbout{
	border-style:      solid;
	border-width:      0.1em; 
	border-color:      #C0C0C0;
	border-radius:     0.5em;
	margin-left:       auto;
	margin-right:      auto;
	height:            23em; 
	width:             31.75em;
  }

  #pictureFrameMisc{
	border-style:      solid;
	border-width:      0.1em; 
	border-color:      #C0C0C0;
	border-radius:     0.5em;
	height:            20em; 
	width:             15em;
  }

  #randomPicture{
    border-style:  solid;
    border-width:  0.1em; 
    border-color:  #C0C0C0;
    border-radius: 0.5em;
    height:        20em; 
    width:         30em;
  }

.rightAlign{
  text-align:   right;
}

.leftAlign{
  text-align:    left;
}

.leftIndent{
  text-align:   left;
  text-indent:  8em;
}

.centerAlign{
  text-align:  center;
}

.leftMargin{
  text-align:   left;
  margin-left:  5em;
}

.workoutColumn{
  width:           8em;
  float:           left;
  margin:          0;
  font-size:       .9em;
  text-align:      center;
  margin-left:     auto;
  margin-right:    auto;
}

.pokerColumn{
  width:           7.5em; 
  float:           left;
  margin:          0;
  font-size:       .75em;
  text-align:      center;
}

.pictureFrame{
  border-style:  solid;
  border-width:  0.1em; 
  border-color:  #C0C0C0;
  border-radius: 0.25em;
}

.pictureFrameJackson{
  border-style:  solid;
  border-width:  0.1em; 
  border-color:  #C0C0C0;
  border-radius: 0.5em;
}

  a.links:link{
  text-decoration:   none; 
  font-size:         1em;
  font-family:       Georgia, Serif;
  color:             #767676;
} 

  a.links:visited{
  text-decoration:   none; 
  font-size:         1em;
  font-family:       Georgia, Serif;
  color:             #767676;
} 

  a.links:hover{
    text-decoration:   none; 
    font-size:         1em;
    font-family:       Georgia, Serif;
    color:             #1A10DA;
} 
  
  a.links:active{
    text-decoration:   none; 
    font-size:         1em;
    font-family:       Georgia, Serif;
    color:             #767676;}

a:link{
  text-decoration:      none;
} 
 
a:visited{
  text-decoration:   none;
} 

a:hover{
  text-decoration:     none;
} 
  
a:active{
  text-decoration:    none;
}


.rotateimg90 {
  -webkit-transform:rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  border-style:  solid;
  border-width:  0.1em; 
  border-color:  #C0C0C0;
  border-radius: 0.5em;
}

/*       HANDHELD       */
/* last edited 12.09.16 */

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

  body {
    width:     98%;
  }
  
  #katieHeader{
    font-size: 1.25em;
  }
  
  #andHeader{
    font-size: 1.25em;
  }
  
  #krisHeader{
    font-size: 1.25em;
  }
  
  #hatcherHeader{
    font-size: 1.25em;
  }
   
  #comHeader{
    font-size: 1.25em;
  }
  
  #miscDropDown{
    top: 120px;
  }
  
  #picsDropDown{
    top: 120px;
  }
  
  #blogNav{
    font-size: 1.5em;
  }
  
  #picsNav{
    font-size: 1.5em;
  }
  
  #aboutNav{
    font-size: 1.5em;
  }
  
  #miscNav{
    font-size: 1.5em;
  }
  
  article[id|="blog"]{
    font-size: 1.5em;
  }
  
  p[class~="about"]{
	font-size: 1.25em;
  }  
  
  footer{
    font-size: 1.5em;
  }
  
  .workoutColumn{
    width:           9em;
    font-size:       1em;
  }

}


/*        TABLET        */
/* last edited 12.09.16 */

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

  body {
    width:     98%;
  }

  header{
    font-size:     2.25em;
  }

  nav{
    font-size:     1.75em;
  }

  #introduction{
    font-size:     1.75em;
    margin-top:    1em;
  }

  #indexDateTime{
    font-size:     1.5em;
  }

  #pictureFrameIndex{
    height:     26em; 
    width:      39em;
  }

  #leftColumnBlog{
    font-size:        2em;
  }

  #rightColumnBlog{
    width:          21%;
    margin-top:     1em;
  }

  select{
    font-size:     1em;
  }

  input{
    font-size:     1em;
  }

  #pictureFrameAbout{
    height:     11em; 
    width:      14em;
  }

  #about{
    font-size:     2em;
  }  
  
  #miscDropDown{
    top: 120px;
  }
  
  #picsDropDown{
    top: 120px;
  }
  
  .workoutColumn{
    width:           9em;
    font-size:       1em;
  }
  
}