/* Place your CSS styles in this file */

/* large screen format*/
* {
    box-sizing: border-box;
}

	/* test update process*/

body {
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11pt;
	line-height: normal;
}
	/* both these boxes only work correctly in the content section. who knows why!*/
#PostIt {
 background: yellow;
 box-shadow: 10px 10px 5px grey;
  padding: 10px; 
  width: 100%;
	height: auto;  }

#blueBox {
  width: 100%;
  height: auto;  
  padding: 15px;
  background-color: lightskyblue;
  width: 100%;
  height: auto;  

}

#HolyPurple {
 background: #911A7E ;	
color: #FFF;
 box-shadow: 10px 10px 5px grey;
  padding: 10px; 
  width: 100%;
	height: auto;  }	
	
#HolyPurple a:link {color: #00ffff;}
	
.headerLeft {
   
     float: left;
    width: 25%;
	padding: 20px;
	height: 100px;	
}
.headerLeft img{
    width: 100%;
    max-width: 250px;
    height: auto;
    padding: 1px;
	 margin: 0;
}
	
	
.headerRight {
    padding: 20px;
	text-align: left;
     float: left;
    width: 75%; 
	height: 100px;
  
}	
	/* Clear floats after the HEADERS */
	.row:after {
    content: "";
    display: table;
    clear: both;
}
	/* style the navigation lists*/
	/* style the navigation lists*/
ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #000099;
    border: 1px solid #555;
}

ul.nav li a {
    display: block;
    color: #FFF;
	background-color: #000099;
    padding: 8px 16px;
    text-decoration: none;
}

ul.nav li {
    text-align: left;
    border-bottom: 1px solid #911A7E;
}

ul.nav li:last-child {
    border-bottom: none;
}

ul.nav li a.active {
    background-color: #911A7E;
    color: #FFF;
}

ul.nav li a:hover:not(.active) {
    background-color: #0066FF;
    color: #FFF;
}
/* comment */
	


/* Create three unequal columns that floats next to each other */
.sidebar1 {
    float: left;
    width: 25%;
    padding: 15px;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #009;
}
.content {
    float: left;
    width: 50%;
	height: auto
    padding: 15px;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #009;
}
	
	
	
	
/* use w3schools gallery code*/
div.gallery {
    border: 1px solid #ccc;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 50%;
}

	
	.sidebar2 {
    float: left;
    width: 25%;
    padding: 15px;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #009;
	
}
	.sidebar2 img{
    width: 100%;
    max-width: 250px;
    height: auto;
    padding: 10px;
	 margin: 0;
}
	/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.footer {
 
    width: 100%;
	height: 20px;
    padding: 5px;
	background-color: #ffffff;
	color: #922884;
	font-weight: bold;
	text-align: center;
	border-top-width: medium;
	border-top-style: solid;
	border-top-color: #009;

	
	
}
/* Responsive layout - for tablets */
	
	@media screen and (max-width: 800px)	{
	
	h2 { 
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
	.headerLeft {
    width: 30%;
	height:auto
  	
}

.headerRight {
    
    width: 70%;
	height: auto
	padding: 15px;
	text-align: center

}	
	
	.sidebar1 {
        width: 30%;
		height:auto;
		
		

    }
.content {
     width: 70%;
	height:auto;
	padding: 15px;
    }

	 .responsive {
        width: 50%;
    }
	.sidebar2 {
        width: 100%;
	padding-left: 75px;
	padding-right: 75px;
    }
.sidebar2 img{
    width: 50%;
	height:auto;
   	border:0;
	}	
	
	.sidebar2 p {
			display:inline;
			/*This makes the images which dreamweaver automatically puts inside <p> tags not go to a new line*/
		}
		
	
	
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  
	
/* change h2 to be the same size as h3 to prevent heading looking ugly */
	h2 { 
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
	.headerLeft {
    
    width: 100%;
	  padding-left: 50px;
	  padding-right: 50px;
	 
	 
 /*this padding effectively centres the image on the small screen*/
}

.headerRight {
    
    width: 100%;
	height: auto
	padding: 15px;
	text-align: center

}	
	
	.sidebar1 {
        width: 100%;
		border:none;
		
		
		
    }
.content {
        width: 100%;
	padding: 15px;
    }

	 .responsive {
        width: 100%;
    }
	.sidebar2 {
        width: 100%;
	padding-left: 75px;
	padding-right: 75px;
    } 
	.sidebar2 img{
    width: 100%;
    height: auto;
   	
		}	
	.sidebar2 p {
			display:block;
		/*This makes the images which Dreamweaver automatically puts inside <p> tags behave as originally expected and now go to a new line*/
		}
	}