/*
Theme Name: Respekt
Description: Template fuer Respekt! Stiftung
Author: Cornelia Agel
Author URI: http://www.sevenminds.de/
*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i');

/***** RESETS *****/
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea { margin:0; padding:0; }
header,footer,nav,section,aside,article,figure,figcaption{display:block}
table { border-spacing:0; border-collapse:collapse; }
caption,th,td { text-align:left; text-align:start; vertical-align:top; }
abbr,acronym { font-variant:normal; border-bottom:1px dotted #666; cursor:help; }
blockquote,q { quotes:none; }
fieldset,img { border:0; } 
ul { list-style-type:none; }
sup { vertical-align:text-top; }
sub { vertical-align:text-bottom; }
del { text-decoration:line-through; }
ins { text-decoration:none; }

html { overflow-y: scroll; }
body { font-size: 15px; line-height: 1.2; color: #464646; font-family: 'Roboto Condensed', sans-serif; background: url("images/backgrunge.jpg") repeat-x left top; background-attachment: fixed; font-weight: 300; }
input,button,textarea,select { font-family: inherit; font-size: 0.8333333333333333em; font-weight: inherit; vertical-align: baseline; *vertical-align: middle; color: #000; }
button,input.submit { *overflow: visible; }
pre,code { font-family: Monaco,monospace; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
table { font-size:inherit; }
img, object, embed, video { max-width: 100%; }
a img  { display: block; }
img  { height: auto; }

.invisible { width: 0px; height: 0px; left: -1000px; top: -1000px; position: absolute; overflow: hidden; display: inline; }
.clr, #clr { clear: both; }
.clrfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0px; }
.mobile { display: none; }
.aligncenter { display: block; margin-right: auto; margin-left: auto; }
.alignleft { float: left; margin-right: 1em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1em; margin-bottom: 1em; }
.inside { width: 820px; max-width: 100%; margin: 0 auto; position: relative; padding: 0 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.strong { font-weight: 400; }


/***** GLOBAL *****/

a { color: #FFA200; text-decoration: none; outline: none; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -o-transition: color 0.5s ease; transition: color 0.5s ease; font-weight: 400; }
#right a { color: #6F93A3; }
#right a.red { color: #ff8700; font-weight: bold; }
a:hover { color: #464646; text-decoration: none; }
p { margin: 0 0 1em; line-height: 1.5em; }
h1 { font-size: 1.5em; margin: 2em 0 1em; color: #ffa200; font-weight: 400; }
h2 { font-size: 1.166666666666667em; border-bottom: 1px solid #C7C7C7; margin: 2em 0 1em; font-weight: 400; padding-bottom: 0.5em; }
article h2:first-child { margin-top: 1em; }
td { padding: 0.25em 0; }

h1 + h2 { margin-top: 0; }
p + h2 { margin-top: 2em; }
h3 { margin: 0; }
h4 { font-size: 0.8888888888888889em; margin-bottom: 0.6em; }
.image_container img, a img { display: block; }
hr { border: 0; color: #C7C7C7; background-color: #C7C7C7; height: 1px; margin: 1em 0; padding: 0; display: block; }
p.brdr { padding-top: 1em; border-top: 1px solid #e0e0e0; }


/***** HEADER *****/

#header  { margin-bottom: 1em; }
#header .logo { padding: 1em 0; display: block; max-width: 80%; height: auto;  }

/* Main menu SF */
#navigation ul.menu, #navigation ul.menu * { margin: 0; padding: 0; list-style: none; }
#navigation ul.menu li:hover ul, #navigation ul.menu li.sfHover ul { z-index: 99; }
#navigation ul.menu li:hover li ul, #navigation ul.menu li.sfHover li ul ,
#navigation ul.menu li li:hover li ul, #navigation ul.menu li li.sfHover li ul { top: -999em; }
#navigation ul.menu li li:hover ul, #navigation ul.menu li li.sfHover ul,
#navigation ul.menu li li li:hover ul, #navigation ul.menu li li li.sfHover ul { left: 10em; top: 0; }
	
#menutoggler { display: none; }
#navigation { position: relative; top: 0; z-index: 2; width: 100%; }
#navigation ul.menu { }
#navigation ul.menu li { list-style: none; display: inline; position: relative; }
#navigation ul.menu a { display: inline-block; font-weight: 400; text-decoration: none; color: #fff; text-transform: uppercase; background: rgba(90, 137, 153, 0.5); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#navigation ul.menu > li > a { margin-right: 0.25em; padding: 0.5em 1em; }
#navigation ul.menu a:hover, 
#navigation ul.menu li.current-menu-item > a, 
#navigation ul.menu li.current-menu-parent > a,
#navigation ul.menu li.current-page-ancestor > a, 
#navigation ul.menu li.current_page_item > a { background: #ffa200; }

/* submenue */
#navigation ul.menu ul { display: none; position: absolute; list-style: none; top: 2em; left: 0; min-width: 220px; }
#navigation ul.menu ul li { display: block; float: none; }
#navigation ul.menu ul li a { color: #fff; display: block; font-weight: 500; padding: 0.3em 1em; text-decoration: none; text-transform: none; margin-top: 1px; background: rgba(28, 87, 107, 0.75); white-space: nowrap; }
#navigation ul.menu li.current-menu-item ul li a, 
#navigation ul.menu li.current-menu-parent ul li a { color: #fff; }
#navigation ul.menu li.current-menu-parent ul li a:hover, 
#navigation ul.menu li.current-menu-parent ul li.current-menu-item a { }
#navigation ul.menu ul li:first-child a { margin-top: 0; }
	
	
/***** MAIN *****/

#main { background: rgba(255, 255, 255, 0.5); float: left; width: 67%; border-left: 5px solid rgba(90, 137, 153, 0.25); border-right: 5px solid rgba(90, 137, 153, 0.25); padding: 1em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 660px; }
#pathnav { font-size: 0.8em; margin-bottom: -2em; }

article ul, article ol  { margin: 0 0 1.5em; zoom: 1; line-height: 1.5em; }
article ul { list-style-type: none; }
article ol { list-style-type: decimal; }
article ol li { margin: 0 0 0 1em; padding: 0 0 0 0.5em; }
article ul li { position: relative; margin: 0 0 0 0.75em; padding: 0 0 0 0.5em; }
article ul li:before { content: "\2022"; position: absolute; left: -0.5em; font-size: 1.5em; }

article .image { float: left; margin-right: 1em; }
article p.more { margin-top: -1em; }

#right { float: right; width: 33%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 15px; }
#rndm > div { width: 102px; float: left; height: 102px; background: #f5f5f5; margin-bottom: 10px; }
#rndm > div.odd { margin-right: 10px; }
#right ul.menu { margin-bottom: 2em; width: 214px; }
#right ul.menu li { display: block; }
#right ul.menu li a { display: block; padding: 0.25em 0; border-bottom: 1px solid rgba(90, 137, 153, 0.5); font-weight: 300; }
#right ul.menu li.current_page_item > a { color: #ffa200; }

#right .textwidget { background: url(images/widget_bg.png) no-repeat center center; background-size: cover; border-left: 5px solid rgba(90, 137, 153, 0.25); border-right: 5px solid rgba(90, 137, 153, 0.25); padding: 0.5em; margin: 0 0 1em; }
#right .widget { border-left: 5px solid rgba(90, 137, 153, 0.25); padding: 0.5em; margin: 0 0 2em; }
#right .widget strong, #right .widget p { display: block; margin: 0 0 0.25em; line-height: 1.25em; }

#blackbrd { width: 100%; height: 2px; background: #000; position: fixed; top: 0; left: 0; z-index: 999; }

#footer { padding-top: 2em; padding-bottom: 2em; }
#footer ul.menu { }
#footer ul.menu li { list-style: none; display: inline; position: relative; }
#footer ul.menu a { display: inline-block; font-weight: 300; text-decoration: none; color: #fff; background: rgba(90, 137, 153, 0.5); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#footer ul.menu li a { margin-right: 0.5em; padding: 0.25em 0.75em; }
#footer ul.menu a:hover, 
#footer ul.menu li.current-menu-item > a, 
#footer ul.menu li.current-menu-parent > a,
#footer ul.menu li.current-page-ancestor > a, 
#footer ul.menu li.current_page_item > a { background: #ffa200; }
#footer ul.menu li.gotop a { background: none transparent; color: rgba(90, 137, 153, 0.75); }
#gotop { float: right; display: inline-block; width: 20px; height: 25px; background: url(images/top.png) no-repeat center center; }


/***** FORMULAR *****/
input[type="email"], input[type="url"], input[type="text"], select,textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid grey; padding: 0.5em; }
input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; padding: 0.5em 1em; font-size: 1em; border: 0; background: #8dbcc9; text-transform: uppercase; color: #fff; }

/***** RESPONSIV *****/

@media only screen and (max-width: 799px) {
	#header .logo { width: 140px; }
	#main, #right { width: 100%; float: none; }
	#main { border-left: 0; border-right: 0; border-top: 5px solid rgba(90, 137, 153, 0.25); border-bottom: 5px solid rgba(90, 137, 153, 0.25); min-height: auto; padding: 0.5em; }
	#right { padding-left: 0; }
	#right ul.menu { width: 100%; }
	
	#rndm { display: none; } 
	#menutoggler { display: block; width: 34px; height: 34px; background: url("images/mob_menu.png") no-repeat right center; cursor: pointer; z-index: 99; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 10px; right: 20px; }
	#navigation ul.menu { display: none; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;  }
	#navigation ul.menu li { display: block; margin-bottom: 1px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
	#navigation ul.menu li a, #navigation ul.menu ul li a { margin-right: 0; display: block; padding: 0.25em 0.75em; }
	#navigation ul.menu li:last-child { margin-bottom: 0; }
	#navigation ul.menu ul { position: relative; top: 0; left: 0; width: 100%; }
}