/*Template is "Busy Generic" by EGGRAMEN*/
/**
  {
	box-sizing: border-box;
  }*/
  
body 
  {
    margin: 0;
	  font-family: "Bookman Old Style";
	  color: MidnightBlue;
	  background-color: LightCyan;
  }
  
h1, h2, h3
  {
	  color: Maroon;
	  font-weight: bold;
	  font-family: Calibri;
  }
  
hr
  {
	  color: MidnightBlue;
  }
  
blockquote
  {
    background: BlanchedAlmond;
    color: Maroon;
	  font-style: italic;
	  border-left: 3px solid #A52A2A;
	  border-radius: 0 3px 3px 0;
	  padding: 0.5em 0.5em 0.5em 1em;
	  margin: 1em;
  }
  
.header
  {
	  background-color: PaleGreen;
	  height: 100px;
  }
  
.title
  {
	  background-color: MidnightBlue;
	  height: 30px;
	  padding: 5px;
	  margin: 0px;
  }
  
.title-text h1
  {
	  color: White;
	  padding: 0;
	  margin-top: -5px;
  }
  
/*For links.*/  
.navbar
  {
    height: 20px;
    width: 100%;
  }
  
/*Navigation links.*/
.links ul 
  {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
.links li 
  {
    display: inline-block;
  }

/*Some fancy code for fun, to add special characters around the navigation links. Change content to "" if you don't want these.*/
.links li:before 
  {
    content: "|";
  }
  
.links li:after 
  {
    content: "|";
  }
  
.links .last:after 
  {
    content: "|";
  }
  
.links li:before, .links li:after 
  {
    letter-spacing: 0.1em;
  }
  
/*Everything goes inside here.*/
.wrapper 
  {
    width: 900px;
    margin: 0 auto;
  }
  
/*Container for the sidebar*/ 
.side-wrapper
  { 
    width: 230px;
	  float: left;
	  margin-left: 50px;
  }
  
.footer, .links, .box 
  {
    margin-top: 10px;
  }
  
.title-text, .links, .footer
  {
    text-align: center;
  }  
  
/*Basic box code that is used for all content boxes on the page.*/
.box 
  {
    padding: 0.5em 1em;
    border: 3px solid #191970;
	  border-radius: 0.5em;
	  background: White;
  }
  
/*Goes inside the box class. Not given any style by default, but can be used for stuff like fancy borders.*/
.inner 
  {
      
  }
  
/*Prevent image overflow.*/
.box img, .sidebar img 
  {
    max-width: 100%;
    height: auto;
  }
  
/*This is where the title, navbar, and main content all go.*/
.main-wrapper 
  {
    margin-left: 15px;
  }
  
/*Two columns by default. The "single-column" class can be added to make it one column.*/
.main 
  {
    columns: 2;
    column-gap: 25px;
  }
  
/*Make sure boxes don't spread over multiple columns.*/
.main .box 
  {
    display: inline-block;
  }
  
.single-column 
  {
    columns: 1;
  }
  
.footer 
  {
    margin-bottom: 25px;
  }
  
@media(max-width:915px) 
  {
    .wrapper {width: 95%;}
    
    .main-wrapper {width: calc(100% - 225px);}
  }
  
@media (orientation: portrait), (max-width: 480px) 
  {
    .wrapper {width: 100%;}
  
    .main-wrapper, .sidebar, .footer {margin: 0 auto; width: 90%;}
  
    .sidebar {float: none;display: block;}

    .sidebar-image {margin: 0 auto; width: 33%; margin-top:25px;}

    .sidebar .sidebar-image img {width: 100%;}
    
    .footer {margin-bottom: 25px;} 
  }