/* My WEB120 Portal Website Styles */

html {
    background-color:#ccc;
}
section {
    margin-left: 2em;
} 
div.wrapper {
    background-color:#fff;
    overflow:auto;
}

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

.logo {
    color:red;
    margin-left:1%;
    text-shadow:1px 1px #ccc;
    font-size:1.25em;
}
/*START Webcam */

div.dot iframe {
    border:0;
    width:320px;
height:240px;
}


body.webcam {
    margin:0; padding:0; 
}

body.webcam img {
    width:100%;
}

/*CALENDAR To make your calendar legible on smart phone, you'll need to learn how to hide and show two different calendar views. To do this apply the following code 1.in global rules and 2.in phone rule area.*/


/*HIDE AGENDA VIEW CALENDAR - place this in your global rules */

div.embed-container.agenda-view {
    display:none;
    } 



/* START - EMBED RESPONSIVELY STYLES */
div.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  /*  margin: auto;
    max-width: 98%;*/
    max-width: 100%;
} 

div.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* END - EMBED RESPONSIVELY STYLES */

footer {
    text-align: center;
	clear:both;
}

/* START RESPONSIVE STYLES */

/* DESKTOP */
@media all and (min-width:1400px) {
	
   div.wrapper {
		width:80%;
		margin:auto;
	}

    section {
		width:62%;
		float:left;
	}
	
     aside {	
		width:32%;
		float:right;
        padding-right: 1em;
        padding-top: 2em; 
	}
			
	
    img.desktop {
      		float:left;
       		width:60%;
            padding-left: 1em;
   	 }
    
    img.tablet, img.phone {
       		 display:none;
    	}  
    
    /* Change background color of navigation on selected page */
    ul.topnav li a.selected {
        		background-color: #ccc;
        	color:#000;
   	 }
}


/* TABLET */
@media all and (min-width:737px) and (max-width:1399px) {
	
	section {
		width:60%;
		float:left;
	}
	
	aside {	
		    width: 35%;
            float: right;
            padding-right: 1em;
            padding-top: 2em;
	}
	
            img.tablet {
       		width:70%;
            padding-left: 1em;
           }
    
           img.phone, img.desktop {
        		display:none;
           } 
    
    /* Change background color of navigation on selected page */
           ul.topnav li a.selected {
        		background-color: #ccc;
        		color:#000;
          }
  }

/* CALENDAR RULES for PHONE */
@media all and (max-width:860px){
    /* Show Agenda View Calendar */
    div.embed-container.agenda-view {
        display:block;
    }
    /* Hide Month View Calendar */
    div.embed-container.month-view {
        display:none;
    }
}
/* PHONE */
@media all and (max-width:736px) {
    
    img.phone {
       		width:94%;
            padding: 1em;
    }
    
    img.tablet, img.desktop {
        		display:none;
    }  
    aside {
        padding: 1em;
    }

}