#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:1px;
}
#nav {
    line-height:30px;
    /*background-color:#eeeeee;*/
	background-color:black;
	color:white;
    /*width:100%;*/
    float:left;
	margin:0;
    padding:1;
}
#section {
	background-color:black;
	color:white;
    width:85%;
	font-family: "Times New Roman", Times, serif;
    float:left;
	/* padding:2px; */
	top:0;
	margin:0;
    padding:0;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

#parent{
    /*overflow:hidden;*/
	color:white;
    background:black;
    position:relative;
	width:15%;
}
.left{
    padding-right:1px;
}
.right{
    background:red;
    width:10px;
    position:absolute;
    height:100%;
    top:0;
    right:0;
}
body{
    margin:0;
    padding:0;
	background-color:black;
	width: 100%; 
	font-size: 170%;
    /*font-size: 1.5vw;*/
	/*overflow:hidden;*/
}
h1{
    margin:0;
	text-align: center;
	background: url('Pics/Empty.png');
	font-size: 2em;
}
h2{
	font-family: "Times New Roman", Georgia, "Droid Serif", Times, serif;
    margin:0;
	padding:0,0,0,0;
	background: url('Pics/Empty.png');
	font-size: 1.5em;
}
h4, h5{
    margin:0;
	padding: 0px 10px 0px 0px; 
	background: url('Pics/Empty.png');
}

span {
	background: url('Pics/Empty.png');
}

h5{
	color: #6699ff;
}

a{
	color: #ccccff;
}
.project-details {
	background: url('Pics/Empty.png');
    display: none;
}
/*p {
	background:#000000;
}*/
/*html, p { width: 100%; display: block; margin: 0px; padding: 0px; }*/
p { background: url('Pics/Empty.png'); width: 100%; background-color:black; margin: 0px; padding: 0px 5px 0px 0px; }



/*
look at the weird glitch on the 6th button. something to do with color vs background-color. or did i fuck up?
*/

*, *:before, *:after {
   -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
}
/*body {
  font-family:'Helvetica', sans-serif; 
}*/


/* Button 0 */


.button-wrap {
  width: 160px;
  margin: 40px auto 0;
  cursor: pointer;
}
.button-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.button-switch {
  position:relative;
  left:0px;
  width: 74px;
  height: 74px;
  border:solid 22px;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.button-active .button-switch { left:80px; }
.button-on, 
.button-off {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:15px;
  font-size:2.4em;
  font-weight:bold;
}
.button-on { margin-left:110px; }
.button-off { margin-left:30px; color:#dd2222; }
.button-active .button-off { color:#fff; }
.button-active .button-on { color:#22dd22; }
.button-active .button-bg { background-color:#000; }

/* BUTTON 1 */


.one .button-wrap {
  width: 340px;
  margin: 4px 0 0;
  cursor: pointer;
  font-size: 16px;
}
.one .button-bg {
  width: 100%;
  height: 100%;
  /*background-color: #111111;*/
  background-color: #252525;
  border-radius: 40px;
  padding: 3px;
  color:#fff;
  transition:all 0.2s ease;
}
.one .button-switch {
  position:relative;
  left:0px;
  width: 170px;
  height: 54px;
  border:solid 6px;
  border-radius: 36px;
  transition:all 0.2s ease;
}
.one .button-active .button-switch { left:163px; }
.one .button-in, 
.one .button-out {
  position:absolute; 
  transition:all 0.2s ease;
  padding-top:16px;
  font-size:1.1em;
  text-transform:uppercase;
  font-weight:bold;
}
.one .button-in { margin-left:225px; }
.one .button-out { margin-left:25px; color:#ddff22; }
.one .button-active .button-out { color:#fff; }
.one .button-active .button-in { color:#22dd22; }
.one .button-active .button-bg { background-color:#111111; }