<!-- Soda Vending Machine App - HTML segment
	Created by Elizabeth Best for WEB115

	NEEDS: JavaScript files 'vending.js' and 'vending_library.js' to function
	USES: CSS for styling and visual effects

	Note: this is not a complete HTML page. Many components are missing, including the document declaration.
		It is intended to be added or embedded into to an existing page.
-->

	<main id="content">
        <h1 class="center">Vending Machine</h1>
        <div class="center">
		<!-- inputs for the user to 'insert' money -->
            <input type="button" value="Dollar" id="dollar" />
            <input type="button" value="Quarter" id="quarter" />
            <input type="button" value="Dime" id="dime" />
            <input type="button" value="Nickel" id="nickel" />
            <input type="button" value="Refund" id="refund" />
        </div>
        <div class="center">
		<!-- input is deceptive, it is actually used for outputting the total dollar amount user inputs -->
            $<input type="text" id="deposit" />
        </div>
        <div class="center">
		<!-- button inputs for user to select their beverage choice -->
            <input type="button" value="Coke" id="coke" class="coke" />
            <input type="button" value="Diet Coke" id="dietcoke" class="dietcoke" />
            <input type="button" value="Mountain Dew" id="dew" class="dew" />
            <input type="button" value="Dr. Pepper" id="pepper" class="pepper" />
            <input type="button" value="Root Beer" id="rootbeer" class="rootbeer" />
            <input type="button" value="Water" id="water" class="water" />
		</div>
        <div class="center">
		<!-- used to display any messages to the user -->
            <span id="message">All products $0.75</span>
        </div>
     </main>				

/** Soda Vending Machine App - CSS stylesheet 
	Created by Elizabeth Best for WEB115

	USED WITH: HTML segment, vending.js, vending_library.js
**/

/* main content area for user interface */
#content {
    font-family: Arial, Helvetica, sans-serif;
    /*width: 35em;*/
    margin: 10px auto;
    padding: 5px 20px;
    background: #FFFFFF;
    border: 1px solid #000000;
}

.center {
    text-align: center;
}

div.center {
    margin-bottom: 0.5em;
}

/* styles for element showing amount of money input */ 
#deposit {
    width: 3.5em;
    text-align: right;
	
/*additional formatting */
    height: 1.5em;
    color: greenyellow;
    background: black;
    font-size: 1.25em;
    font-weight: 700;
    margin-left: 5px;
}

/* styles for the beverage selection buttons */
input[type=button] {
    height: 2.5em;
}

#coke, #dietcoke, #dew, #pepper, #rootbeer, #water {
    height:5em;
    width: 8.3em;
    margin: auto .25em;
}

.disabled {
	color: black;
    background: #828282;
    text-shadow: none;
    text-decoration: line-through;
    font-weight: normal;
}

/* product vending button formatting */

#coke {
	/*padding: 0 1.75em;*/
}

.coke {
    color:white;
    background:red;
    font-weight: 800;
}

.dietcoke {
    color:white;
    text-shadow: 1px 1px 1px red, -1px -1px 1px red, -1px 1px 1px red, 1px -1px 1px red;
}

.dew {
    color:red;
    background: #03A003;
    text-shadow: 1px 1px 1px yellow, -1px -1px 1px yellow, -1px 1px 1px yellow, 1px -1px 1px yellow;
    font-weight: 700;
}

.pepper {
    color:white;
    background:maroon;
}

.rootbeer {
    color: #DADA57;
    background: #864811;
}

#water {
	/*padding: 0 1.15em;*/
}

.water {
    background:lightblue;
}