body
{ font-family: Arial, Helvetica, sans-serif;
  color: #aaaaaa;
  font-size: 28px;
  background-color: #222222;
  margin: 30px 30px 30px 30px;
  padding: 0px 0px 0px 0px;

}

 /* unvisited link */
a:link {
  font-family: Arial, Helvetica, sans-serif;
  color: #444499;
  text-decoration: none;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

/* visited link */
a:visited {
  font-family: Arial, Helvetica, sans-serif;
  color: #555555;
  text-decoration: none;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

/* mouse over link */
a:hover {
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  text-decoration: underline;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

/* selected link */
a:active {
  font-family: Arial, Helvetica, sans-serif;
  color: blue;
  text-decoration: underline;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
} 



p
{ font-family: Arial, Helvetica, sans-serif;
  color: #aaaaaa;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 20px 0px;
}

h1, h2, h3, h4, h5, h6 
{ font: normal 140%  helvetica, arial, sans-serif;
  color: #dddddd;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;

}

h2
{ font: normal 90% helvetica, arial, sans-serif;
  color: #33ff33;
  padding: 15px 0 5px 0;}

h3
{ font: normal 120%  helvetica, arial, sans-serif;}

h4, h5, h6
{ margin: 0;
  padding: 0 0 0px 0;
  font: normal 100% helvetica, arial, sans-serif;
  color: #B60000;}

h5, h6
{ font: italic 85% helvetica, arial, sans-serif;
  color: #888;}

h6
{ color: #362C20;} 
  
#site_content
{ 
  max-width: 700px ;
  margin: 15px;
  float:left; 

  margin: 30px ;
  padding: 5px 0 0 0px;

  border-bottom: 0;
  display:block;
  color: #3333ff;
} 

#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

#content
{ text-align: left;
  font-size: 18px;
  padding: 15px 0 10px 0;
  margin: 15px;

}

#content ul
{ margin: 2px 0 12px 0px;

}

#content ul li
{ list-style-type: none;
  background: url(bullet.png) no-repeat;
  margin: 10px 0 2px 0; 
  padding: 0 0 4px 25px;
  float:left; 
  margin:3px;
  line-height: 1.5em;}
                                                       
h7 {
    display:inline;
}

h7:after {
    content:"\a";
    white-space: pre;
}

.menu {
    text-align: center
}
  
.header {
    background-color: #229922;
    margin: 0 auto;
    color: #339933;
    display:block;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
    height:5px;
}



.header img {
    width:100%;
    border: 0;
    padding: 0 15px 0 0;
}

#detail
      { 
        display:block; 
        width: 250px;
        position: relative;
        top: 20px;

     }


#infill
      { 
        display:block; 
        width: auto;
        position: relative;
        top: 85px;
        text-align: center;
     }


/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
        text-align: center
	padding:0;
	position: absolute;

}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;

}

/*Style for menu links*/
li a {
	display:block;
	min-width:130px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	background: #707070;
	text-decoration: none;

}

/*Hover state for top level links*/
li:hover a {
	background: #004444;
}

/*Style for dropdown links*/
li:hover ul a {
	background: #909090;
	color: #ffffff;
	height: 40px;
	min-width:100px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: #ffbb00;
	color: #004444;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #55ff55;
	text-align: center;
	padding: 15px 0;
	display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}




/*Responsive Styles*/

@media screen and (max-width : 700px){
	/*Make dropdown links appear inline*/
	ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	ul li, li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}




@media screen and (max-width: 700px) {
	  .header {
	  height:30px;
	  }
}	  


@media screen and (max-width: 700px) {
	  #site_content {
	    display: block;
            position: relative;
            top: 0px;
            left: 10px;
	    margin: 15px;
	  }
}

@media screen and (max-width: 700px) {
#content
	{ text-align: left;
	  display:block;	
	  font-size: 18px;
	  padding: 15px 0 10px 0;
	  visibility: visble;
          }
}

@media screen and (max-width: 700px) {
	  #content ul
	{ margin: 2px 0 12px 0px;
	  display:block;
	  visibility: visble;}
}

@media screen and (max-width: 700px) {
	#content ul li
	{ list-style-type: none;
	  background: url(bullet.png) no-repeat;
	  margin: 10px 0 2px 0; 
	  padding: 0 0 4px 25px;
	  visibility: visble;
	  display:block;
	  line-height: 1.5em;}
}