/*
Theme Name: Bell Étage 2.0
Theme URI: http://belletage.com/
Description: Facelift 2012. Based on the marvelous 2010 theme by the wordpress team
Author: bavariansocialclub
Version: 2.0
License: GNU General Public License
License URI: 
Tags: bell etage, 2012
*/


/* css */

/* RESET CSS by http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* general */
.clearer {
	clear: both;
}


/*
-----------------------------
 Basics
-----------------------------
*/

body { font: 14px/1.4em BrandonGrotesque-Regular, Arial, sans-serif; color: #000; }
a { color: #000; text-decoration: none;}
a:hover { text-decoration: underline; color: #0a9ace;}


/*
-----------------------------
 Positioning
-----------------------------
*/

body { background: #e2e6e1; text-align: center;}

#page { width: 988px; margin: 0 auto; text-align: left; padding: 0 0 0 20px;}
#header { width: 100%; height: 213px; background: url(images/bg_header.gif) no-repeat 0 100%; position: relative;}
#artwork { width: 339px; height: 223px; position: absolute; top: 35px; right: -77px; }
	
	#artwork { background: url(images/artwork_home_2014.png) no-repeat 0 0;}
	.page-id-12 #artwork, .page-id-20 #artwork, .page-id-22 #artwork, .page-id-24 #artwork, .page-id-1321 #artwork, .page-id-1978 #artwork { background-image: url(images/artwork_agentur_2014.png);}
	.page-id-14 #artwork, .category #artwork {background-image: url(images/artwork_arbeiten_2014.png);}
	.page-id-16 #artwork { background-image: url(images/artwork_referenzen_2014.png);}
	.page-id-18 #artwork { background-image: url(images/artwork_kontakt_2014.png);}

#menu { width: 948px; height: 56px; padding-top: 2px; }
#container { width: 100%; min-height: 700px; /*padding: 17px 0 20px;*/ padding: 45px 0 20px; position: relative;}
#footer { width: 948px; height: 30px; clear: both; border-top: 3px solid #fff; margin: 73px 0 20px;}
	body.home #footer { margin: 94px 0 20px;}

#content {width: 948px;}
#content_wide {width: 988px;}
/*
-----------------------------
 Header
-----------------------------
*/

#logo { padding: 0;}
#logo a { height: 160px; width: 160px; display: block; text-indent: -9999em; background: url(images/logo.png) no-repeat 0 0 ;}

/*
-----------------------------
 Menu
-----------------------------
*/

#menu { position: relative;}
#menu li { float: left; line-height: 33px;}
#menu li ul.sub-menu { display: none; position: absolute; z-index: 2; width: 500px; height: 20px; left: 0; bottom: 0; /*background: #e2e6e1;*/}
/*#menu li:hover ul.sub-menu,*/
#menu li.current-menu-item ul.sub-menu,
#menu li.current-menu-parent ul.sub-menu {display: block;}
#menu li ul.sub-menu li {line-height: 20px;}

#menu li a { display: block; height: 33px; color: #000; background: url(images/bg_menu_sprite.png) no-repeat 0 0; text-indent: -999em;}
#menu li a:hover { color: #0a9ace;}

#menu li ul.sub-menu li a { height: 20px;}

/* first level */
#menu li#menu-item-31 a,
#menu li#menu-item-445 a 	{ background-position: 0   0px; width: 104px;}
#menu li#menu-item-1950 a 	{ background-position: 0 -33px; width: 109px;}
#menu li#menu-item-36 a 	{ background-position: 0 -66px; width: 137px;}
#menu li#menu-item-37 a 	{ background-position: 0 -99px; width: 100px;}
/* first level :hover */
#menu li#menu-item-31 a:hover, #menu li#menu-item-31.current-menu-item a, #menu li#menu-item-31.current-menu-parent a,
#menu li#menu-item-445 a:hover, #menu li#menu-item-445.current-menu-item a, #menu li#menu-item-445.current-menu-parent a 	{ background-position: -200px 0px; width: 104px;}
#menu li#menu-item-1950 a:hover, #menu li#menu-item-1950.current-menu-item a, #menu li#menu-item-1950.current-menu-parent a, .category #menu li#menu-item-1950 a	{ background-position: -200px -33px; width: 109px;}
#menu li#menu-item-36 a:hover, #menu li#menu-item-36.current-menu-item a, #menu li#menu-item-36.current-menu-parent a 	{ background-position: -200px -66px; width: 137px;}
#menu li#menu-item-37 a:hover, #menu li#menu-item-37.current-menu-item a, #menu li#menu-item-37.current-menu-parent a 	{ background-position: -200px -99px; width: 100px;}

/* second level */
/* item1 */
#menu .current-menu-item li#menu-item-32 a, #menu .current-menu-parent li#menu-item-32 a { background-position: 0px -400px; width: 68px;}
#menu .current-menu-item li#menu-item-34 a, #menu .current-menu-parent li#menu-item-34 a { background-position: 0px -420px; width: 101px;}
#menu .current-menu-item li#menu-item-35 a, #menu .current-menu-parent li#menu-item-35 a { background-position: 0px -440px; width: 88px;}
#menu .current-menu-item li#menu-item-1345 a, #menu .current-menu-parent li#menu-item-1345 a { background-position: 0px -460px; width: 52px;}
#menu .current-menu-item li#menu-item-2000 a, #menu .current-menu-parent li#menu-item-2000 a { background-position: 0px -480px; width: 116px;}
/* item2 */
#menu li#menu-item-21 a { background-position: 0px -200px; width: 38px;}		/* all */

/* second level :hover */
/* item1 */
#menu .current-menu-parent li#menu-item-32 a:hover, #menu .current-menu-parent li#menu-item-32.current-menu-item a { background-position: -200px -400px; width: 68px;}
#menu .current-menu-parent li#menu-item-34 a:hover, #menu .current-menu-parent li#menu-item-34.current-menu-item a { background-position: -200px -420px; width: 101px;}
#menu .current-menu-parent li#menu-item-35 a:hover, #menu .current-menu-parent li#menu-item-35.current-menu-item a { background-position: -200px -440px; width: 88px;}
#menu .current-menu-parent li#menu-item-1345 a:hover, #menu .current-menu-parent li#menu-item-1345.current-menu-item a { background-position: -200px -460px; width: 52px;}
#menu .current-menu-parent li#menu-item-2000 a:hover, #menu .current-menu-parent li#menu-item-2000.current-menu-item a { background-position: -200px -480px; width: 116px;}
/* item2 */
#menu li#menu-item-21 a:hover { background-position: -200px -200px; width: 38px;}		/* all */
#menu li#menu-item-1345 a:hover { background-position: -200px -340px; width: 38px;}		/* ... */


/* Categories replace Sub-Menu */
#catmenu { position: absolute; height: 20px; left: 0; top: -15px;}
#catmenu li { float: left; line-height: 20px;}
#catmenu li a { display: block; height: 20px; background: url(images/bg_menu_sprite.png) no-repeat 0 0; text-indent: -999em;}

/* cat-items */
#catmenu li.cat-item-1  a { background-position: 0px -200px; width: 60px;}		/* all */
#catmenu li.cat-item-81 a { background-position: 0px -560px; width: 120px;}		/* Geschichten */
#catmenu li.cat-item-4  a { background-position: 0px -520px; width: 161px;}		/* Corporate Design */
#catmenu li.cat-item-80 a { background-position: 0px -540px; width: 145px;}		/* Kommunikation */
/* second level :hover */
#catmenu li.cat-item-1 a:hover,  #catmenu li.cat-item-1.current-cat  a { background-position: -200px -200px; width: 60px;} 		/* all */
#catmenu li.cat-item-81 a:hover, #catmenu li.cat-item-81.current-cat a, .page-id-14 #catmenu li.cat-item-81 a { background-position: -200px -560px; width: 120px;}		/* Geschichten */
#catmenu li.cat-item-4 a:hover,  #catmenu li.cat-item-4.current-cat  a { background-position: -200px -520px; width: 161px;}		/* Corporate Design */
#catmenu li.cat-item-80 a:hover, #catmenu li.cat-item-80.current-cat a { background-position: -200px -540px; width: 145px;}		/* Kommunikation */

/*
-----------------------------
 Teaser
-----------------------------
*/
/* Home */
.teaser_big { width: 948px; margin: 0 0 13px 0; overflow: hidden;}
.teaser_big img { float: left; margin-right: 20px;}

.teaser_big .so-new { position: absolute; top: 6px; left: 577px; z-index: 10; width: 118px; height: 118px; background: url(images/batch_so-new_big.png) no-repeat 0 0;}
.teaser_big .hotandnew { position: absolute; top: 6px; left: 577px; z-index: 10; width: 118px; height: 118px; background: url(images/batch_hotandnew_big.png) no-repeat 0 0;}
a#teaser_big_images_link {display: block; width: 706px; height: 500px; position: absolute; top: 0px; left: 0px; z-index: 11;}


/* Home + Arbeiten*/
.teaser_images img {display: none;}
.teaser_images img:first-child {display: block;}

.teaser, .teaser_home { float: left; width: 222px; margin: 0 20px 24px 0; border-bottom: 3px solid #fff; position: relative;}

.teaser .so-new, .teaser_home .so-new { position: absolute; top: 6px; right: -6px; z-index: 100; width: 60px; height: 60px; background: url(images/batch_so-new.png) no-repeat 0 0;}
.teaser .hotandnew, .teaser_home .hotandnew { position: absolute; top: 6px; right: -6px; z-index: 100; width: 60px; height: 60px; background: url(images/batch_hotandnew.png) no-repeat 0 0;}

.teaser_link { display: block; width: 222px; height: 157px; position: absolute; top: 0; left: 0; z-index: 19; outline: none; }

.teaser .teaser_images, .teaser_home .teaser_images { height: 157px;}
/* Personal */
.teaser_personal { float: left; width: 222px; margin: 0 20px 24px 0; }
.teaser_personal h2 { color: #000; }
.teaser_personal h3 { color: #000; font-weight: normal; border-bottom: 3px solid #fff; margin: 0 0 10px}
.teaser_personal img { margin: 0 0 7px}
/* Referenzen */
.teaser_referenzen { float: left; width: 222px; margin: 0 20px 24px 0; }

/* Teaser Big navi */
.teaser_big .prev, .teaser_big .next {position: absolute; top: 250px;/* background: #fff;*/ opacity: 0.5; z-index: 20; height: 47px; width: 24px; cursor: pointer; text-align: center; }
.teaser_big .prev:hover, .teaser_big .next:hover { /*opacity: 1; background: #0a9ace;*/}
.teaser_big .prev {left:  0px;  background: url(images/icon_left.png) no-repeat 0 0; }
.teaser_big .next {left: 682px; background: url(images/icon_right.png) no-repeat 0 0;}

/* Teaser Navi */
.teaser .prev, .teaser .next {position: absolute; left: 85px; /*background: #fff; opacity: 0.5;*/ z-index: 20; height: 24px; width: 47px; cursor: pointer; text-align: center; }
.teaser .prev:hover, .teaser .next:hover { opacity: 1; /*background: #0a9ace;*/ }
.teaser .prev {top:   0px; background: url(images/icon_up.png) no-repeat 0 0; }
.teaser .next {top: 133px; background: url(images/icon_down.png) no-repeat 0 0; }

.teaser .prev, .teaser .next { display: none;}

.teaser_home .prev, .teaser_home .next {position: absolute; left: 85px; /*background: #fff; opacity: 0.5;*/ z-index: 20; height: 24px; width: 47px; cursor: pointer; text-align: center; }
.teaser_home .prev:hover, .teaser_home .next:hover { opacity: 1; /*background: #0a9ace;*/ }
.teaser_home .prev {top:   0px; background: url(images/icon_up.png) no-repeat 0 0; }
.teaser_home .next {top: 133px; background: url(images/icon_down.png) no-repeat 0 0; }


/*
-----------------------------
 Alternative Layouts
-----------------------------
*/
.page-id-22 #content { width: 464px;}

/*
-----------------------------
 Pagenavi
-----------------------------
*/
.pagenavi { position: absolute; /*top: 506px;*/top: 487px; right: 40px; width: 222px;  margin: 10px 0;}
.pagenavi div.k_info { line-height: 14px; height: 28px; border-bottom: 3px solid #fff; color: #0a9ace; padding: 0 0 5px;}

.pagenavi div.prev { float: left; text-align: left; line-height: 30px; }
.pagenavi div.next { xfloat: left; text-align: right; line-height: 30px; margin-left: 95px; }

.pagenavi div.prev a { display: block; width: 70px; text-align: left; line-height: 30px; padding: 0 10px 0 15px; 		background: url(images/bg_icon_sprite.png) no-repeat 0 -252px;}
.pagenavi div.next a { display: block;  width: 50px; text-align: right; line-height: 30px; padding: 0 15px 0 10px; 	background: url(images/bg_icon_sprite.png) no-repeat 100% -252px;}


/*
-----------------------------
 Typography
-----------------------------
*/
body						{ letter-spacing: 0.01em;}
h1,
.teaser_big h1.home_teaser,
.teaser_big h1.home_teaser a		{ font-family: BrandonGrotesque-Black; font-style: normal; font-weight: normal; font-size: 24px; line-height: 1.16em; text-transform: uppercase; letter-spacing: 0.09em;}
h2, h3 					{ font-size: 1em; letter-spacing: 0.09em;}
h2,
.page .teaser_referenzen h2,
.page .teaser_referenzen h2 a,
#container .post h2, 
#container .post h2 a	{ font-family: BrandonGrotesque-MediumItalic; font-style: normal; font-weight: normal; font-size: 13px; line-height: 1.3em; text-transform: uppercase;}

.teaser h2, 
.teaser h2 a,
.page .teaser_personal h2, 
.page .teaser_personal h2 a,
.page .teaser h2 a, 
.teaser_home h2,
.teaser_home h2 a 		{ font-family: BrandonGrotesque-Black; font-style: normal; font-weight: normal; font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em;}
.page .teaser_personal h3, 
.page .teaser_personal h3 a,
.teaser p, 
.teaser_home p			{ font-family: BrandonGrotesque-MediumItalic; font-style: normal; font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;}

#footer 					{ font-family: BrandonGrotesque-Medium; font-style: normal; font-weight: normal; font-size: 11px; line-height: 25px; text-transform: uppercase; letter-spacing: 0.09em;}
#footer strong			{ font-family: BrandonGrotesque-Black; font-style: normal; font-weight: normal;}

/*.post a, 
.page a*/
.pagenavi a,
.pagenavi div.k_info a 					{ font-family: BrandonGrotesque-Medium; font-style: normal; font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: #000;}

/*.page .teaser_referenzen a {font-family: BrandonGrotesque-Regular; font-style: normal; font-weight: normal; font-size: 14px; text-transform: none; letter-spacing: 0.01em;}*/

.page h2,
.page h2 a 				{ font-family: BrandonGrotesque-Black; font-style: normal; font-weight: normal; font-size: 14px; text-transform: uppercase; letter-spacing: 0.09em;}

.page h3					{ font-family: BrandonGrotesque-MediumItalic; font-style: normal; font-weight: normal; font-size: 14px; text-transform: uppercase; letter-spacing: 0.09em;}

/*.post a,
.teaser_personal a,
.page .teaser_referenzen a,*/ 
a 			{ font-family: BrandonGrotesque-Medium; font-style: normal; font-weight: normal; color: #000}
em a 		{ font-family: BrandonGrotesque-MediumItalic; font-style: normal; font-weight: normal; color: #000}

/*.post a:hover,
.teaser_personal a:hover,
.page .teaser_referenzen a:hover		{ color: #0a9ace;}*/


h1, h2, h3, p { padding-bottom: 12px;}

.teaser h1, .teaser h2, .teaser h3, .teaser p,
.teaser_home h1, .teaser_home h2, .teaser_home h3, .teaser_home p,
.teaser_personal h1, .teaser_personal h2, .teaser_personal h3, .teaser_personal p { padding: 0px;}

.teaser h2, .teaser_home h2 {padding: 10px 0 0px; line-height: 17px;}
.teaser h2 a, .teaser_home h2 a, .teaser a, .teaser_home a  {color: #000;}
.teaser p, .teaser_home p {padding: 0px 0 5px;}

.teaser h3 { 	font-weight: normal;}

.teaser_big h1.home_teaser { float: right; width: 222px;}
.teaser_big h1.home_teaser a { color: #000;}

#container .post h1 { float: right; width: 222px; xpadding: 0;}

.pagenavi div.k_info a { background: url(images/bg_icon_sprite.png) no-repeat 0 4px; padding-left: 12px;}

#container .post img { margin-bottom: 10px;}

/* hide-me */
#container .post img.hide-me { display: none;}




/* Imprint */
.page-id-663 #content { width: 706px;}
.page-id-663 h1, .page-id-663 h2, .page-id-663 h3 { padding-bottom: 0px; text-transform: uppercase; font-style: normal;}
.page-id-663 h2 {padding-bottom: 12px}
/*#container .post img,
.page-id-20 #container .page img { float: left; margin-right: 20px;}
*/

img.alignleft { float: left; margin-right: 20px;}

/* subpage */
#content.subpage_agentur 				{ width: 382px; margin-left: 566px;}
#content.subpage_agentur img.alignleft 	{ margin: 10px 0 0 -566px; }
#content.subpage_agentur h1				{ font-family: BrandonGrotesque-Black; font-style: normal; font-weight: normal; font-size: 24px; line-height: 1.16em; text-transform: uppercase; letter-spacing: 0.09em; color: #0A9ACE}
#content.subpage_agentur h2				{ font-family: BrandonGrotesque-MediumItalic; font-style: normal; font-weight: normal; font-size: 13px; line-height: 1.3em; text-transform: uppercase; color: #000;}



iframe { float: left;margin-right: 20px; border-bottom: 50px solid #e2e6e1;}

#container .page ul li { background: url(images/bg_icon_sprite.png) no-repeat 0 -32px; padding: 0 0 0 10px;}

#footer a { color: #000;}

/*
-----------------------------
	Kontaktform
-----------------------------
*/
.page-id-18 { font-family: BrandonGrotesque-Medium; font-style: normal; font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: #000;}
/* .page-id-18 h2 { padding-top: 180px;} */

div.wpcf7 { float: left; margin: 0; padding: 0; width: 560px;}

div.wpcf7 input,
div.wpcf7 textarea { width: 256px; height: 19px; border: 1px solid #000; background: #e2e6e1; font: 14px/1.6em BrandonGrotesque-Regular, Arial, sans-serif; padding: 0 2px; margin: 3px 0;}
div.wpcf7 textarea { height: 150px; width: 460px;}
div.wpcf7 input.wpcf7-submit { border: none; width: 107px; background: url(images/bg_icon_sprite.png) no-repeat 0 -157px; color: #000; line-height: 1em; font-family: BrandonGrotesque-Medium; font-style: normal; font-weight: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: #000;}

div.wpcf7 {
	margin: 0;
	padding: 0;
}
div.wpcf7-mail-sent-ok { border: 2px solid #0a9ace!important;}
div.wpcf7-mail-sent-ng { border: 2px solid #0a9ace!important;}
div.wpcf7-spam-blocked { border: 2px solid #0a9ace!important;}
div.wpcf7-validation-errors { border: 2px solid #0a9ace!important;}
span.wpcf7-not-valid-tip { border: 1px solid #0a9ace!important;}
span.wpcf7-not-valid-tip-no-ajax { color: #0a9ace!important;}

div.wpcf7 div.wpcf7-response-output {	margin: 0;}


/* DSGVO Checkbox  */
.dsgvo .wpcf7-list-item {
  margin: 0;
}
.dsgvo input {
  width: auto!important;
  height: auto!important;
  margin-right: 10px;
}
.dsgvo .wpcf7-list-item-label,
p.dsgvo {
  font-size: 10px;
}
input.wpcf7-submit {
  cursor: pointer;
}
input.wpcf7-submit[disabled=""] {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Cookie Notice */
.cookie-notice-container {
  font-size: 14px;
}
body { padding-bottom: 80px; }
@media (min-width: 768px) {
  body { padding-bottom: 50px; }  
}
@media (min-width: 1100px) {
  body { padding-bottom: 20px; }  
}