/* ==========================================================
// Box Layout
// ========================================================== */

/* ----------------------------------------------------------
// General Box Styles
// ---------------------------------------------------------- */

html
{
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body
{
	background-color: #ffffff;
	margin: 197px 0px 0px 0px;	/* Responsive */

    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
}

div#Creativity
{
	width: 100%;
}

div#Creativity > div
{
	padding-left: 25px;		/* Responsive */
	padding-right: 25px;	/* Responsive */
}

div#Creativity > div > div.Content
{
	/*border: solid 1px black;*/
	/*background-color: aquamarine;*/

	position: relative;
	max-width: 960px;		/* Responsive */
	margin: 0px auto;
}

div.Smaller
{
	/*border: dashed 1px red;*/
	/*background-color: greenyellow;*/

	/*width: 31.36%;*/
	width: 131px; /* Logo width + half of NaviSeparator */ /* Responsive */
	float: left;
}

div.Wider
{
	/*border: dashed 1px blue;*/
	/*background-color: azure;*/

	/*width: 68.64%;*/
	width: 659px;		/* Responsive */
	float: right;
}


/* ----------------------------------------------------------
// Box Styles for selected areas
// ---------------------------------------------------------- */

a.Logo
{
	display: block;
	background-image: url('../images/Logo.gif');	/* Responsive */
	width: 121px;									/* Responsive */
	height: 54px;									/* Responsive */
	background-repeat: no-repeat;

	border: 0px none;
	margin-top: 11px;								/* Responsive */
	margin-left: -4px;
}

div#Creativity > div#Balance
{
	/*background-color: aquamarine;*/
	/*border: solid 1px red;*/

	height: 197px; /* Responsive */
	background-color: #ffffff;

	/* Default scrolling behaviour: */
	/*position: relative;*/

	/* Fixed scrolling behaviour: */
	position: fixed;
	z-index: 201;
	left: 0px;
	right: 0px;
	top: 0px;

}

div#Creativity > div#Balance > div.Content
{
	/*background-color: aquamarine;
	border: dotted 1px blue;*/

	height: 100%;
	position: relative;
}

div#Creativity > div#Balance > div.Content > div.ZeroGravity
{
	/*border: dotted 1px red;*/
	/*background-color: aquamarine;*/

	position: absolute;
	top: 50%;
	margin-top: -39px; /* Responsive */
	height: 78px;  /* Responsive */
	left: 0px;
	right: 0px;
}

div#Creativity > div#Visualization
{
	/*margin-top: 226px;*/

	background-color: #dedede;
	overflow: hidden;
	position: relative; /* Needed for lte IE7 */

    margin-bottom: 0px;
}

div#Creativity > div#Visualization > div.Content
{
	/*position: relative;*/
}

div#Creativity > div#Visualization > div.Content > div.Slider
{
	height: 397px;			/* Responsive */
	width: 1680px;
	margin-left: -360px;	/* Responsive */
}

div#Creativity > div#Visualization > div.Content > div.Slider > ul > li
{
	background-color: #98b4ca;
}

div.Slider div.Slide
{
	/*background-color: azure;*/

	margin-left: 661px;  /* Responsive */ /* 360px + (345px/1100*960) */
	margin-top: 70px;    /* Responsive */ /* 78px - 8px */
	margin-right: 440px; /* Responsive */
}

@media only screen and (max-width: 921px)
{
	/* Show slider content left if on the right hand is too less space */
	
	div.Slider div.Slide
	{
		margin-left: 360px;
		margin-right: 740px;
	}

	div#Creativity > div#Visualization > div.Content > div.Slider li.panel
	{
		background-position: 230px 0px;
	}
}

div#Creativity > div#PreRuler
{
    height: 78px;               /* Responsive */
    margin-top: 0px;
    margin-bottom: 0px;

    position: relative;

    background-color: white; /* red; */

    /*display: none;*/
}

div#Creativity > div#Ruler
{
	/*border: solid 1px red;*/

    position: relative;

	background-color: #66a3dd;
	height: 78px;				/* Responsive */
	margin-top: -78px;			/* Responsive */
}

div#Creativity > div#Ruler.Fixed
{
	/* Fixed scrolling behaviour: */
	position: fixed;
	z-index: 200;
	left: 0px;
	right: 0px;
	top: 78px;					/* Responsive */
	margin-top: 0px;
}

div#Creativity > div#Teaser
{
	background-color: #66a3dd;
}

div#Creativity > div#Contrast
{
	/*background-color: #2a2a29;*/
    background-color: #ff6600;
}

div#Creativity > div.Light > div.Content img
{
	width: 100%;
	border: none;
}

div#Creativity > div.Light > div.Content img.Parallax
{
    margin-top: 39px;       /* Responsive */
    margin-bottom: 78px;    /* Responsive */
}


/* ----------------------------------------------------------
// Column layout
// ---------------------------------------------------------- */

div.Light > div.Content .Columns > .column > *
{
	margin-left: 19px;	/* Responsive */
	margin-right: 19px;	/* Responsive */
}

div.Light > div.Content .Columns > .column.first > *
{
	margin-left: 0px;
}

div.Light > div.Content .Columns > .column.last > *
{
	margin-right: 0px;
}

div.Light > div.Content .OnlyRightColumn
{
	position: relative;
	z-index: 2; 
	
	float: right;			/* Responsive */
	width: 50%;				/* Responsive */
	margin-bottom: 20px;	/* Responsive */
}

div.Light > div.Content .OnlyRightColumn > *
{
	margin-left: 19px;	/* Responsive */
}

div.Light > div.Content .OnlyLeftColumn
{
	position: relative;
	z-index: 2; 
	
	float: left;			/* Responsive */
	width: 50%;				/* Responsive */
	margin-bottom: 20px;	/* Responsive */
}

div.Light > div.Content .OnlyLeftColumn > *
{
	margin-right: 19px;	/* Responsive */
}



/* ----------------------------------------------------------
// Footer (Contrast)
// ---------------------------------------------------------- */

div#Creativity > div#Contrast > div.Content
{
	padding-top: 39px;		/* Responsive */
	padding-bottom: 48px;	/* Responsive */
}

div#Creativity > div#Contrast > div.Content > div
{
	float: left;
}

div#Creativity > div#Contrast > div.Content > div.Separator
{
	height: 1px;
	width: 4%;
}

div#Creativity > div#Contrast > div.Content > div.Who
{
	width: 13%;			/* Responsive */
}

div#Creativity > div#Contrast > div.Content .OneChar
{
    display: inline-block;
    width: 15px;
}

div#Creativity > div#Contrast > div.Content > div.Where
{
	width: 14%;			/* Responsive */
}

div#Creativity > div#Contrast > div.Content > div.What
{
	width: 19%;			/* Responsive */
}

div#Creativity > div#Contrast > div.Content > div.Why
{
	width: 19%;			/* Responsive */
}

div#Creativity > div#Contrast > div.Content > div.More
{
	width: 19%;			/* Responsive */
}

div#Creativity > div#Contrast > div.Content img.LogoWhite
{
	margin-left: -3px;
}

div#Creativity > div#Contrast > div.Content p,
div#Creativity > div#Contrast > div.Content a,
div#Creativity > div#Contrast > div.Content a:visited
{
	margin-top: 0px;
	margin-bottom: 0px;
	color: #ffffff;
}

div#Creativity > div#Contrast > div.Content a,
div#Creativity > div#Contrast > div.Content a:visited
{
	text-decoration: underline;
}

div#Creativity > div#Contrast > div.Content a:hover
{
	text-decoration: none;
}

div#Creativity > div#Contrast > div.Content h6
{
	margin-top: 0px;
	margin-bottom: 10px; /* Responsive */
	/*color: #ff6600;*/
    color: #000000;
}



/* ==========================================================
// Navigation
// ========================================================== */

/* ----------------------------------------------------------
// Main Navigation (Hierarchy Level 1)
// ---------------------------------------------------------- */

div#MainNavigation
{
	height: 78px;			/* Responsive */
	line-height: 78px;		/* Responsive */
	vertical-align: middle;
	/*text-align: right;*/
}

div#MainNavigation div.MenuOpener
{
	display: none;		/* Responsive */
}

div#MainNavigation a
{
	text-decoration: none;
	color: #000000;
}

div#MainNavigation span.Separator
{
	/*background-color: #ff6600;*/

	width: 20px;	/* Responsive */
	display: inline-block;
	height: 1px;
}

div#MainNavigation a.Active
{
	color: #ff6600;
}

div#MainNavigation a:hover
{
	text-decoration: underline;
}

/* ----------------------------------------------------------
// Sub Navigation (Hierarchy Level 2 + 3)
// ---------------------------------------------------------- */

div#SubNavigation
{
	/*border: 1px solid red;*/

	max-height: initial;
	line-height: 78px;		/* Responsive */
	height: 78px;			/* Responsive */
	/*overflow: hidden;*/
	/*white-space: nowrap;*/
}

div#SubNavigation > div.Bar
{
	/*border: 1px dotted black;*/

	white-space: nowrap;
	overflow: hidden;
	position: relative;
	height: 78px;				/* Responsive */
	/*margin-left: 36px;		/* = 16px + 20px for separator */ /* Responsive */
	/*margin-right: 36px;		/* = 16px + 20px for separator */ /* Responsive */
}

div#SubNavigation a,
div#SubNavigation .SeparatorLine
{
	text-decoration: none;
    white-space: nowrap;
	color: #ffffff;

    display: inline-block;
}

div#SubNavigation *
{
	/*line-height: 78px;		/* Responsive */ /* TEST */
	/*height: 78px;				/* Responsive */ /* TEST */
}

div#SubNavigation .SeparatorLine
{
	line-height: 73px;		/* Responsive */
	vertical-align: top;
}

div#SubNavigation span.Separator
{
	/*background-color: #ff6600;*/

	width: 20px;			/* Responsive */
	display: inline-block;
	height: 78px;
	height: 1px;
}

div#Ruler div#SubNavigation .Active > a
{
	text-decoration: underline;
}

/*div#Ruler:hover div#SubNavigation .Active a
{
	text-decoration: none;
}*/

div#SubNavigation a:hover
{
	text-decoration: underline;
}

div#SubNavigation .Level2,
div#SubNavigation .Level2Separator
{
	vertical-align: top;
}

div#SubNavigation div.NavigateLeft,
div#SubNavigation div.NavigateRight
{
	/*border: 1px dotted green;*/

	/*display: none;		/* Modified via JS */
	width: 61px;		/* = 16px + 20px for separator + 25px for margin */ /* Responsive */
	height: 78px;		/* Responsive */
	background-repeat: no-repeat;
}

div#SubNavigation div.NavigateLeft:hover,
div#SubNavigation div.NavigateRight:hover
{
	cursor: hand;
	cursor: pointer;
}

div#SubNavigation div.NavigateLeft
{
	background-image: url('../images/ArrowLeftActive.gif');
	background-position: 25px center;	/* Responsive */
	float: left;
	margin-left: -25px;	/* Responsive */
}

div#SubNavigation div.NavigateRight
{
	background-image: url('../images/ArrowRightActive.gif');
	background-position: 20px center;	/* Responsive */
	float: right;
	margin-right: -25px;	/* Responsive */
}



/* ==========================================================
// Fonts and Text
// ========================================================== */

body, h1, h2, h3, h4, h5, h6, p
{ 
	/*font-family: 'SourceSansProRegular', Arial, Helvetica, sans-serif;*/
	font-family: 'Gill Sans W01 Medium', 'SourceSansProRegular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 25px;
	color: #000000;
}

::selection
{
	color: #ffffff;
	/*background-color: #66a3dd*/
	Background-color: #ff6600;
}

div#Contrast ::selection
{
	color: #ff6600;
	Background-color: #ffffff;
}

h1,
#MainNavigation a,
#SubNavigation a,
#SubNavigation .SeparatorLine,
div.Slide div.Headline,
div.Slide div.Claim
{
	/*font-family: 'SourceSansProLight', Arial, Helvetica, sans-serif;*/
	font-family: 'Gill Sans W01 Light', 'SourceSansProLight', Calibri, Arial, Helvetica, sans-serif;
	font-size: 24px;		/* Responsive */
	font-weight: normal;

    -moz-hyphens: none;
    -o-hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none; 
}

div.Slide,
div.Slide a
{
	line-height: normal;
	color: #ffffff;
}

div.Slide div.Headline
{
	font-size: 44px;		/* Responsive */
	margin-bottom: 31px;	/* Responsive */
}

div.Slide div.Claim
{	
	line-height: 33px;		/* Responsive */
	margin-bottom: 33px;	/* Responsive */
	
}

div.Slide a.Link
{
	text-decoration: none;
}

div.Slide a.Link:hover
{
	text-decoration: underline;
}

h1
{
    /*background-color: whitesmoke;*/

	color: #ff6600;
	margin-top: 0px;
	padding-top: 35px;
}

h1 > em,
h1 > i
{
    /*background-color: yellow;*/

    /*font-size: 16px;*/
	/*font-weight: normal;*/
    font-style: normal;
	color: #000000;
    display: block;
    float: right;           /* Responsive */
    margin-left: 10px;      /* Responsive */
}

h2
{
	margin-bottom: 0px;
	color: #40668a;
}

a
{
	color: #66a3dd;
	text-decoration: none;
}

a:hover
{
	text-decoration: underline;
}

a:visited
{
	color: #40668a;
}

a:active
{
	color: #ff6600;
}

ul,
ol
{
	margin-left: 0px;
	list-style-position: outside;
	text-indent: 0px;
	padding-left: 0px;
}

ul
{
	list-style-image: url(../images/BulletPoint.gif);
}

li
{
	margin-left: 16px;
	padding-left: 0px;
	/*color: #000000;*/
}


/* ----------------------------------------------------------
// Color variations for other background colors (.FullWidth)
// ---------------------------------------------------------- */

.Orange a,
.Orange a:visited
{
	color: #ff6600;
}

.White h1,
.White a,
.White a:visited
{
	color: #ffffff;
}


/* ==========================================================
// Teaser
// ========================================================== */

div#Creativity > div#Teaser > div.Content
{
	padding-top: 17px;		/* Responsive */
	padding-bottom: 35px;	/* Responsive */
}

div#Creativity > div#Teaser > div.Content > div
{
	float: left;
	width: 19%;				/* Responsive */
}

div#Creativity > div#Teaser > div.Content > div.Separator
{
	float: left;
	width: 8%;				/* Responsive */
	height: 1px;
}

div#Creativity > div#Teaser > div.Content *
{
	color: #ffffff;
}

div#Creativity > div#Teaser > div.Content h2
{
	margin-bottom: 5px;
}

div#Creativity > div#Teaser > div.Content p
{
	margin-top: 0px;
	margin-bottom: 0px;
}

div#Creativity > div#Teaser > div.Content p.Description
{
	margin-bottom: 10px;	/* Responsive */
}

div#Creativity > div#Teaser > div.Content p.Picture
{

}

div#Creativity > div#Teaser > div.Content img
{
	width: 100%;
}

div#Creativity > div#Teaser > div.Content a,
div#Creativity > div#Teaser > div.Content a:visited 
{
	color: #ffffff;
	text-decoration: underline;
}

div#Creativity > div#Teaser > div.Content a:hover
{
	text-decoration: none;
}


/* ==========================================================
// News Styles (for News and Archive)
// ========================================================== */

div.News p.Date,
div.Light > div.Content .Columns > .column > p.Date
{
	float: left;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 0px;
}


/* ==========================================================
// Form Table (for Guestbook Entry, ...)
// ========================================================== */

table.FormTable
{
	display: block;
	clear: both;	
	/*width: 100%;*/
}

table.FormTable td
{
	width: auto;
}

table.FormTable td.LabelColumn
{
	padding-right: 15px;
	vertical-align: top;
	/*white-space: nowrap;*/
	width: 25%;
}

table.FormTable .Validator,
table.SimpleTable .Validator
{
	color: #ff6600;
	float: left;
	display: block;
	clear: both;
}

table.FormTable .InputField
{
	/*width: 220px;				/* Responsive */
	width: 100%;
	font-family: 'Gill Sans W01 Medium', 'SourceSansProRegular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #000000;
}

table.FormTable .Button,
table.FormTable .Submit
{
	font-family: 'Gill Sans W01 Medium', 'SourceSansProRegular', 'Trebuchet MS', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	color: #000000;
}

table.FormTable .CheckboxField
{
	display: inline-block;
	width: 110px;
	white-space: nowrap;
}




/* ==========================================================
// Special Content Formatting
// ========================================================== */

/* ----------------------------------------------------------
// Portrait - Philippe Gassmann (Picture)
// ---------------------------------------------------------- */

div.Light > div.Content div.PhilippeGassmannImage
{
	position: absolute;
	left: 50%;				/* Responsive */
	bottom: -40px;			/* Responsive */
	width: 1418px;			/* Responsive */
	height: 704px; 
	margin-left: -680px;	/* Responsive */
	z-index: 1;

	background-image: url('../images/uploadfiles/PhilippeGassmann.jpg'); 
	background-repeat: no-repeat; 
}

div.Light > div.Content div.HistoryImage
{
	display: normal;		/* Responsive */
	position: absolute;
	left: 50%;
	top: -40px;
	width: 280px;
	height: 591px;
	margin-left: -420px;
	z-index: 1;

	background-repeat: no-repeat;
}



/* ==========================================================
// Blog
// ========================================================== */

div#Creativity > div.Light > div.Content > .Blog
{
    margin-left: -1.8%; /* Responsive */
    margin-right: -1.8%; /* Responsive */
    padding-top: 90px;
    overflow: hidden;

}

.Blog > .Post
{
    /*border: solid 3px #66a3dd;*/
    float: left;
    width: 46.4%; /* Responsive */
    margin-left: 1.8%; /* Responsive */
    margin-right: 1.8%; /* Responsive */
    padding-bottom: 1.8%; /* Responsive */
    margin-bottom: 45px; /* Responsive */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* .Blog > .Post.Highlight
/* {
/*     background-color: #66a3dd;
/* }
/* 
/* .Blog > .Post.Highlight ::selection
/* {
/*     background-color: #ffffff;
/*     color: #66a3dd;
/* }
/* 
/* .Blog > .Post.Highlight *
/* {
/*     color: #ffffff;
/* }
/* 
/* .Blog > .Post.Highlight strong > a,
/* .Blog > .Post.Highlight a > strong,
/* .Blog > .Post.Highlight b > a,
/* .Blog > .Post.Highlight a > b
/* {
/*     background-color: #66a3dd;
/*     color: #ffffff;
/*     border: 2px solid #ffffff;
/* }
/* 
/* .Blog > .Post.Highlight strong > a:hover,
/* .Blog > .Post.Highlight a:hover > strong,
/* .Blog > .Post.Highlight b > a:hover,
/* .Blog > .Post.Highlight a:hover > b
/* {
/*     background-color: #ffffff;
/*     color: #66a3dd;
/*     border: 2px solid #ffffff;
/* }
*/

.Blog > .Post > div
{
    /*margin-left: 30px;*/ /* Resonsive */
    /*margin-right: 30px;*/ /* Resonsive */
}

.Blog > .Post img
{
    width: 100% !important;
    height: auto !important;
    border: solid 1px #dedede !important;
}

.Blog > .Post a.Picture
{
    display: block;
    position: relative;
    /*border: solid 3px yellow;*/
    /*overflow: hidden;*/
}

.Blog > .Post a.Picture > img
{
    margin-bottom: 20px; /* Resonsive */
}

/* .Blog > .Post a.Picture > span.PlayButton
/* {
/*     display: block;
/*     background-image: url('../images/PlayButton.png');
/*     width: 57px !important;
/*     height: 57px !important;
/*     position: absolute;
/*     left: 50%;
/*     top: 50%;
/*     margin-bottom: 0px;
/*     margin-left: -28px;
/*     margin-top: -43px; /* 28px + half of 30px margin */
/*     /*padding-top: 0px;*/
/* }
/* 
/* .Blog > .Post a.Picture:hover > span.PlayButton
/* {
/*     background-image: url('../images/PlayButtonHover.png');
/* }
*/


.Blog > .Post h1.Title
{
    /*font-weight: 300;
    text-transform: none;
    letter-spacing: normal;
    color: #66a3dd;*/
    padding-top: 0px;
    /*padding-bottom: 0px;*/
    /*margin-bottom: 0px;*/
    line-height: 30px;
}

.Blog > .Post p.Info
{
    /*margin-top: 0px;*/
    color: #9ea8b1;
    /*margin-bottom: 0px;*/
}


/* .Blog > .Post.Highlight h1.Title
/* {
/*     color: #ffffff;
/* }
*/

.Blog > .Post h1.Title:after
{
    display: none;
}

.Blog > .Post .Tag
{
    display: inline-block;
    background-color: #66a3dd;
    /*font-size: 12px;*/
    color: #ffffff;
    line-height: 22px;
    padding: 0px 4px 0px 4px;
    margin-bottom: 5px;
    border-radius: 3px;
    white-space: nowrap;
}

.Blog > .Post .Tag.ProjectType
{
    background-color: rgba(64, 102, 138, 0.70);
}

.Blog > .Post .Tag.Technology
{
    background-color: rgba(102, 163, 221, 0.70);
}