/* Joanna'Portal Page Stylesheet */

/* Start GLOBAL RULES */

html{
    background-color: #ffc; /* Red Green Blue */
}

div.wrapper{
    background-color:azure;
    width:80%;
    margin:auto; /* if this is smaller than its parent HTML, then center it within the parent */
    overflow:auto; /* Be aware of any floated objects and expand to include them */
}

.logo {
    color:darkred;
    margin-left:1%;
    text-shadow: 1px 1px #ccc;
    font-size:1.25em; 
}

p {
    margin-left:1em; 
}
  
h1, h2, h3 {
    margin-left:.5em;
}

.pageID {
    color:#f00;
}
a {
    color:crimson;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color:crimson;
    text-decoration: underline;
}

h1>a {
    color:#000;
}

h1>a:hover {
    text-decoration: none;
}
div.gallery {
    text-align:center;
    background-color:cornsilk;
}

figure {
    display: inline-block;
    margin:.25em;
}

div.gallery img {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px 30px 30px 30px;
    border:1px solid #000; /* width style color */
}
/* using on the elements.html page to get one column 100% because not using two columns on that page */
.fullwidth {
    width:100%;
}

/* START EMBEDRESPONSIVELY.COM RULES */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%; 
} 

.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; 
}
/* END EMBEDRESPONSIVELY RULES */

/* HIDE AGENDA VIEW CALENDAR */

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


footer {
    text-align: center;
    clear:both;
}
/* End GLOBAL RULES */

/* Start RESPONSIVE RULE */

/* Desktop */
@media all and (min-width:700px){

    /* left column*/
    section {
        float:left;
        width:65%;
        background-color:antiquewhite;
    }
    
    /* right column*/
    aside {
        float:right;
        width:34%;
        background-color: bisque;
}
}

/* CALENDAR RULES for PHONE */
@media all and (max-width:1100px) {

    /*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:699px) {
    
    div.wrapper {
        width:100%;
    }
    
        }
    
    

/* End RESPONSIVE RULE */