/*
Theme Name: Bell Étage
Theme URI: http://belletage.com/
Description: Based on the marvelous 2010 theme by the worpress team
Author: bavariansocialclub
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: bell etage
*/


/* 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: 12px/1.6em Georgia, serif; color: #000; font-style: italic;}
a { color: #ef3988; text-decoration: none;}
a:hover { text-decoration: underline;}


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

body { 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: 450px; height: 166px; position: absolute; top: 0; right: 35px; background: url(images/artwork_home.gif) no-repeat 100% 0;}
	.page-id-12 #artwork, .page-id-20 #artwork, .page-id-22 #artwork, .page-id-24 #artwork {background-image: url(images/artwork_agentur.jpg);}
	.page-id-14 #artwork, .category #artwork {background-image: url(images/artwork_arbeiten.jpg);}
	.page-id-16 #artwork {background-image: url(images/artwork_refs.jpg);}
	.page-id-18 #artwork {background-image: url(images/artwork_kontakt.jpg);}
#menu { width: 948px; height: 53px;}
#container { width: 100%; xmin-height: 500px; padding: 17px 0 20px; position: relative;}
#footer { width: 948px; height: 30px; clear: both; border-top: 1px solid #000; 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.gif) 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: #fff;}
/*#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; background: url(images/bg_menu_sprite.png) no-repeat 0 0; text-indent: -999em;}
#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:  97px;}
#menu li#menu-item-33 a 	{ background-position: 0 -33px; width: 107px;}
#menu li#menu-item-36 a 	{ background-position: 0 -66px; width: 135px;}
#menu li#menu-item-37 a 	{ background-position: 0 -99px; width:  98px;}
/* 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: 97px;}
#menu li#menu-item-33 a:hover, #menu li#menu-item-33.current-menu-item a, #menu li#menu-item-33.current-menu-parent a, .category #menu li#menu-item-33 a	{ background-position: -200px -33px; width: 107px;}
#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: 135px;}
#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: 98px;}

/* 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: 57px;}
#menu .current-menu-item li#menu-item-34 a, #menu .current-menu-parent li#menu-item-34 a { background-position: 0px -420px; width: 86px;}
#menu .current-menu-item li#menu-item-35 a, #menu .current-menu-parent li#menu-item-35 a { background-position: 0px -440px; width: 74px;}
#menu .current-menu-item li#menu-item-1345 a, #menu .current-menu-parent li#menu-item-1345 a { background-position: 0px -460px; width: 38px;}
/* item2 */
#menu li#menu-item-21 a { background-position: 0px -200px; width: 43px;}
#menu li#menu-item-22 a { background-position: 0px -220px; width: 75px;}
#menu li#menu-item-23 a { background-position: 0px -240px; width: 46px;}
#menu li#menu-item-24 a { background-position: 0px -260px; width: 41px;}
#menu li#menu-item-25 a { background-position: 0px -280px; width: 42px;}
#menu li#menu-item-26 a { background-position: 0px -300px; width: 42px;}
#menu li#menu-item-27 a { background-position: 0px -320px; width: 53px;}
#menu li#menu-item-28 a { background-position: 0px -340px; width: 46px;}

/* 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: 57px;}
#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: 86px;}
#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: 74px;}
#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: 38px;}
/* item2 */
#menu li#menu-item-21 a:hover { background-position: -200px -200px; width: 43px;}
#menu li#menu-item-22 a:hover { background-position: -200px -220px; width: 75px;}
#menu li#menu-item-23 a:hover { background-position: -200px -240px; width: 46px;}
#menu li#menu-item-24 a:hover { background-position: -200px -260px; width: 41px;}
#menu li#menu-item-25 a:hover { background-position: -200px -280px; width: 42px;}
#menu li#menu-item-26 a:hover { background-position: -200px -300px; width: 42px;}
#menu li#menu-item-27 a:hover { background-position: -200px -320px; width: 53px;}
#menu li#menu-item-28 a:hover { background-position: -200px -340px; width: 46px;}
#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: -20px;}
#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: 43px;}
#catmenu li.cat-item-4  a { background-position: 0px -220px; width: 75px;}
#catmenu li.cat-item-5  a { background-position: 0px -240px; width: 46px;}
#catmenu li.cat-item-6  a { background-position: 0px -260px; width: 41px;}
#catmenu li.cat-item-25 a { background-position: 0px -280px; width: 42px;}
#catmenu li.cat-item-26 a { background-position: 0px -300px; width: 42px;}
#catmenu li.cat-item-7  a { background-position: 0px -320px; width: 53px;}
#catmenu li.cat-item-8  a { background-position: 0px -340px; width: 46px;}
/* second level :hover */
#catmenu li.cat-item-1 a:hover,  #catmenu li.cat-item-1.current-cat  a, .page-id-14 #catmenu li.cat-item-1 a { background-position: -200px -200px; width: 43px;}
#catmenu li.cat-item-4 a:hover,  #catmenu li.cat-item-4.current-cat  a { background-position: -200px -220px; width: 75px;}
#catmenu li.cat-item-5 a:hover,  #catmenu li.cat-item-5.current-cat  a { background-position: -200px -240px; width: 46px;}
#catmenu li.cat-item-6 a:hover,  #catmenu li.cat-item-6.current-cat  a { background-position: -200px -260px; width: 41px;}
#catmenu li.cat-item-25 a:hover, #catmenu li.cat-item-25.current-cat a { background-position: -200px -280px; width: 42px;}
#catmenu li.cat-item-26 a:hover, #catmenu li.cat-item-26.current-cat a { background-position: -200px -300px; width: 42px;}
#catmenu li.cat-item-7 a:hover,  #catmenu li.cat-item-7.current-cat  a { background-position: -200px -320px; width: 53px;}
#catmenu li.cat-item-8 a:hover,  #catmenu li.cat-item-8.current-cat  a { background-position: -200px -340px; width: 46px;}

/*
-----------------------------
 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: 1px solid #000; position: relative;}

.teaser .so-new, .teaser_home .so-new { position: absolute; top: 6px; right: -6px; z-index: 10; 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: 10; width: 60px; height: 60px; background: url(images/batch_hotandnew.png) no-repeat 0 0;}

.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: #ef3988;}
.teaser_personal h3 { color: #ef3988; font-weight: normal;border-bottom: 1px solid #000;}

/* 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: #ef3988;*/}
.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: #ef3988;*/ }
.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: #ef3988;*/ }
.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: 14px; border-bottom: 1px solid #000; color: #ef3988; padding: 0 0 5px;}

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

.pagenavi div.prev a { display: block; width: 50px; text-align: left; line-height: 30px; padding: 0 10px 0 25px; background: url(images/icon_arrow_left.gif) no-repeat 0% 55%;}
.pagenavi div.next a { display: block;  width: 30px; text-align: right; line-height: 30px; padding: 0 25px 0 10px; background: url(images/icon_arrow_right.gif) no-repeat 100% 55%;}


/*
-----------------------------
 Typography
-----------------------------
*/
h1 { font-family: PosterBodoniBT-Roman; font-style: normal; font-weight: normal; font-size: 25px; line-height: 1em; text-transform: uppercase;}
h2, h3 { font-size: 1em;}
h2 { 	font-style: normal; text-transform: uppercase;}

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,
.page-id-20 #container .page h1, 
.page-id-1321 #container .page h1 { float: right; width: 222px; padding: 0;}

#container .post h2,
.page-id-20 #container .page h2,
.page-id-1321 #container .page h2 { color: #ef3988;}

.page-id-22 #container .page h1 { display: none;}

#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;}
iframe { float: left;margin-right: 20px; border-bottom: 50px solid #fff;}

#container .page ul li { background: url(images/icon_arrow_right.gif) no-repeat 0 60%; padding: 0 0 0 20px;}

#footer {font-size: 14px; line-height: 25px;}
#footer a { color: #000;}

/*
-----------------------------
	Kontaktform
-----------------------------
*/

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

div.wpcf7 input,
div.wpcf7 textarea { width: 256px; height: 19px; border: 1px solid #000; background: #fff; font: 12px/1.6em Georgia, serif;}
div.wpcf7 textarea { height: 150px; width: 460px;}
div.wpcf7 input.wpcf7-submit { width: 50px; background: #000; color: #fff; line-height: 19px;}

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

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