/*
Theme Name: AMSmith
Theme URI: http://www.amsmith.com.au
Description: 2011 Design
Version: 2011b
Author: Jason, Jylan & Michael, Almost Anything Web and Graphic Design
Author URI: http://www.almostanything.com.au
*/

/*
 *
 * based on 960 12 col grid
 * columns 60px
 * column gaps 20px
 * 10px left/right, usable width in content area 940px
 *
 */

/***************************************************************
 *
 * Let's play Tetris!
 * (Block-level layout only)
 *
 ***************************************************************/

/* Clearfix */
    
.clearfix:after, header>nav:after {
    content:"";
    display:block;
    clear:both;
}

/* Styles to support our JS scrollbar width calculations */
.scrollbar_measure {
    width: 100px;
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

html {
    background:#fff;
}

body {
    margin: 0;
    padding: 0;
    font-family: Neuton, Helvetica, Arial, sans-serif;
    font-weight:300;
    background: #f2f2f2 url(images/bodyBg.jpg) 50% 260px no-repeat;
    color: #000;
    word-wrap:break-word;
}

.outer {
    width: 100%;
}

.widthlimiter {
    width:90%;
    max-width:940px;
    margin:0 auto;
    position:relative;
}

#header {
    background: #7d1c26;
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.1);
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);
    box-shadow:0 0 10px rgba(0,0,0,0.1);
    border-bottom:10px solid #fff;
    position: relative;
    z-index:10;
}

    #header img {
        position:absolute;
        left:190px;
        bottom:0;
        display:block;
    }

    #header .widthlimiter {
        padding:50px 0 0;
        height:205px;
        overflow:hidden;
    }

    #header #site-nav {
        background:#fff;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        width:190px;
    }

#content.narrow { /* 8 cols = 620 */
    margin:0 auto;
}

#footer {
    clear: both;
    width: 100%;
}

/***************************************************************
 *
 * Header
 *
 ***************************************************************/

#header h1, #header h1 a {
    margin: 40px 35px 20px 20px;
    display:block;
    float:left;
    width:150px;
    height:185px;
    position:relative;
    z-index:10;
}

    #header h1 a {
        margin:0;
        background:transparent url(images/logo.png) 0 0 no-repeat;
        text-indent:-9999px;
    }

/* Skip links */
#skiplinks {
    position: absolute;
    left: -9999px;
}

/***************************************************************
 *
 * Navigation
 *
 ***************************************************************/
/*** ESSENTIAL STYLES ***/
/* don't change these guys too much - unless you've got a really good reason! */
.nav, .nav ul, .nav li {margin:0;padding:0;list-style:none;}
    .nav ul, .nav li { float:left; }

/*** NAVIGATION SKIN ***/
/* customise this as much as you like... */

#menu {
    position:relative;
    z-index:200;
    background:#2e4475;
    -webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
    box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
}

.nav {
    z-index:10;
}

    .child_pages {
        margin:1em 0 1.25em;
        padding:0;
        list-style:none;
    }

        .child_pages li {
            list-style:none;
        }

        @media (min-width:650px) {
            .child_pages {
                float:right;
                margin:0 0 20px 25px;
                width:300px;
            }
        }

.contains_submenu>a {
    position:relative;
}

    .show_nav_children {
        position:absolute;
        top:-.25em;
        bottom:-.25em;
        right:-3%;
        line-height:2.5;
        font-weight:bold;
    }

/* This is for the mobile nav icon */
.menu-icon {
    display: none;
}

#menu .children {
    z-index:10;
    padding:0;
    background:#000;
    background:rgba(0,0,0,0.95);
}

.child_pages li, .nav li {
    position:relative;
    z-index:10;
}

    .child_pages li {
        clear:left;
    }

    .children li {
        float:none;
    }

.nav a, .child_pages a {
    color: #fff;
    margin:0;
    padding:9px 13px 8px;
    border:none;
    display:block;
    text-decoration: none;
    text-transform:uppercase;
    font-size:1.1em;
}

    #menu .nav .children a {
        color:#fff;
        background:transparent;
        padding:6px 10px;
        margin:0;
        border:none;
        font-weight:100;
        -moz-box-shadow:none;
        -webkit-box-shadow:none;
        box-shadow:none;
        text-transform:none;
    }

        #menu .nav .children a:hover {
            background:#000;
        }

        #menu .nav .children li.current_page_item a {
            font-weight:bold;
            background:#ebc3c7;
            color:#000;
        }

    #content .child_pages a {
        margin:0 0 10px;
        padding:7px 13px;
        border:none;
        color:#7d1c26;
        background:#fff;
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);
        box-shadow:0 0 10px rgba(0,0,0,0.1);
        text-transform:none;
    }

        #content .child_pages li.current_page_item a {
            border-left:15px solid #fff;
            margin-left:-15px;
            background:#7d1c26;
            color:#fff;
            font-weight:bold;
        }

.nav a:focus, .nav a:hover, .nav a:active, .nav li.sfHover a, .nav li.sfHover li a:hover {
    color:#fff;
    background:#000;
    background:rgba(0,0,0,0.2);
}


.nav li.current_page_item a, .nav li.current_page_ancestor a {
    font-weight:bold;
    color:#fff;
    background:#576990;
    background:rgba(255,255,255,0.2);
}

@media (min-width:751px) {

    /* Basic list reformatting */
    .nav li { position:relative; }
    .nav ul { position:absolute; top:-9999px; left:0; }
    .nav ul, .nav ul li { display:block; }

    .nav li:hover ul, .nav li.sfHover ul { z-index:100; display:block; }
        .nav>li:hover>ul, .nav>li.sfHover>ul { top:40px; }

    .nav ul ul { left:auto; right:-250px; }
        .nav li li:hover ul, .nav li li.sfHover ul { top:0; }

    .nav ul, .nav li li {width: 250px;}

    .nav li ul {
        display: none;
    }

    .nav li.current_page_item a, .nav li.current_page_ancestor a {
        border-top:10px solid #ebc3c7;
        margin-top:-10px;
        -moz-box-shadow:0 0 15px rgba(0,0,0,0.1);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.1);
        box-shadow:0 0 15px rgba(0,0,0,0.1);
    }

    .contains_submenu>a {
        padding-right:1.5em;
    }

        .show_nav_children {
            padding:0 .75em 0 .5em;
        }

}

/* Squish menu down into a button */
@media (max-width: 750px) {

    #menu {
        padding:1em 0;
    }

    /* Height is defined so we can confidently set negative margin on the main nav (.nav). See comment further down this @media query. */
    .menu-icon {
        position: relative;
        font-size: 1.4em;
        line-height: 2.5;
        padding: 0 .75em;
        display: block;
        height: 2.5em;
        text-decoration: none;
        text-align: center;
        font-weight: bold;
        background: #fff;
        color: #2e4475;
    }

        .menu-icon:after {
            content: " \2193"; /* down arrow */
        }

            .menu-icon.active:after {
                content:"";
            }

    .contains_submenu>a {
        padding-right:2.5em;
    }

        .show_nav_children {
            position:absolute;
            top:-.25em;
            bottom:-.25em;
            right:-3%;
            line-height:2.5;
            z-index:10;
            padding:0 5% 0 .75em;
            padding:0 calc(3% + .5em) 0 .75em;
        }

    .nav ul, .nav li { float:none; }

        .sub-menu, .nav .children {
            padding:0 0 0 1.5em;
        }

    /*
        We're using CSS to show the menu (using IDs, #hash hrefs and the :target pseudo-class).
        To avoid a context-jarring page jump upon clicking #menu-icon, we pull .nav up
        underneath #menu-icon (plus a little extra to simulate to margin on #menu-icon)
    */
    
    .nav { display:none; margin:-3.5em 0 0; padding:4em 0 0; }

        .nav:target {
            display:block !important;
        }

        .nav.closed {
            display:none !important;
        }

}

/***************************************************************
 *
 * Main Content
 *
 ***************************************************************/

#content {
    font-size:1.2em;
    line-height:1.5em;
    margin:0 0 30px;
    color:#444;
}

    body.home #content {
        font-size:1.3em;
    }

#content h1, h2, h3, h4, h5 {
    color: #223163;
    line-height: 1.2em;
    margin:1em 0 .25em;
}

    body.home #content h1 {
        margin:.5em 0 .25em;
    }

    body.home #content h1+* {
        margin-top:0;
    }

    h2 sup {
        vertical-align:baseline;
        font-size:.6em;
    }

strong {
    font-weight:bold;
}

h1 a {
    text-decoration: none;
}

#content a, #sidebar a {
    color:#7d1c26;
    text-decoration:none;
    border-bottom:1px dotted #7d1c26;
}

#content a:hover, #sidebar a:hover {
    color:#000;
}

#content img {
    border:3px solid #fff;
}

    #content img#pis_logo {
        background:transparent;
        border:none;
        padding:0;
    }

    #content img.plain {
        border:none;
        padding:0;
    }

/* the next 3 rules are for the way WP sets its image floats */

#content .alignleft, #content .alignright {
    margin:1em auto;
    display: block;
}

@media (min-width:800px) {
    #content .alignleft {
        float:left;
        margin:0 1em 1em 0;
    }

    #content .alignright {
        float:right;
        margin:0 0 1em 1em;
    }
}

#content .aligncenter {
    text-align:center;
    margin:0 auto;
}

/* These 2 will make image captions look a bit like polaroids */

.wp-caption {
    background:#ccc;
}
.wp-caption p{
	line-height: 0.8em;
}
.wp-caption-text {
    font-size:.8em;
    text-align:center;
    padding:0;
    margin:0;
}


/***************************************************************
 *
 * Sidebar
 *
 ***************************************************************/

#sidebar {
    margin:0 0 30px;
    list-style: none;
    background: #fff;
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.1);
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}

#sidebar ul, #sidebar li {
    padding: 0;
    margin: 0;
    list-style: none;
}

    #sidebar>li {
        margin-bottom:20px;
    }

#sidebar li ul { /* a nested list, so this should actually be displayed as a list */
    padding-left: 20px;
}

#sidebar li li {
    list-style-type: disc;
}

#sidebar h2 {
    margin:0 0 10px;
}

/* Sidebar menus (auto child pages)*/

#sidebar ul.child_pages, #sidebar ul.child_pages li, #sidebar ul.child_pages ul, #sidebar .dlm_download_list, #sidebar .dlm_download_list li {
    padding:0;
    margin:0;
    list-style:none;
}

#sidebar ul.child_pages li a, #sidebar .dlm_download_list a {
    display:block;
    color:#223163;
    text-decoration: none;
    font-size:1.2em;
    margin:0 -20px;
    padding:7px 20px 8px 20px;
    border:none;
}

#sidebar ul.child_pages li li a {
    font-size:0.8em;
    color:#666;
}

#sidebar ul.child_pages li a:hover, #sidebar .dlm_download_list a:hover {
	background: #f3f3f3;
}

#sidebar ul.child_pages li.current_page_item a {
    color:#fff;
    background:#7d1c26;
    padding-left:28px;
    margin:0 -20px 0 -28px;
    font-weight:bold;
}

/* Sidebar menus (the built-in WP ones)*/
#sidebar ul.sidebar_menu, #sidebar ul.sidebar_menu li, #sidebar ul.sidebar_menu ul{
    padding:0;
    margin:0;
    list-style:none;
}
#sidebar ul.sidebar_menu li a{
    display:block;
    line-height:2em;
    background:#aaa;
    text-align:center;
    color:#000;
    border-bottom:2px solid #000;
}
#sidebar ul.sidebar_menu li li a{
    font-size:0.8em;
    color:#666;
}

/***************************************************************
 *
 * News and/or blog
 *
 ***************************************************************/
.postdate, .postmetadata {
	font-size:0.8em;
	font-style:italic;
}

/***************************************************************
 *
 * Homepage
 *
 ***************************************************************/

.cta {
    width: 100%;
    float: left;
}

@media (min-width:1000px) {
    .cta {
        width: 33.333%;
    }
}

    .cta p {
        display:inline;
    }

    #content .cta a {
        z-index:1;
        display:block;
        position:relative;
        padding:15px 20px 20px 85px;
        border:1px solid #ddd;
        border-width:1px 1px 0;
        background:#fff url(images/ctaIcons.png) 15px no-repeat;
        color:#7d1c26;
        font-size:1.5em;
        font-weight:bold;
    }

        @media (min-width:1000px) {
            #content .cta a {
                border-width:1px 0 0;
            }

            #content #cta1 a {
                border-left-width:1px;
            }

            #content #cta3 a {
                border-right-width:1px;
            }
        }

        #content #cta1 a {
            color:#4b6ebe;
            background-position:-120px -16px;

        }

            #content #cta1 a:hover {
                background-color:#4b6ebe;
                color:#fff;
                border-color:#4b6ebe;
                background-position:-34px -16px;
            }

        #content #cta2 a {
            background-position:-114px -100px;
            padding-left:90px;
        }

            #content #cta2 a:hover {
                background-position:-28px -100px;
            }

        #content #cta3 a {
            color:#bfb123;
            background-position:-115px -195px;
            padding-left:90px;
        }

            #content #cta3 a:hover {
                background-color:#bfb123;
                border-color:#bfb123;
                color:#fff;
                background-position:-28px -195px;
            }

        #content .cta a:hover {
            border:1px solid #7d1c26;
            margin-bottom:-1px;
            z-index:15;
            background-color:#7d1c26;
            color:#fff;
        }

/***************************************************************
 *
 * Contact Page
 *
 ***************************************************************/

#google_map { /* The outer div */
	margin: 0 0 20px;
}

#google_map #map_canvas{ /* the inner container that defines the actual map size */
	width: 100%;
	height: 300px;
	margin: 0;
	border: 2px solid #fff;
}

@media (min-width:1000px) {
    #google_map {
        margin: 0 0 20px 20px;
        float:right;
    }

    #google_map #map_canvas{
        width: 596px;
    }
}

/***************************************************************
 *
 * Forms
 *
 ***************************************************************/

.gform_wrapper ul, .gform_wrapper li {
    list-style:none;
    margin:0;
    padding:0;
}

.gform_wrapper {
    float:left;
}

.gform_body, .gform_footer {
    float:left;
    clear:left;
    margin:0 0 1em;
}

.gform_wrapper input, .gform_wrapper textarea {
    margin:0;
    padding:5px;
    border:2px solid #ccc;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    width:195px;
}

.gform_wrapper input:focus, .gform_wrapper textarea:focus {
	outline:0;
	border:2px solid #000;
	color:#000;
}

.gform_wrapper li#field_1_4 textarea { /* Enquiry box */
	width:655px;
}

.gform_footer input {
	width:auto;
	background:#7d1c26;
	font-size:1em;
	font-weight:bold;
	border:none;
	color:#fff;
	padding:10px 15px;
	margin:0 0 1em;
	cursor:pointer;
}

.gform_wrapper label {
    color:#888;
    font-weight:bold;
    display:block;
    margin:0 0 .2em;
}

.gform_wrapper li {
    float:left;
    width:210px;
    margin-right:20px;
}

.gform_wrapper li#field_1_3 {
    margin-right:0;
}

.gform_wrapper li#field_1_4 {
    margin:1em 0 0;
    clear:left;
    margin-right:0;
}

/***************************************************************
 *
 * Footer
 *
 ***************************************************************/

#footer {
    padding:0 0 1em;
    font-size:1em;
    background: #fff;
    line-height:1.5em;
    position:relative;
    z-index:10;
    border-top:1px solid #bbb;
    -moz-box-shadow:0 -10px 10px rgba(0,0,0,0.02);
    -webkit-box-shadow:0 -10px 10px rgba(0,0,0,0.02);
    box-shadow:0 -10px 10px rgba(0,0,0,0.02);
    color:#888;
}

    #footer .vcard, #checklists {
        padding: 2em 0 0 0;
    }
    
    #checklists {
        float:right;
        padding-left:1.5em;
    }

        #checklists h2, #checklists ul {
            margin:0;
        }

            #checklists ul {
                padding:.5em 0 0 1.5em;
            }

#footer a {
    color: #666;
    text-decoration: none;
    border-bottom:1px dashed #555;
}

#footer a:hover {
    color:#000;
    border-bottom:1px solid #000;
}

.footernav {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    font-weight: bold;
    text-align:center;
}

.footernav ul {
    margin: 0;
    padding: 0 0 0 2em;
}

.footernav li {
    display:inline-block;
    margin: 0 2em 0 0;
}

    .footernav li li {
        font-weight: normal;
        margin:0;
    }

.rssfeed {
    display: none;
}

#menu .children .children {
    display: none !important;
}


/***************************************************************
 *
 * For skinny screens XD
 *
 ***************************************************************

@media only screen and (max-width: 1000px), only screen and (max-device-width: 480px) {
	.outer {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	.widthlimiter {
		width: 100%;
		padding: 0;
		margin: 0;
	}
	#menu{
		width: 100%;
		padding: 0;
		margin: 0;
	}
		.nav ul{
			width: 100%;
		}
		.nav li{
			width: 25%;
		}
	#content, #content.wide{
		width: 90%;
		float:none;
		padding: 0;
		margin:0 auto;
	}
	#sidebar{
		width:90%;
		float:none;
		margin:0 auto;
		padding:0;
	}
	#cta1, #cta2, #cta3{
		margin: 0;
	}
		div#content div.cta {
			width:90%;
			float: none;
			margin:5px auto;
		}
	#google_map #map_canvas{
		width: 100%;
		height: 200px;
	}
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
	#header h1{
		width: 100%;
		background-size: 100% auto;
	}
	.nav ul{
		height: 75px;
		background: #000;
	}
}
*/