@import url('https://fonts.googleapis.com/css?family=Aldrich|Kanit|Mina|Orbitron|Rajdhani|Russo+One|Saira|Josefin+Sans|Montserrat|Nunito|Roboto|Source+Sans+Pro|Varela+Round|Bungee+Shad|Ewert|Monoton');

body
{
  background-color:lightskyblue;
  margin:0;
  font-family: 'Saira', sans-serif;
  position:relative;
}
body:after
{
   content:"";
   background-image:url("http://johnsalvetti.com/images/dust_scratches.png");  
   opacity: 0.0;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
   z-index: -1;   
}
a
{
  color:black;
}
#JSLogo
{
    float:right;
    padding-right:10px;
    max-height:100%;
    width:auto;
}
@media only screen and (max-width: 344px) 
{
   #JSLogo
   {
       float:right;
       padding-right:10px;
       max-height:100%;
       width:auto;
       display:none;
   }
}
@media only screen and (max-width: 290px) 
{
   #JSLogo
   {
       float:left;
       padding-left:13px;
       max-height:100%;
       width:auto;
       display:block;
   }
   #siteName
   {
       display:none;  
   }
   .dropdown
   {
       float:right;  
   }
}

#JSLogo:hover
{
     
}
#page
{
  width:490px;
  max-width:90%;
  margin-left:auto;
  margin-right:auto; 
  padding-top:70px;
  padding-left:10px;
  padding-right:10px;
}
.header
{
  font-family: 'Ostrich Sans';
  font-size:45px; 
  color:white;
}
#topbar
{
   background-color:white;
   width:100%;
   padding:0;
   height:45px;
   margin:0;
   margin-bottom:90px;
   box-shadow: 5px 10px 8px #1c6486;
   position:fixed;
}
#navbar
{
   float:left;
   padding-left:40px;
   display:none;
    z-index:1000;
}
#topbar #sitename a
{
    font-size:48px;
    padding-left:20px;
    font-family: 'Ostrich Sans';
    float:left;
    color:lightskyblue;
}
#navbar .link
{
    float:left;
    padding-left:10px;
    padding-right:10px;
    color:black;
    vertical-align:middle;
    padding-top:13px;  
    z-index:1000;
} 
.link a
{
  color:black;
}
a
{
  text-decoration:none;
}

/* Dropdown Button */
.dropbtn {
    background-color: white;
    color: white;
    padding: 10px;
    font-size: 16px;
    border: none;
    margin-left:20px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;

}
.dropbtn:hover
{
  cursor:pointer;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
       right:0px;
    background-color: rgba(0,0,0,0.9);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size:18px;
    font-weight:bold;
    font-family: 'Saira', sans-serif;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover 
{
color:lightskyblue;
background-color:black;

}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: lightskyblue;
}


/* Ostrich Sans */

@font-face {
	font-family: 'Ostrich Sans';
	src: url('css/fonts/ostrich-sans-black.eot');
	src: local('?'), url('css/fonts/ostrich-sans-black.woff') format('woff'), url('css/fonts/ostrich-sans-black.ttf') format('truetype'), url('css/fonts/ostrich-sans-black.svg') format('svg');
	font-weight: 900;
	font-style: normal;
}
@font-face {
	font-family: 'Ostrich Sans';
	src: url('css/fonts/ostrich-sans-bold.eot');
	src: local('?'), url('css/fonts/ostrich-sans-bold.woff') format('woff'), url('css/fonts/ostrich-sans-bold.ttf') format('truetype'), url('css/fonts/ostrich-sans-bold.svg') format('svg');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Ostrich Sans';
	src: url('css/fonts/ostrich-sans-regular.eot');
	src: local('?'), url('css/fonts/ostrich-sans-regular.woff') format('woff'), url('css/fonts/ostrich-sans-regular.ttf') format('truetype'), url('css/fonts/ostrich-sans-regular.svg') format('svg');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Ostrich Sans';
	src: url('css/fonts/ostrich-sans-light.eot');
	src: local('?'), url('css/fonts/ostrich-sans-light.woff') format('woff'), url('css/fonts/ostrich-sans-light.ttf') format('truetype'), url('css/fonts/ostrich-sans-light.svg') format('svg');
	font-weight: 300;
	font-style: normal;
}

/* Ostrich Sans Dashed */

@font-face {
	font-family: 'Ostrich Sans Dashed';
	src: url('css/fonts/ostrich-sans-dashed.eot');
	src: local('?'), url('css/fonts/ostrich-sans-dashed.woff') format('woff'), url('css/fonts/ostrich-sans-dashed.ttf') format('truetype'), url('css/fonts/ostrich-sans-dashed.svg') format('svg');
	font-weight: 500;
	font-style: normal;
}

/* Ostrich Sans Rounded */

@font-face {
	font-family: 'Ostrich Sans Rounded';
	src: url('css/fonts/ostrich-sans-rounded.eot');
	src: local('?'), url('css/fonts/ostrich-sans-rounded.woff') format('woff'), url('css/fonts/ostrich-sans-rounded.ttf') format('truetype'), url('css/fonts/ostrich-sans-rounded.svg') format('svg');
	font-weight: 500;
	font-style: normal;
}

/* Ostrich Sans Inline */

@font-face {
	font-family: 'Ostrich Sans Inline';
	src: url('css/fonts/ostrich-sans-inline-regular.eot');
	src: local('?'), url('css/fonts/ostrich-sans-inline-regular.woff') format('woff'), url('css/fonts/ostrich-sans-inline-regular.ttf') format('truetype'), url('css/fonts/ostrich-sans-inline-regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Ostrich Sans Inline';
	src: url('css/fonts/ostrich-sans-inline-italic.eot');
	src: local('?'), url('css/fonts/ostrich-sans-inline-italic.woff') format('woff'), url('css/fonts/ostrich-sans-inline-italic.ttf') format('truetype'), url('css/fonts/ostrich-sans-inline-italic.svg') format('svg');
	font-weight: normal;
	font-style: italic;
}