﻿/*======================================================================================*/
/* GLOBAL SETTINGS                                                                      */
/*======================================================================================*/

/*https://www.google.com/fonts#UsePlace:use/Collection:Titillium+Web*/
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900&subset=latin,latin-ext);

/*https://www.google.com/fonts#UsePlace:use/Collection:Titan+One*/
@import url(http://fonts.googleapis.com/css?family=Titan+One&subset=latin,latin-ext);

html, body
{
	background: white;
	color: #004a98;
	font-family: 'Titillium Web', sans-serif;
	font-size: 16px;
}

form
{
	
}


*
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, input, select, textarea, sub, sup
{
	font-size: 100%;
	font-family: 'Titillium Web', sans-serif;
}

h1
{
    padding: 0 0 35px 0;
    color: #18b1e7;
    font-size: 46px;
    font-family: 'Titan One', cursive;
    font-weight: normal;
}

input, select, textarea
{
    color: #656b6d;
}

input[type=submit],
input[type=button]
{
    cursor: pointer;
}

img
{
	border: none;
}

a
{
	cursor: pointer;
	color: #004a98;
	text-decoration: none;
    outline: 0;
}

a:hover
{
	text-decoration: none;
}

label
{
	cursor: pointer;
}

.clear 
{
	width: 100%;
	height: 1px;
	display: block;
	overflow: hidden;
	clear: both;
}

.clear hr
{
	display: none;
}

.floatleft
{
	float: left;
}

.floatright
{
	float: right;
}

.hidden
{
	display: none;
}

/* ====================================================================================== */

#page
{
    min-width: 310px;
}

/* ====================================================================================== */

#headerHolder
{
    width: 970px;
    min-width: 310px;
    height: 242px;
    margin: 0 auto;
    position: relative;
}

#headerHolder a
{
    width: 263px;
    height: 68px;
    position: absolute;
    left: 0px;
    top: 26px;
    z-index: 8000;
    display: block;
    background: url(images/logo.png) no-repeat 0 0;
    text-decoration: none;
}

#headerHolder a:hover
{
    text-decoration: none;
}

#headerHolder span
{
    display: none;
}

@media screen and (max-width: 1000px)
{
    #headerHolder
    {
        width: auto;
    }

    #headerHolder a
    {
        left: 20px;
        top: 20px;
    }
}

/* ====================================================================================== */

#header
{
    width: 100%;
    min-width: 310px;
    height: 242px;
    position: absolute;
    left: 0;
    top: 0px;
}

#header a,
#header a:hover
{
    text-decoration: none;
}

#header .center
{
    width: 970px;
    margin: 0 auto;
    position: relative;
}

#header .center.centerMain
{
    height: 205px;
}

#header .greyline
{
    width: 100%;
    height: 100%;
    /*background: url(images/header-background.png) repeat-x 0 336px;*/
}

#header .regionBox
{
    width: 310px;
    height: 200px;
    padding: 26px 0 0 0;
    position: absolute;
    right: 0;
    top: 0;
    text-align: right;
}

#header .regionBox .text
{
    padding: 9px 13px;
    background: #009949;
    display: inline-block;
    color: white;
    font-size: 14px;
    line-height: 15px;
    font-weight: 600;
    text-transform: uppercase;

    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -khtml-border-radius: 7px;
    border-radius: 7px;
}

#header .regionBox .logo img
{
    margin: 0 0 15px 0;
}

#header .menu
{
    width: 100%;
    height: 35px;
    padding: 2px 0 0 0;
    position: absolute;
    left: 0;
    top: 202px;
    z-index: 200;
    background: url(images/menu-background.png) repeat-x 0 0;
    color: white;
    font-size: 18px;
    line-height: 35px;
    text-align: center;
}

#header .fb
{
    height: 30px;
    padding: 0 10px 0 36px;
    position: absolute;
    left: 0;
    top: 106px;
    z-index: 100;
    display: inline-block;
    background: #004a99 url(images/icon-facebook.png) no-repeat 5px center;
    color: white;
    font-size: 14px;
    line-height: 30px;
    letter-spacing: 0.7px;
    font-weight: 600;
    text-transform: uppercase;

    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

#header .family
{
    width: 100%;
    height: 298px;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url(images/family.png) no-repeat center bottom;
}

@media screen and (max-width: 1000px)
{
    #header .center
    {
        width: 100%;
    }

    #header .center.centerMain
    {
        height: auto;
    }

    #header .fb
    {
        left: 20px;
    }

    #header .regionBox
    {
        right: 20px;
    }
}

@media screen and (max-width: 650px)
{
    #header .regionBox
    {
        display: none;
    }
}

/* ====================================================================================== */

#footer
{
    width: 100%;
    height: 110px;
    background: #f29200 url(images/footer-background.png) repeat-x 0 bottom;
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

#footer .center
{
    width: 1040px;
    margin: 0 auto;
}

#footer .copyright
{
    height: 59px;
    padding: 21px 0 0 170px;
    background: url(images/footer-logo.png) no-repeat 0 20px;
    line-height: 17px;
}

#footer .copyright a
{
    color: #004a98;
    text-decoration: none;
}

#footer .copyright a:hover
{
    text-decoration: none;
}

#footer ul
{
    width: 100%;
    display: block;
    text-align: center;
    list-style: none;
}

#footer ul li
{
    display: inline;
}

#footer ul li a
{
    color: #004a98;
    text-decoration: none;
}

#footer ul li a:hover
{
    text-decoration: none;
}

@media screen and (max-width: 1110px)
{
    #footer
    {
        height: auto;
    }

    #footer .center
    {
        width: auto;
    }

    #footer .copyright
    {
        height: auto;
        min-height: 40px;
        margin-left: 20px;
        padding-bottom: 10px;
    }

    #footer ul
    {
        line-height: 42px;
    }
}