@import "layout.css";
@import "forms.css";
@import "nav.css";
@import "thickbox.css";

/* 
	---------------------------------------------
	Title:	Wyong Shire Council screen styles
	Author: mark.boere@bluearcgroup.com
	---------------------------------------------
*/
/*
	Pixels to ems (based on 12px):
		10px = .83em, 11px = .91em, 13px = 1.08em, 14px = 1.16em, 15px = 1.25em
		16px = 1.3em, 17px = 1.41em, 18px = 1.5em, 19px = 1.58em, 20px = 1.6em
/*

/****************************************************************************************	
	[RESET]
*****************************************************************************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, input, form, label, legend,
caption, tbody, tfoot, thead, tr {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
}

table, th, td {
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
}

html, body, form, fieldset, a img {
    border: none;
}

ul, ol {
    list-style: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

/****************************************************************************************	
	[COMMON ELEMENTS - TYPE SELECTORS]
*****************************************************************************************/

body {
    color: #231f20;
    background: #ebebeb url("../images/template/bg-body.gif") repeat-y 50% 0;
    margin-bottom: 30px;
    font: 62.5%/1.5 Arial, Helvetica, sans-serif; /* Set to 10px */
}

a:link, a:visited {
    color: #0f5ca9;
    text-decoration: underline;
}

a:visited {
    color: #0b4b5b;
}

a:hover, a:focus {
    text-decoration: none;
}

a:active {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    text-align: left;
}

td, th {
    vertical-align: top;
}

caption {
    text-align: left;
    color: #99c81e;
    line-height: 1.3;
    font-size: 1.16em; /* 14px */
    font-weight: bold;
    padding-bottom: .3em;
}

abbr {
    cursor: help;
    border-bottom: 1px dotted #000;
}

strong {
    font-weight: bold;
}

em, i {
    font-style: italic;
}

blockquote {
    margin: 0 2.6em;
}
/* Headers */
h1, h2, h3, h4, h5, h6 {
    color: #082c53;
    line-height: 1.3;
    margin-bottom: 1.1em;
    font-weight: normal;
}

h1 {
    font-size: 1.85em;
    margin-bottom: .4em;
}

.home h1 {
    font-size: 1.5em; /* 18px */
    margin-bottom: .9em;
}

h2 {
    font-size: 1.5em;
}
/* 18px */
.home h2 {
    color: #005ba8;
    font-size: 1.08em; /* 13px */
    font-weight: bold;
    margin-bottom: .2em;
}

h3 {
    font-size: 1.3em;
}
/* 16px */
h4 {
    font-size: 1.16em;
}
/* 14px */
h5 {
    font-size: 1.08em;
}
/* 13px */
h6 {
    font-size: 1em; /* 12px */
    font-style: italic;
}
/* Margins */
p, ul, ol, dl, table {
    margin-bottom: 1.09em;
}
    /* 13px */
    table table {
        margin: 0;
    }
/* Lists */
ol {
    margin-left: 3em;
    list-style: decimal;
}

ul li {
    background: url("../images/template/bullet.gif") no-repeat 0 .6em;
    padding-left: 12px;
}
/* Nested */
ul ul, ol ul {
    margin: .75em 0 .75em 1.5em;
}

ol ol, ul ol {
    margin: .75em 0 .75em 2.5em;
}

ol ol {
    list-style: lower-alpha;
}

    ol ol ol {
        list-style: lower-roman;
    }


/*------------------------------------*\
    ACCORDION
\*------------------------------------*/
.accordion {
    width: 940px;
    /*overflow: hidden;*/
    list-style: none;
    margin-bottom: 10px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
    background: blue;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

    .accordion li {
        float: left;
        width: 20%;
        overflow: hidden;
        height: 250px;
        -moz-transition: width 0.2s ease-out;
        -webkit-transition: width 0.2s ease-out;
        -o-transition: width 0.2s ease-out;
        transition: width 0.2s ease-out;
        -moz-transition-delay: 0.15s;
        -webkit-transition-delay: 0.15s;
        -o-transition-delay: 0.15s;
        transition-delay: 0.15s;
        list-style-type: none;
    }

        .accordion li:first-of-type {
            -moz-border-radius: 10px 0 0 10px;
            -webkit-border-radius: 10px 0 0 10px;
            -o-border-radius: 10px 0 0 10px;
            border-radius: 10px 0 0 10px;
        }

        .accordion li:last-of-type {
            -moz-border-radius: 0 10px 10px 0;
            -webkit-border-radius: 0 10px 10px 0;
            -o-border-radius: 0 10px 10px 0;
            border-radius: 0 10px 10px 0;
        }

    .accordion div {
        padding: 10px;
    }

    .accordion:hover li {
        width: 10%;
    }

    .accordion li:hover {
        width: 60%;
    }

/*------------------------------------*\
	VERTICAL
\*------------------------------------*/
#vertical {
    width: 800px;
    height: 800px;
    background-color: white;
    list-style-type: none;
}

    #vertical li {
        height: 10%;
        width: 100%;
        -moz-transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;
        -moz-transition-delay: 0.15s;
        -webkit-transition-delay: 0.15s;
        -o-transition-delay: 0.15s;
        transition-delay: 0.15s;
        list-style-type: none;
        background: none;
        padding-left: 0px;
    }

        #vertical li:first-of-type {
            -moz-border-radius: 10px 10px 0 0;
            -webkit-border-radius: 10px 10px 0 0;
            -o-border-radius: 10px 10px 0 0;
            border-radius: 10px 10px 0 0;
        }

        #vertical li:last-of-type {
            -moz-border-radius: 0 0 10px 10px;
            -webkit-border-radius: 0 0 10px 10px;
            -o-border-radius: 0 0 10px 10px;
            border-radius: 0 0 10px 10px;
        }

    #vertical:hover li {
        height: 8%;
        width: 100%;
    }

    #vertical li:hover {
        height: auto;
        width: 100%;
    }