/* Blonde Guy website style sheet
   Mar 1, 2019
*/

/* rtable class for displaying table of sold computers */
.rtable table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
.rtable tr:nth-of-type(odd) { 
  background: #eee; 
}
.rtable th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
.rtable td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

/* rtable class modified for iPhone */
@media screen and (max-width: 600px)  {

        /* Force table to not be like tables anymore */
.rtable table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
/* Hide table headers (but not display: none;, for accessibility) */
.rtable thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
.rtable	tr { border: 1px solid #ccc; }
	
.rtable	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
.rtable	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
.rtable	td:nth-of-type(1):before { content: "Name"; }
.rtable	td:nth-of-type(2):before { content: "Date"; }
.rtable	td:nth-of-type(3):before { content: "System"; }
.rtable	td:nth-of-type(4):before { content: "Description"; }

}

#banner {
    background-image: url(banner.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-color: white;
    height: 240px;
}

body {
  font-family : verdana, Helvetica, Arial, sans-serif;
}
a:link {
  text-decoration : none;
  color : black;
  font-weight : bold;
}
a:active {
  text-decoration : none;
  color : red;
  font-weight : bold;
}
a:visited {
  text-decoration : none;
  font-weight : bold;
}
a:hover {
  color : red;
}

img {
  max-width : 100%;
}

.bodynav a {
    display: inline-block;
    border: 2px solid #248CD8;
    margin: 0 0.2rem 0.2rem 0;
    padding: 0.5rem 1.0rem;
    text-decoration: none;
    -webkit-transition: 0.25s ease;
    transition: 0.25s ease;
}
.bodynav a:link {
  text-decoration : none;
  color : #248CD8;
  font-weight : bold;
}
.bodynav a:active {
  text-decoration : underline;
  color : red;
  font-weight : normal;
}
.bodynav a:visited {
  text-decoration : underline;
  font-weight : normal;
}
.bodynav a:hover {
    background: #23a7de;
    color: #fff;
}

ul {
  list-style-image : url(bgSmallBullet.gif);
}

/* class topnav for blonde guy toolbar */
 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page (was: 4CAF50) */
.active {
  background-color: #248CD8;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width:1111px) {
        .topnav a {
          padding: 14px 11px;
          font-size: 15px;
        }
} 

@media screen and (max-width:960px) {
        .topnav a {
          padding: 15px 8px;
          font-size: 12px;
        }
} 

@media screen and (max-width:750px) {
        .topnav a {
          padding: 15px 16px;
          font-size: 9px;
        }
} 

@media screen and (max-width:600px) {
        .topnav a {
          padding: 14px 16px;
          font-size: 17px;
        }
}

/* used by contact page to combat spammers */
.antispam { display:none;}


/* sidebar navigation: table of contents for Suntan Special user manual */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
}

.sidenav a {
  text-decoration: none;
  display: block;
  transition: 0.3s;
  font-weight: normal;
}

.sidenav ul {
  list-style-image : none;
  list-style-type: none;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav a {font-size: 18px;}
}


/* printing */
@media print {
    /* print styles go here */
    .topnav {
        display : none;
    }
    body {
        font-size: 12px;
    }
    /* enable printing urls after links by setting <div id="main"
       use this for only external links:
       #main a[href^="http://"]:after, a[href^="ftp://"]:after {
    */
    #main a:after {
        content: " (" attr(href) ")";
        color: blue;
        font-size: small;
        font-weight: normal;
    }
}
