@charset "UTF-8";
/* CSS Document */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #000000;
    vertical-align: baseline;
    background: transparent;
    position: inherit;
}
html, body {
    width: 100%;
    height:100%;
    position:relative;
}
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color:#aaaabd;

}


.container, main {
	display:block;
	height:300px; width:200px;
background-color:#c5d7df;
	margin:0 auto; 
       
}

.supplies  {
	display:block;
	height:300px; width:200px;

	margin:0 auto; 
       
}
.homepage {display:block;
	height:300px; width:200px; background-image:url(..images/sidestixbg.png);
	margin:0 auto;
overflow-y 
z-index:-1;
}

li {list-style-position: inside;
padding:5px 5px;

}
#homepagetitle {display.block;
                          margin-top:10px;
                          width:125px;
                          position: relative;
                          float:right;
z-index:50;
}

h1 {padding: 7px 5px;
font-family: 'Francois One', sans-serif;
               color:#000099;
               
}



p {padding: 7px 5px;
}

#graphic {

height:150px; width:200px; 
position:absolute;
margin-top:52px;
z-index:1;


overflow-y;

}

#title {height:50px; width:200px; 
position:absolute;
z-index:1;
top: 0;}



#instruction {height:95px; width:200px;
position:absolute;
z-index:1;
padding-top:2px;
bottom: 0;}

  .button-start,
        .button-supply,
        .button-back,{
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-start {
            background: rgb(28, 184, 65); /* this is a green */
 position: absolute;
    bottom: 5px;
    right: 5px; 
z-index:100;      
 }

 .button-back {
            background: rgb(202, 60, 60); /* this is a maroon */
        position: absolute;
    bottom: 5px;
    left: 5px;
z-index:100;
 }

.button-supply {
              background: rgb(255, 255, 0);  /* this is a yellow */
 position: absolute;
    bottom: 5px;
    left: 5px;
z-index:100;
}
.container {
	margin-top:100px;
}


#home .graphic  {
display: block;
width:190px;
height:135px;
color:"#000000";
z-index:100}

#home .container {background-image:url(../images/sidestixbg.png);

                            
	}
#supplies .container {background-color:#c5d7df;
margin: 0 auto;
	
}