/*
	Annette Emily Farah
	Fall 2020
	WEB 2150 WW1 - HTML5 Multimedia
	Instructor: Professor Ashley Herbert
    Textbook: HTML5 Media: Integrating Audio and Video with the Web by Shelly Powers

	Assignment 11: Writing code to create custom video controls using JavaScript and CSS

    Stylesheet for videoCC.html: styles.css

*/


/* ******************************************************
*********************************************************

Styles for Custom Video Controls

*********************************************************
****************************************************** */
#video-container {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    position: relative;
}

#video-controls {
    
    /* position of video controls */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 7px 0;
    width: 80%;
    opacity: 0;
    
    /* time for controls to appear with mouse hover */
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    -ms-transition: opacity .3s;
    transition: opacity .3s;
    
    /* color of video controls */
    background-image: -o-linear-gradient(bottom, rgb(204, 41, 0) 13%, rgb(204, 41, 0) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(255, 214, 51) 13%, rgb(255, 51, 51) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(255, 214, 51) 13%, rgb(255, 51, 51) 100%);
    background-image: -webkit-linear-gradient(to bottom, rgb(255, 214, 51) 13%, rgb(255, 51, 51) 100%);    
    background-image: linear-gradient(to bottom, rgb(204, 41, 0) 13%, rgb(255, 51, 51) 100%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.13, #000),
        color-stop(1, #000)
    );
}

#video-container:hover #video-controls {
    opacity: .9;
}

button {
    background: rgba(255, 255, 255, 0.2);
    border: 0;
    color: #ffd11a;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    margin: 0 12px;
}

button:hover {
    cursor: pointer;
}

#seek-bar {
    width: 360px;
}

#volume-bar {
    width: 60px;
}



/* ******************************************************
*********************************************************

Styles for the different sections: 
html, body, main, and footer.

*********************************************************
****************************************************** */
html {
    background-color: #848c69; 
    background-image: url("../images/background0479.png");
    background-size: 100%;
}

body {
    color: #000;            
    margin: 0 auto;
    padding: 5px 0;  
    font-family: Verdana, Helvetica, sans-serif;
}

main {
    margin: 0 auto;
    padding: 0 0 1px 0;
    border-top: 3px solid #ffeb52;
    border-left: 3px solid #ffeb52;
    border-right: 3px solid #ffeb52;
    width: 60%;
    background-color: #9d955c;
}

h1 {
    font-size: 1.7em;
    text-align: center;
    width: 70%;
    margin: 5% auto 1% auto;
}

h2 {
    font-size: 1.2em;
    text-align: center;
    font-weight: normal;
    width: 70%;
    margin: 0 auto 2% auto;
    padding: 0;
}

video {

    /* basic border */
    border: 1px solid #ccc;

    /* now a shadow */
    -webkit-box-shadow: 0 0 10px #f2ef90;
    box-shadow: 0 0 10px #f2ef90;

    /* centering and sizing video */
    padding: 0;
    margin: 0 auto;
    width: 80%;
    display: block;
}

video:hover, video:focus {

    /* add glow */
    -moz-box-shadow: 0 0 20px #f2ef90;
    -webkit-box-shadow: 0 0 20px #f2ef90;
    -o-box-shadow: 0 0 20px #f2ef90;
    -ms-box-shadow: 0 0 20px #f2ef90;
    box-shadow: 0 0 50px #f2ef90;
    }

.text {
    margin: 0 auto;
    padding: 0;
    width: 80%;
    text-align: center; 
    font-size: 1.2em;
}

.description {
	margin: 0 auto;
	padding: 0 0 20px 0;
	width: 80%;
	text-align: center;
	font-size: .8em;
	line-height: .2em;
}

.source {
    margin: 0 auto;
    padding: 0;
    width: 80%;
    font-size: .8em; 
    text-align: left;  
}

footer {
    margin: 0 auto;  
    padding: 1% 0;
    width: 60%;
    border: 3px solid #ffeb52;
    background-color: #2e585a;  /*#1d4b0c;*/
    color: #f2ef90;
}

footer p  {             
    margin: 0 auto;            
    padding: 0;            
    width: 100%;
    font-size: .8em; 
    text-align: center;
    line-height: 15px;
}

footer a {
    color: #f2ef90;
}

a {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #f00;
}