/*   
Theme Name: GG style
Theme URI: http://www.greengraphics.com.au/
Description: Nice theme. 
Author: Nathan
Author URI: http://www.greengraphics.com.au/
Version: 1.5.2
*/





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

/*!     INDEX:                                                                */
/*!         i - Resets, Imports, Shared, Misc                                 */
/*!        ii - Body                                                          */
/*!       iii - Document Colors                                               */
/*!        iv - Typography                                                    */

/*!     STRUCTURE:                                                            */
/*!         1. - Header                                                       */
/*!         2. - Menus                                                        */
/*!         3. - Section                                                      */
/*!         4. - Article                                                      */
/*!         5. - Aside                                                        */
/*!         6. - Footer                                                       */

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





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

/*!     i - Imports, Resets, Shared, Misc                                     */

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





.header:after,
nav ul:after,
.section:after,
.article:after,
.aside:after,
.footer:after,
.clearer:after,
ul[class$='-list']:after,
li[class$='-item']:after,
.wrapper:after {
    clear: both; 
    content: '.'; 
    display: block; 
    height: 0; 
    visibility: hidden;
}




.loading {
    background: url('images/loading.gif') no-repeat center center transparent;
}


.wrapper, .main-menu-wrap {
    margin: 0 auto;
    max-width: 1080px;
    position: relative;
}



input[type="submit"] {
    background: #28905E;
}



ul[class$='-list'] {
    clear: both;
    list-style-type: none;
    margin: 0;
    padding: 0;
}


.third {
    display: inline-block;
    width: 33.334%;
}

/*
.animations iframe {
    float: left;
    height: 300px;
    margin: auto 1% 20px;
    width: 48%;
}
*/

.page-id-1264 iframe {
	border: 1px solid #b3b0b5;
}

.games-link {
    display: block;
    float: left;
    margin: auto 1% 20px;
    width: 48%;
}


.cols {
    display: inline-block;
    margin: 0 0 20px 0;
    padding: 0 2%;
    vertical-align: top;
    width: 50%;
}


.cols-3 { width: 33.334%; }
.cols-4 { width: 25%; }
.cols-5 { width: 20%; }







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

/*!     ii - Body                                                             */

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





body {
    background: #ffffff;
	color: #414042;
	font-size: 62.5%;
	font-family: 'Roboto', Arial, Helvetica, Sans-Serif;
	font-weight: 400;
}





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

/*!     iii - Document Colors                                                 */

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





.color1, a, h1 {
    color: #644e7e;
}

.color2, a:hover, h2 {
    color: #9ccb40;
}

.color3, h3 {
    color: #d5ad1e;
}

.color6 {
    color: black;
}

.color8 {
    color: #414042;
}

.color7, nav a:hover, .footer a {
    color: white;
}


.color9, .kerb-side h1, .kerb-side .section a {
    color: #F68A1F;
}





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

/*!     iv - Typography                                                       */

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





h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', 'Roboto Condensed';
    font-weight: 700;
}


.header {
    font-size: 1.6em;
}


    .header a {
        text-decoration: none;
    }
    
    
    .site-title {
        font-family: 'Roboto Slab', 'Roboto Condensed', 'Roboto', Helvetica, Arial, Sans-Serif;
        font-size: 2em;
        font-weight: 700;
    }




nav.main-menu {
    font-size: 1.6em;
}




.article {
    font-size: 1.6em;
}


    .article h1 {
        font-size: 2em; /* 32px */
    }


    .article h2 {
        font-size: 1.25em; /* 20px */
    }
    
    
    .article h3 {
        font-size: 1.125em; /* 18px */
    }


    
    
.home-box h2 {
    font-size: 2em;
}    
    



.aside {
    font-size: 1.4em;
}


    .aside h1 {
        font-size: 2.142em; /* 30px */
        font-weight: 700;
    }
    
    
    .aside h2 {
        font-size: 1.785em; /* 25px */
        font-weight: 600;
    }
    
    .aside h3 {
        font-size: 1.285em; /* 18px */
        font-weight: 700;
    }


p {
    margin: 0 0 1em 0;
}





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

/*!     STRUCTURE START                                                       */

/*!     1. - Header                                                           */

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




.header {
    background: white;
    position: relative;
    width: 100%;
}


    .top {
        position: absolute; top: 0; left: 0;
        width: 100%;
        z-index: 1;        
    }


    .logo {
        background: white;
        border-radius: 0 0 10px 10px;
        box-shadow: 0 2px 15px 0 rgba(0,0,0,0.3);
        float: left;
        font-family: 'Roboto Slab';
        font-size: 24px;
        font-weight: 700;
        max-width: 400px;
        padding: 20px;
        text-align: center;
    }
    
    
    .social {
        float: right;
        padding: 20px 0;
    }
    
    
        .social-icons {
            display: inline-block;
            margin: 0 0 0 8px;
            width: 35px;
            -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
        }
        
        .social-icons:hover {
	        -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
        }
        
        
    .site-title-wrap {
        position: absolute; bottom: 10%; left: 0;
        width: 100%;
        z-index: 1;
    }
    
    
        .site-title {
            color: white;
            text-shadow: 0 0 10px rgba(0,0,0,0.75);
        }
        
        .site-title:hover {
            color: white;
        }
        
        
    ul.slides {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    
        li.slide {
            display: none; /* Hide til loaded */
            overflow: hidden;
        }
        
        
            li.slide img {
                max-width: none;
                min-height: 500px;
                position: relative; left: 50%;
                -webkit-transform: translateX(-50%);
                   -moz-transform: translateX(-50%);
                        transform: translateX(-50%);
            }





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

/*!     2. - Menus                                                            */

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





.mobile-toggle {
    color: white;
    display: none;
    font-size: 20px;
    padding: 20px;
}


    .mobile-toggle img {
        margin: 0 5px 0;
        vertical-align: -8%;
        width: 20px;
    }




nav {
    background: #644e7e;
    width: 100%;
}

.kerb-side nav { background: #F68A1F; }


    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }


        nav li {
            display: block;
            float: left;
            position: relative;
            text-align: center;
        }


            nav li a {
                color: white;
                display: block;
                padding: 15px 20px;
                text-decoration: none;
                text-transform: uppercase;
            }
            
            nav li:hover > a,
            nav li.current-menu-item > a {
                background: #9ccb40;
            }
            
            .kerb-side nav li:hover > a, .kerb-side nav li.current-menu-item > a { background: #d5ad1e; }
            
            
            nav li.no-link > a {
                cursor: default;
            }
            
            
            nav li > ul {
                background: #644e7e;
                border-radius: 0 0 6px 6px;
                display: none;

                position: absolute; top: 100%; right: 50%;
                text-align: center;
                -webkit-transform: translateX(50%);
                   -moz-transform: translateX(50%);
                        transform: translateX(50%);
                white-space: nowrap;
                z-index: 1;
            }
            
            .kerb-side nav li > ul { background: #F68A1F; } 
            
            
            nav li:hover > ul {
                display: block;
            }
            
            
                nav ul ul > li {
                    width: 100%;
                }
                
                
                nav ul ul li > ul {
                    border-radius: 0 6px 6px 0;
                    top: 0; right: auto; left: 100%;
                    -webkit-transform: none;
                       -moz-transform: none;
                            transform: none;
                }




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

/*!     3. - Section                                                          */

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





.section {
    padding: 0;
    position: relative;
}








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

/*!     4. - Article                                                          */

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





.article {
    float: left;
    padding: 30px;
    width: 70%;
}

.full .article, .article.full {
    width: 100%;
}




    h1.page-title {
        margin: 0 0 15px;
    }
    
    
    
    
    
    
    .home-box {
        background: white;
        border: 5px solid #f1f2f2;
        border-radius: 6px;
        clear: right;
        float: left;
        height: 140px;
        padding: 30px;
        text-align: center;
        width: 33.334%;
    }
    
    
    .lmw-side {
        font-family: 'Roboto Slab';
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }
    
    .lmw-side a {
        color: #644e7e !important;        
        text-decoration: none;
    }
    
    
    
    
    
    
    
    .staff-item, .project-item, .block-item {
        background: rgba(255,255,255,0.5);
        border: 1px solid rgba(0,0,0,0.3);
        border-radius: 4px;
        margin: 0 0 20px 0;
        padding: 20px;
    }
    
    
        .staff-image, .project-image, .block-image {
            border-right: 1px solid rgba(0,0,0,0.3);
            float: left;
            margin: 0 15px 0 0;
            max-width: 280px;
            padding: 0 15px 0 0;
        }
        
        .directors .staff-image {
            border-right: none;
            border-left: 1px solid rgba(0,0,0,0.3);
            float: right;
            margin: 0 0 0 15px;
            padding: 0 0 0 15px;
        }
        
        
        .staff-bio, .project-desc {
            
        }
        
        
        .project-file {
            display: block;
        }
        
        
        
    .event-item {
        background: white;
        margin: 0 0 30px 0;
        position: relative;
    }
    
    
        .event-date {
            background: white;
            border-left: 5px solid #9ccb40;
            border-radius: 3px;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2);
            max-width: 80px;
            padding: 6px 20px;
            position: absolute; top: -8px; left: -8px;            
            text-align: center;
            z-index: 1;
        }
        
            .day {
                display: block;
                font-size: 25px;
                font-weight: 700;
            }
            
            
            .month {
                display: block;
                font-size: 18px;
                font-weight: 300;
                margin: -10px 0 0 0;
                text-transform: lowercase;
            }
            
            
    .event-image {
        margin: 0 2% 0 0;
        width: 23%;
    }
    
    
    .event-desc {
        display: inline-block;
        padding: 20px;
        vertical-align: top;
        width: 75%;
    }

    





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

/*!     5. - Aside                                                            */

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





.aside {
    float: right;
    padding: 30px 0;
    width: 30%;
}


    .side-box {
        margin: 0 0 20px 0;
        text-align: center;
    }

	.side-box.twitter {
		border: 1px solid #c5c5c5;
    border-radius: 5px;
	}




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

/*!     6. - Footer                                                           */

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





.footer {
	font-size: 1.4em;
    background: #644e7e;
    color: white;
	padding: 30px 0 40px;
	width: 100%;
}

.footer a {
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

a.portal {
	background: white; 
	padding: 12px 15px; 
	color: black;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-decoration: none;
}

a.portal:hover {
	background: #9ccb40;
	color: white;
	text-decoration: none;
}


    .footer-credits {
        float: left;
        width: 50%;
    }
    
    
    .footer-designed {
        float: right;
        max-width: 50%;
        text-align: right;
    }
    
    
    .footer-image {
        float: right;
        margin: 20px 0;
    }