@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Open+Sans:400italic,400,700);

:active,
:focus {
    outline: none;
    -moz-outline: none;
}
a {
    color: #764;
}
table {
    border: none;
}


h1, h2, h3, h4,
#sidebar #navigation ul li a {
	font-family: 'Roboto Slab', serif;
	font-weight: 700
}

h2, h3, h4,
#sidebar #navigation ul li a  {
	font-weight: 400!important
}

html,
body {
    margin: 0;
    padding: 0;
}
html {
    height: 101%;
}
body {
    width: auto;
    text-align: center;
    font: 16px/1.6 'Open Sans', 'Lucida Sans Unicode', 'Lucida Grande', Verdana, sans-serif;
}
#wrapper {
    text-align: left;
    margin: 0 auto;
}
#main {
    background: #fff;
    text-align: left;
    color: #141e33;
}
#main p {
    margin: 0;
    padding-bottom: 20px;
}
#main .inner {
    border-top: none;
    padding: 0 20px 20px;
    padding-top: 20px;
    min-height: 500px
}
#main h1 {
    font-size: 1.8em;
    line-height: 1.6em;
    margin: 0;
    padding: 10px 20px;
    background: #59b;
    color: #fff;
    /*
		border: solid 2px #451d16;
		border-bottom: none;
	*/
}
#main h2 {
    font-size: 1.4em;
    line-height: 1.4em;
    margin: 0 0 10px;
    padding: 0px;
    position: relative;
    left: 0px;
    top: 0;
}
#main h2 span {
    background: #59b;
    padding: 3px;
    color: #fff;
    display: block;
    text-align: center;
    width: 30px;
    position: absolute;
    left: -57px;
    top: -2px;
}
#main ul.links,
#main ul.links li,
ul.gallery,
ul.gallery li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: outside;
}
ul.gallery li {
    padding: 0 6px 6px 0;
}
ul.gallery li a img {
    margin: 0;
    padding: 0;
    width: 70px;
    height: 70px;
    border: solid 2px #59b;
}
#main ul.gallery {
    margin-bottom: 20px;
}
#main ul.links li,
ul.gallery li {
    display: inline;
}
#main ul.links li a {
    background: #59b;
    color: #fff;
    text-decoration: none;
    padding: 6px 12px;
    font-weight: 700;
}
#main hr {
    height: 2px;
    background: #b2bcd1;
    border: none;
    margin: 30px 0px 20px 0px;
}
#sidebar #navigation {
    padding-bottom: 40px;
}
#sidebar #navigation ul,
#sidebar #navigation ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: outside;
}
#sidebar #navigation ul li a {
    font-size: 1.4em;
    font-weight: 400;
    line-height: 1.4em;
    padding: 6px 12px;
    margin-bottom: 12px;
    background: #764;
    color: #fff;
    display: block;
    text-align: left;
    text-decoration: none;
}
#sidebar #navigation ul li.current a {
    background: #59b
}
#sidebar .box {
    margin-top: 20px;
}
#sidebar .box p {
    margin: 0 0 10px
}
#sidebar h2 {
    font-size: 1.4em;
    line-height: 1.4em;
    padding: 6px 12px;
    margin: 0;
    background: #764;
    color: #fff;
}
#sidebar .box.blue h2 {
    background: #59b
}
#sidebar .inner {
    padding: 10px;
    background: #fff;
}
#sidebar .inner.gallery li {
    padding: 3px;
}
#footer {
	background: #59b;
	margin-top: 20px;
	padding: 20px 0 20px 10px;
	text-align: left;
}

#footer ul,
#footer ul li {
    margin: 0 10px 0 0;
    padding: 0;
    list-style: none;
    list-style-position: outside;
    display: inline;
}
#footer,
#footer a {
    color: #fff;
    text-decoration: none;
}


@media only screen and (min-width: 768px) {
    body {
        background: #9cf url(../images/deko.jpg) top left repeat-y;
        padding-left: 120px;
    }
}

@media only screen and (min-width: 1024px) {
	body {
       padding-left: 80px;
	}
	#main h1 {
	    -webkit-border-top-left-radius: 6px;
	    -webkit-border-top-right-radius: 6px;
	    -moz-border-radius-topleft: 6px;
	    -moz-border-radius-topright: 6px;
	    border-top-left-radius: 6px;
	    border-top-right-radius: 6px;
	}
	#main .inner {
	    border: solid 2px #59b;
    }
	#sidebar #navigation ul li a {
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
    	border-radius: 3px;
	}
	
	#sidebar h2 {
    	-webkit-border-top-left-radius: 3px;
	    -webkit-border-top-right-radius: 3px;
   		-moz-border-radius-topleft: 3px;
	    -moz-border-radius-topright: 3px;
    	border-top-left-radius: 3px;
	    border-top-right-radius: 3px;
	}	

    #wrapper {
        width: 880px;
    }
    #main {
        width: 420px;
        -webkit-border-top-left-radius: 6px;
        -webkit-border-top-right-radius: 6px;
        -moz-border-radius-topleft: 6px;
        -moz-border-radius-topright: 6px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 80px 0px 0px 80px;
        float: left;
        clear: none;
    }
    #sidebar {
        float: left;
        clear: none;
        width: 300px;
        margin: 80px 0px 0px 80px;
    }
    #footer {
	    background: none;
	    text-align: left;
        clear: both;
        float: left;
        margin: 0;
		padding: 40px 0 20px 100px;
    }
    #footer,
	#footer a {
    	color: #000;
	}
}

@media only screen and (min-width: 1280px) {
	#wrapper {
        width: 1280px;
    }
    #main {
        width: 720px;
	}
}