@charset "utf-8";
/**
 * @author		Tobias Fuhlroth
 * @copyright	Maxomedia - Agentur für Crossmedia-Kommunikation BSW
 */

/*##################################################################|
/----[=general] */

.html-container {
	position : absolute; left : 0; top : 0; z-index : 200;
	width : 100%; height : 0; min-width : 840px;
}
#main-container {
	position : relative; left : 0; top : 0;
	width : 540px; margin : 40px auto 0;
}
#header-container { height : 70px; padding-top : 30px; background-color : #fff; }
#header-container a {
	display : block;
	width : 190px; height : 46px; margin : 0 auto;
	overflow : hidden; text-indent : -1000px;
	background : url(../_gfx/logo_maxomedia.gif) no-repeat left top;
}

#body-container {
	background : #e8e8e8 url(../_gfx/bg_body-container.gif) repeat-y center top;
	border : 10px solid #fff;
}
#body-content-container { background : url(../_gfx/bg_body-content-container.jpg) no-repeat center top; }
#body-content { min-height : 420px; padding : 20px 25px; background : url(../_gfx/bg_body-content.jpg) no-repeat center bottom; }

#body-container.box { background-image : url(../_gfx/bg_box-container.gif); }
#body-container.box #body-content-container { background-image : url(../_gfx/bg_box-content-container.jpg); }
#body-container.box #body-content { min-height : 460px; padding : 0; background-image : url(../_gfx/bg_box-content.jpg); }


#footer-container {
	position : relative; left : 0px; bottom : 0px;
	width:540px;  margin : 10px auto 0;
	text-transform : uppercase; text-align : center; 
	font-family : georgia; font-size : 9px;
}
#footer-container a { margin : 0 15px; color : #6a6a6a; }

#flash-container {
	/*position : fixed; left : 0; top : 0; z-index : 100;*/
	position : absolute; left : 0; top : 0; z-index : 100;
	width : 100%; height : 100%;
	line-height : 0; overflow : hidden;
	background-image: url(/_gfx/bg_site.jpg);
	background-position: top center; background-repeat:no-repeat;
}

#ie6-disclaimer
{
    display:none;
}

.author { margin : 0; text-align : right; }
.separator { padding-bottom : 35px;	background : url(../_gfx/separator.png) no-repeat center bottom; }

/*##################################################|*/
/* #COMPATIBILITYBAR# */

.compatibilitybar {
	position : relative; left : 0; top : -1px;
	overflow : hidden; height : 0; width:100%;
	border-bottom : 1px solid #808080;
	position:absolute;
	z-index:10000;
}
.compatibilitybar-message {
	padding : 6px 10px 5px 35px;
	background : #ffffe1 url(../_gfx/icon_compatibilitybar.gif) no-repeat 10px center;
}
.compatibilitybar-message a { text-decoration : underline; color : #f00; }
.compatibilitybar-message a:hover { text-decoration : none; }
.compatibilitybar-close {
	position : absolute; right : 10px; top : 7px;
	width : 14px; height : 14px;
	background : url(../_gfx/icon_compatibilitybar-close.gif) no-repeat left top;
}

/*##################################################################|
/----[=card-container] */

#card-container { width : 464px; padding-top : 12px; margin : 0 auto; }
#card-header { height : 23px; background : url(../_gfx/bg_card-header.png) no-repeat center top; }
#card-body { background : url(../_gfx/bg_card-body.gif) repeat-y center top; }
#card-content { min-height : 371px; padding : 25px 27px 0; margin : 0 auto; background : url(../_gfx/bg_card-content.jpg) no-repeat center top; }
#card-footer { height : 29px; background : url(../_gfx/bg_card-footer.png) no-repeat center bottom; }


/*##################################################################|
/----[=mainnav] */

#mainnav {
	position : absolute; left : -22px; top : 154px;
	width : 22px; margin : 0;
	list-style : none;
}
#mainnav li {
	overflow : hidden;
	width : 100%; height : 92px; margin-bottom : 1px;
	text-indent : -1000px;
	background : no-repeat left top;
}
#mainnav a {
	display : block; height : 100%;
	background : no-repeat 22px 0;
}
#mainnav .active a { background-position : 0 0; }

#mainnav .agency { background-image : url(../_gfx/btn_mainnav-agency.png); }
#mainnav .agency a { background-image : url(../_gfx/btn_mainnav-agency_on.png); }
#mainnav .team { background-image : url(../_gfx/btn_mainnav-team.png); }
#mainnav .team a { background-image : url(../_gfx/btn_mainnav-team_on.png); }
#mainnav .work { background-image : url(../_gfx/btn_mainnav-work.png); }
#mainnav .work a { background-image : url(../_gfx/btn_mainnav-work_on.png); }
#mainnav .contact { background-image : url(../_gfx/btn_mainnav-contact.png); }
#mainnav .contact a { background-image : url(../_gfx/btn_mainnav-contact_on.png); }


/*##################################################################|
/----[=context] */

#contextnav {
	position : absolute; right : -22px; top : 269px;
	overflow : hidden; width : 22px; margin : 0;
	list-style : none;
}
#contextnav li {
	overflow : hidden;
	width : 100%; height : 92px; margin-bottom : 1px;
	text-indent : -1000px;
	background : no-repeat left top;
}
#contextnav a { display : block; height : 100%; cursor : pointer; }
#contextnav span {	display : block; height : 100%;	margin-left : -22px; background : no-repeat left top; }

#contextnav li.back { background-image : url(../_gfx/btn_contextnav-back.png); }
#contextnav li.back span { background-image : url(../_gfx/btn_contextnav-back_on.png); }
#contextnav li.test { background-image : url(../_gfx/btn_contextnav-back.png); }
#contextnav li.test span { background-image : url(../_gfx/btn_contextnav-back_on.png); }


/*##################################################################|
/----[=clients] */

#body-container .clients ul { list-style : none; margin : 0; }
#body-container .clients li {
	padding-bottom : 35px;
	background : url(../_gfx/separator.png) no-repeat center bottom;
}
#body-container .clients a, #body-container .clients span {
	display : block;
	overflow : hidden; text-indent : -1000px;
	background : no-repeat center center;
}

#body-container .clients .h100 { height : 100px; }
#body-container .clients .h90 { height : 90px; }
#body-container .clients .h150 { height : 150px; }


/*##################################################################|
/----[=media-corner] */

.media-corner-container h2 { font-weight : normal; font-size : 12px; margin-bottom : 8px; }

#press-overview { list-style : none; margin : 0; padding-bottom : 35px; background : url(../_gfx/separator.png) no-repeat center bottom; }
#press-overview li { margin-bottom : 8px; }
#press-overview span { float : left; }
#press-overview h3 { padding-left : 125px; }
#press-overview h3 span { float : none; font-weight : normal; }

#press-images { list-style : none; margin : 0; padding-bottom : 35px; background : url(../_gfx/separator.png) no-repeat center bottom; }
#press-images li { margin-bottom : 8px; }
#press-images img { float : left; }
#press-images div { padding-left : 125px; }
#press-images a { font-weight : bold; }
#press-images span { display : inline-block; width : 50px; }
#press-images .type { width : 35px; }
#press-images .resolution { margin-right : 20px; text-align : right; }

/*##################################################################|
/----[=home] */

#homeBackGround
{
    width:520px;
    height:460px;
    margin:0px;
    background-repeat:no-repeat;
    background-position:center center;
    left:10px;
    top:110px;
    position:absolute;
    
}
/*##################################################################|
/----[=news] */

#news-overview, #news-overview-archive { list-style : none; margin : 0; }
#news-overview li, #news-overview-archive li { padding-bottom : 35px; margin-bottom : 8px; background : url(../_gfx/separator.png) no-repeat center bottom; }
#news-overview span, #news-overview-archive span { float : left; }
#news-overview h2, #news-overview-archive h2 { padding-left : 125px; }

.news-overview-archive-button { text-align : right; }
#news-overview-archive-container { overflow : hidden; }

.news-detail h1 { margin : 0; }


/*##################################################################|
/----[=jobs] */

#jobs-overview { list-style : none; margin : 0; }
#jobs-overview li { padding-bottom : 35px; margin-bottom : 8px; background : url(../_gfx/separator.png) no-repeat center bottom; }
#jobs-overview span { float : left; }
#jobs-overview h2 { padding-left : 125px; }
#jobs-overview h2 span { float : none; font-weight : normal; }

.jobs-detail h1 { margin : 0; }


/*##################################################################|
/----[=contact] */

.contact-container h2 { font-weight : normal; font-size : 12px; margin-bottom : 8px; }
.contact-address { margin-bottom : 15px; }
.contact-address div { float : left; width : 185px; }


/*##################################################################|
/----[=guestbook] */

.guestbook-title { padding-bottom : 5px; margin-bottom : 0; background-color : #fff; width:520px; }

#guestbook-viewport { background-color : #fff; width:520px; }
#guestbook-viewport .miniflick-item { background : url(../_gfx/guestbook-placeholder.gif) no-repeat left top; }

#guestbook-element { list-style : none; margin : 0; }
#guestbook-element li { padding-bottom : 35px; margin-bottom : 8px; background : url(../_gfx/separator.png) no-repeat center bottom !important; }

#frm-guestbook {
	padding : 10px 0 1px 0;
	background-color : #fff;
}
#frm-guestbook fieldset { }
#frm-guestbook li { margin-bottom : 10px; }
#frm-guestbook textarea { width : 310px; height: 100px; }

#fb-guestbook-fields { position : relative; left : 0; top : 0; height : 215px; margin-bottom : 30px; }
#fb-guestbook-name { position : absolute; left : 0; top : 0; }
#guestbook_name { width : 310px; }
#fb-guestbook-pic { position : absolute; right : 0; top : 0; }
#fb-guestbook-text { position : absolute; left : 0; top : 48px; }
#fb-guestbook-submit { position : absolute; left : 0; bottom : 0; }

.fb-logged-in { display : none; }

#fb-connect { cursor : pointer; }
#fb-logout { cursor : pointer; }

#fb-pic-preview-container {
	display : none; overflow : hidden;
	position : relative; left : 0; top : 0;
	width : 173px; height : 153px; margin-bottom : 10px;
	background : url(../_gfx/guestbook-placeholder.gif) no-repeat left top;
}
#fb-pic-preview { position : absolute; left : 0; top : 0; cursor : move; background : no-repeat center center; }


/*##################################################################|
/----[=team] */

.team-container { position : relative; left : 0; top : 0; }
#team-viewport {}

#team-element { list-style : none; margin : 0; }
#team-element li { padding-bottom : 35px; margin-bottom : 8px; background : url(../_gfx/separator.png) no-repeat center bottom !important; }

#placeholder-container { display : none; }


/*##################################################################|
/----[=work] */

.work-container { position : relative; left : 0; top : 0; }
#work-viewport {}

#work-element { list-style : none; margin : 0; }
#work-element li { padding-bottom : 35px; margin-bottom : 8px; background : url(../_gfx/separator.png) no-repeat center bottom !important; }


/*##################################################################|
/----[=separator] */

.separator { padding-bottom : 35px; margin-bottom : 8px; background : url(../_gfx/separator.png) no-repeat center bottom !important; }


/*##################################################################|
/----[=loader] */

#loader-container {
	visibility : hidden;
	position : absolute; left : 0; top : 0; z-index : 3000;
	width : 100%; height : 100%;
	background-color : #000;
}
#loader-bar {
	width : 200px; height : 11px; margin : 215px auto 0;
	background : url(../_gfx/bg_loader.gif) no-repeat -200px 0;
	border : 1px solid #fff;
}
#loader-label { margin-top : 5px; text-align : center; }


/*##################################################################|
/----[=instructions] */

#instructions-container {
	position : absolute; left : 50%; top : 50%; z-index : 10000;
	width : 172px; height : 140px; margin-top : -86px; margin-left : -70px;
}


/*##################################################################|
/----[=flick] */

.flick-viewport {
	position : relative; left : 0; top : 0;
	width : 520px; height : 460px;
	overflow : hidden;
}
.flick-element {
	list-style : none; position : absolute; left : 0; top : 0;
	margin : 0;
}
.flick-item {
	float : left; position : relative; left : 0; top : 0; z-index : 10;
	overflow : hidden;
	width : 520px; height : 460px;
	background : url(../_gfx/bg_box-full.jpg) no-repeat left top;
	cursor : move;
}
.flick-controls { text-align : right; }
.flick-controls span { float : left; }
.flick-controls span a { margin-left : 0; }
.flick-controls a { margin-left : 10px; }

.flick-item .infos-container {
	position : absolute; left : 0; bottom : 0; z-index : 20;
	width : 520px;
}
.flick-item .infos {
	padding : 10px 20px;
	background : #f2f2f2 url(../_gfx/bg_infos.jpg) no-repeat left top;
}
.infos h2 { font-weight : normal; font-size : 24px; line-height : 1.3; margin-bottom : 0; }
.infos h2 a:hover { text-decoration : none; cursor : default; }
.infos h3 { margin-bottom : 10px; font-weight : normal; }

.infos .misc { margin : 0; text-align : right; }
.infos span { float : left; }

.flick-item .infos-container .button {
	position : absolute; right : 0px; top : -32px;
	width : 33px; height : 32px;
	background-repeat : no-repeat;
}
.flick-item .infos-container .hide 
    { background-image : url(../_gfx/icon_button_down.png); }
.flick-item .infos-container .show 
    { background-image : url(../_gfx/icon_button_up.png); } 
/*
.flick-item .infos-container .button {
	position : absolute; right : 20px; top : -12px;
	width : 25px; height : 12px;
	background-repeat : no-repeat;
}
.flick-item .infos-container .hide 
    { background-image : url(../_gfx/icon_infos-down.png); }
.flick-item .infos-container .show 
    { background-image : url(../_gfx/icon_infos-up.png); } 
*/

/*##################################################################|
/----[=miniflick] */

.miniflick-viewport {
	position : relative; left : 0; top : 0;
	width : 519px; height : 459px;
	overflow : hidden;
}
.miniflick-element {
	list-style : none; position : absolute; left : 0; top : 0;
	margin : 0;
}
.miniflick-item {
	float : left; position : relative; left : 0; top : 0; z-index : 10;
	overflow : hidden;
	width : 173px; height : 153px;
	text-indent : -10000px;
	background : url(../_gfx/bg_box-full.jpg) no-repeat center center;
	cursor : move;
}
.miniflick-controls { text-align : right; }
.miniflick-controls span { float : left; }
.miniflick-controls span a { margin-left : 0; }
.miniflick-controls a { margin-left : 10px; }

.miniflick-item .infos {
	position : absolute; left : 0; bottom : 0; z-index : 20;
	width : 480px; padding : 10px 20px 0;
	background : #f2f2f2 url(../_gfx/bg_infos.jpg) no-repeat left top;
}
.infos h2 { font-weight : normal; font-size : 24px; line-height : 1.3; margin-bottom : 0; }
.infos h2 a:hover { text-decoration : none; cursor : default; }
.infos h3 { margin-bottom : 10px; font-weight : normal; }

.infos .misc { text-align : right; }
.infos span { float : left; }

.miniflick-item .infos .hide {
	position : absolute; right : 20px; top : -12px;
	width : 25px; height : 12px;
	background : url(../_gfx/icon_infos-hide.png) no-repeat left top;
}


/*##################################################################|
/----[=radar] */

#radar-container {
	position : absolute; left : 0; top : 0; z-index : 1000;
}

#radar-container .topright { position : absolute; right : -3px; top : -3px; }
#radar-container .bottomright { position : absolute; right : -3px; bottom : -3px; }
#radar-container .bottomleft { position : absolute; left : -3px; bottom : -3px; }
#radar-container .topleft {	position : absolute; left : -3px; top : -3px; }

#radar-container .radar {
	position : absolute; left : 28px; top : 28px; z-index : 1000;
	list-style : none; margin : 0;
}
#radar-container .radar li {
	position : absolute; left : 0; top : 0; z-index : 20;
	background : url(../_gfx/icon_radar-unviewed_black.gif) no-repeat center center; cursor : pointer;
}
#radar-container .radar li:hover,
#radar-container .radar .viewed,
#radar-container .radar .active { background-color : #000; }

#radar-container .btn {
	position : absolute; left : 0; top : 0; z-index : 1000;
	width : 20px; height : 20px;
	background : url(../_gfx/btn_radar.gif) no-repeat left top;
	overflow : hidden; cursor : pointer;
}
#radar-container .btn:hover, #radar-container .btn.active { background-image : url(../_gfx/btn_radar_on.gif); }


/*##################################################################|
/----[=filter] */

.filter { position : absolute; left : 20px; top : 0; z-index : 2000; }
.filter .button {
	position : absolute; left : 0; top : 0; z-index : 100;
	width : 100%; height : 18px; padding-left : 8px;
	font-size : 10px; white-space : nowrap;
	background : #fff url(../_gfx/bg_filter-button_open.gif) no-repeat right center;
	border : 1px solid; border-color : #ececec #d8d8d8 #d8d8d8 #f5f5f5;
}
.filter .button:hover { text-decoration : none; }
.isVisible .button { background-image : url(../_gfx/bg_filter-button_close.gif) !important; }


/*##################################################################|
/----[=menu] */

.menu { visibility : hidden; position : absolute; left : 0; top : 19px; z-index : 50; }

.menu ul {
	list-style : none; margin : 0;
	background-color : #fff; border : 1px solid; border-color : #ececec #d8d8d8 #d8d8d8 #f5f5f5;
}
.menu li { position : relative; left : 0; top : 0; }
.menu li a { display : block; padding : 0 16px 0 8px; font-size : 10px; white-space : nowrap; }
.menu li a:hover {
	text-decoration : none; color : #fff;
	background : #656968 url(../_gfx/bg_filter-item.gif) repeat-x left top;
}
.menu li ul { display : none; position : absolute; left : 100%; top : -1px; }


/*##################################################################|
/----[=tooltip] */

.tooltip { z-index : 2000; max-width : 200px; padding : 0 6px; background-color : #fff; }


/*##################################################################|
/----[=media] */

#media-container {
	display : none; position : absolute; left : 0; top : 0; z-index : 5000;
	width : 100%; height : 100%;
}

#media-container2 {
	display : none; position : absolute; left : 0; top : 0; z-index : 5001;
	width : 100%; height : 100%;
}

#media-container2.jobs
{
	top:110px;
	left:10px;
}

/*##################################################################|
/----[=storytelling] */

.story1 {
    background-image:url(../_upload/story/story1.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story2 {
    background-image:url(../_upload/story/story2.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story3 {
    background-image:url(../_upload/story/story3.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story4 {
    background-image:url(../_upload/story/story4.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story5 {
    background-image:url(../_upload/story/story5.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story6 {
    background-image:url(../_upload/story/story6.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story7 {
    background-image:url(../_upload/story/story7.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story8 {
    background-image:url(../_upload/story/story8.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    padding-bottom : 0 !important;
}

.story9 {
    background-image:url(../_upload/story/story9.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story10 {
    background-image:url(../_upload/story/story10.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story11 {
    background-image:url(../_upload/story/story11.png) !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

.story12 {
    background-image:url(../_upload/story/story12.png) !important; 
    background-repeat: no-repeat !important;
    background-position: center top !important;
}


.btnNext
{
	position : absolute; 
	display : block;
	width : 45px; height : 26px; 
	background : url(../_upload/story/button_bg.png) no-repeat center top;
	bottom : 10px; right : 10px;
	padding : 6px 0 0 35px;
}

#StoryTelling a 
{
	text-decoration : underline;
}

#StoryTelling a.next
{
	text-decoration : underline;
	float : right;
	font-weight : bold;
}