@charset "utf-8";
/**
 * Stylesheet Document
 * 
 * @project   Oracle Content Wall
 * @date      2013-09-16
 * @author    Malte Beckers
 * 
 * 
 * TABLE OF CONTENTS:
	 
   - CSS Reset and global definitions
   - Page Wrapper
   - Page Header
   - Content
   - Share
   - Columns
   - Filter
   - Tiles
   - HD/Retina Images and Text-Shadows (Desktop + iPad)
   - Mobile Styles (Responsive)
	 
 */



/* CSS Reset and global definitions */
* {
	margin: 0;
	padding: 0;
}
html,
body { /* Force Scrollbar on every page (prevent horizontal "jumping") */
	height: 100.5%;
	min-height: 100.5%;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%; /* 16px */
	line-height: 1; /* 16px */
	color: #000000;
	margin: 0 10px;
	padding: 0;
	background-color: #ECECEC;
}
input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	display: block;
	border: none;
	outline: none;
}


/* Page Wrapper */
#wrapper {
	width: 926px;
	min-height: 100%;
	margin: 0 auto;
	padding: 0 32px 50px 32px;
	font-size: 0.625em; /* normalize to 10px */
	background: transparent url(../img/layout/bg_wrapper.jpg) 19px 0 repeat-y;
}


/* Page Header */
#header .logo {
	padding: 15px 31px;
	background-color: #FF0000;
}
#header .campaign {
	position: relative;
	margin: 0 0 1px -32px;
	padding: 15px 0 21px;
	background: transparent url(../img/layout/bg_header_corner.gif) left bottom no-repeat;
}
#header .campaign .headline {
	background: #808080; /* Old browsers */
	background: -moz-linear-gradient(left,  #808080 0%, #ececec 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#808080), color-stop(100%,#ececec)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #808080 0%,#ececec 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #808080 0%,#ececec 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #808080 0%,#ececec 100%); /* IE10+ */
	background: linear-gradient(to right,  #808080 0%,#ececec 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#ececec',GradientType=1 ); /* IE6-9 */
}
#header .campaign .headline h1 {
	font-size: 2.1em; /* 21px */
	color: #FFFFFF;
	text-align: center;
	text-shadow: 0px 0px 1px #f1f1f1;
	padding: 10px 13% 8px;
	background: transparent url(../img/layout/bg_header_arrow.gif) 64px center no-repeat;
	overflow: hidden;
}
#header .campaign .headline h1 span {
	color: #FF0000;
	text-shadow: 0px 0px 1px #f13232;
}
#header .campaign .image {
	position: absolute;
	right: 0;
	top: 0;
}
#header .campaign .image img {
	float: right;
}


/* Content */
#content {
	overflow: hidden;
}


/* Share */
#share {
	padding-left: 9px;
}
#share a,
#share a:link,
#share a:visited {
	display: block;
	float: left;
	width: 161px; /* 180 total */
	font-size: 1.2em;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	margin-right: 9px;
	padding: 7px 0 7px 19px;
	background: #000000 url(../img/layout/bg_icon_email.gif) 145px 6px no-repeat;
	text-shadow: 0px 0px 1px #FFFFFF;
	filter: dropshadow(color=#FFFFFF, offx=0, offy=0);
}
#share a:hover,
#share a:active {
	background-color: #FF0000;
}
#share input {
	display: none;
	width: 349px;
	padding: 5px 5px 4px;
	font-size: 1.2em;
	border: 1px solid #808080;
}
#share input:hover {
	border-color: #000000;
}


/* Columns */
.columnLeft {
	clear: both;
	float: left;
	width: 180px;
	padding-left: 9px;
}
.columnRight {
	float: right;
	width: 724px;
	padding: 19px 5px 0 0;
}


/* Filter */
.filterMenu h1 {
	font-size: 1.2em;
	margin-top: 19px;
	padding: 5px 0;
	border-top: 1px solid #808080;
	text-shadow: 0px 0px 1px #666666;
}
.filterMenu ul {
	font-size: 1.2em; /* 12px */
	line-height: 1.166; /* 14px */
}
.filterMenu ul li {
	padding-bottom: 0.6em;
}
.filterMenu ul li a,
.filterMenu ul li a:link,
.filterMenu ul li a:visited {
	display: block;
	color: #000000;
	text-decoration: none;
	padding-left: 19px;
	background: #FFFFFF url(../img/layout/bg_checkboxes.gif) 0 -80px no-repeat;
	text-shadow: 0px 0px 1px #666666;
	filter: dropshadow(color=#666666, offx=0, offy=0);
}
.filterMenu ul li.all a,
.filterMenu ul li.all a:link,
.filterMenu ul li.all a:visited {
	color: #FF0000;
	background-position: 0 2px;
	text-shadow: 0px 0px 1px #FF0000;
	filter: dropshadow(color=#FF0000, offx=0, offy=0);
}
.filterMenu ul li a:hover,
.filterMenu ul li a:active {
	text-decoration: underline;
}
.filterMenu ul li.act a,
.filterMenu ul li.act a:link,
.filterMenu ul li.act a:visited {
	background-position: 0 -121px;
}
.filterMenu ul li.all.act a,
.filterMenu ul li.all.act a:link,
.filterMenu ul li.all.act a:visited {
	background-position: 0 -39px;
}


/* Tiles */
#tiles {
	overflow: hidden;
}
#tiles li {
	float: left;
	position: relative;
	width: 180px;
	height: 180px;
	border-left: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	overflow: hidden;
}
#tiles li a,
#tiles li a:link,
#tiles li a:visited,
#tiles li a:hover,
#tiles li a:active,
#tiles li a:focus {
	display: block;
	text-decoration: none;
}
#tiles li a img {
	width: 180px;
	height: 180px;
}
#tiles li a span.icon {
	position:absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	cursor: pointer;
	background-position: 7px 6px;
	background-repeat: no-repeat;
}
#tiles li span.icon.assessment {
	background-image: url(../img/layout/icon_assessment.png);
}
#tiles li span.icon.calculator {
	background-image: url(../img/layout/icon_calculator.png);
}
#tiles li span.icon.casestudies {
	background-image: url(../img/layout/icon_case_studies.png);
}
#tiles li span.icon.download {
	background-image: url(../img/layout/icon_download.png);
}
#tiles li span.icon.ebook {
	background-image: url(../img/layout/icon_ebook.png);
}
#tiles li span.icon.paper {
	background-image: url(../img/layout/icon_paper.png);
}
#tiles li span.icon.webcast {
	background-image: url(../img/layout/icon_webcast.png);
}
#tiles li span.icon.website {
	background-image: url(../img/layout/icon_website.png);
}
#tiles li span.icon.services {
	background-image: url(../img/layout/icon_services.png);
}
#tiles li span.icon.video {
	background-image: url(../img/layout/icon_video.png);
}
#tiles li a .text { /* IE neet this */
	position: absolute;
	top: 61%;
	right: 0;
	left: 0;
	z-index: 2;
	min-height: 180px;
	padding: 0 3px 6px 9px;
	background-color: #8c8c8c;
	cursor: pointer;
	color: #FFFFFF;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
	filter: alpha(opacity=80); /* IE 5-7 */
	-moz-opacity: 0.8; /* Netscape */
	-khtml-opacity: 0.8; /* Safari 1.x */
	opacity: 0.8; /* Good browsers */
	text-shadow: 0px 0px 1px #999999;
}
* html #tiles li a .text {
	height: 180px;
	overflow: visible;
}
#tiles li a:hover .text {
	background-color: #FF0000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE 8 */
	filter: alpha(opacity=90); /* IE 5-7 */
	-moz-opacity: 0.9; /* Netscape */
	-khtml-opacity: 0.9; /* Safari 1.x */
	opacity: 0.9; /* Good browsers */
}
#tiles li .text em,
#tiles li .text strong {
	overflow: hidden;
	text-overflow: ellipsis; /* A bit of Security */
}
#tiles li .text em {
	display: block;
	padding-top: 4%;
	font-size: 1.1em;
	font-weight: normal;
	font-style: normal;
	white-space: nowrap;
}
#tiles li .text strong {
	display: block;
	font-size: 1.4em; /* 14px */
	line-height: 1.14; /* 16px */
	padding: 3px 0 8px;
	min-height: 42px;
	max-height: 42px;
}
* html #tiles li .text h2 { /* IE 6 */
	height: 53px;
	overflow: visible;
}
#tiles li .text span {
	font-size: 1.2em; /* 12px */
	line-height: 1.167;  /* 14px */
	display: block;
}



/*--------------------------------------------------------------------------------------
   HD/Retina Images and Text-Shadows (Desktop + iPad)
--------------------------------------------------------------------------------------*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
		   
	#header .campaign {
		background-image: url(../img/layout/bg_header_corner_hd.gif);
	    -moz-background-size: 32px 21px;
	    -o-background-size: 32px 21px;
	    -webkit-background-size: 32px 21px;
	    background-size: 32px 21px;
	}

	#header .campaign .headline h1 {
		background-image: url(../img/layout/bg_header_arrow_hd.gif);
		-moz-background-size: 30px 39px;
	    -o-background-size: 30px 39px;
	    -webkit-background-size: 30px 39px;
	    background-size: 30px 39px;
	}
	
	.filterMenu ul li a,
	.filterMenu ul li a:link,
	.filterMenu ul li a:visited {
	    background-image: url(../img/layout/bg_checkboxes_hd.gif);
	    -moz-background-size: 10px 134px;
	    -o-background-size: 10px 134px;
	    -webkit-background-size: 10px 134px;
	    background-size: 10px 134px;
	}
	
	#share a,
	#share a:link,
	#share a:visited {
		background-image: url(../img/layout/bg_icon_email_hd.gif);
	    -moz-background-size: 17px 13px;
	    -o-background-size: 17px 13px;
	    -webkit-background-size: 17px 13px;
	    background-size: 17px 13px;
	}
	
	/* Tiles */
	#tiles li span.icon.assessment {
		background-image: url(../img/layout/icon_assessment_hd.png);
	}
	#tiles li span.icon.calculator {
		background-image: url(../img/layout/icon_calculator_hd.png);
	}
	#tiles li span.icon.casestudies {
		background-image: url(../img/layout/icon_case_studies_hd.png);
	}
	#tiles li span.icon.download {
		background-image: url(../img/layout/icon_download_hd.png);
	}
	#tiles li span.icon.ebook {
		background-image: url(../img/layout/icon_ebook_hd.png);
	}
	#tiles li span.icon.paper {
		background-image: url(../img/layout/icon_paper_hd.png);
	}
	#tiles li span.icon.webcast {
		background-image: url(../img/layout/icon_webcast_hd.png);
	}
	#tiles li span.icon.website {
		background-image: url(../img/layout/icon_website_hd.png);
	}
	#tiles li span.icon.services {
		background-image: url(../img/layout/icon_services_hd.png);
	}
	#tiles li span.icon.assessment,
	#tiles li span.icon.calculator,
	#tiles li span.icon.ebook,
	#tiles li span.icon.paper { /* vertical icons */
		-moz-background-size: 25% auto;
	    -o-background-size: 25% auto;
	    -webkit-background-size: 25% auto;
	    background-size: 25% auto;
	}
	#tiles li span.icon.casestudies,
	#tiles li span.icon.download,
	#tiles li span.icon.webcast,
	#tiles li span.icon.website,
	#tiles li span.icon.services,
	#tiles li span.icon.video { /* horizontal icons */
		-moz-background-size: auto 25%;
	    -o-background-size: auto 25%;
	    -webkit-background-size: auto 25%;
	    background-size: auto 25%;
	}
	
	#header .campaign .headline h1,
	#header .campaign .headline h1 span,
	#share a,
	#share a:link,
	#share a:visited,
	.filterMenu h1,
	.filterMenu ul li a,
	.filterMenu ul li a:link,
	.filterMenu ul li a:visited,
	.filterMenu ul li.all a,
	.filterMenu ul li.all a:link,
	.filterMenu ul li.all a:visited,
	#tiles li a .text  {
		text-shadow: none; /* Remove all text shadows */
		filter: none;
	}
   
		   
}



/*--------------------------------------------------------------------------------------
   iPad (Tablets) in Portrait
--------------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 768px) 
				   and (max-device-width: 1024px) 
				   and (orientation: portrait) {
	
	body {
		/* background-position: 29px 0; */
	}
	
}



/*--------------------------------------------------------------------------------------
   Mobile Styles (Responsive)
--------------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px)
                   and (max-device-width: 640px) {
	
	/* HTML, Body */
	html, body {
		height: auto;
		min-height: auto;
	}
	body {
		margin: 0 4px;
	}
	
	/* Page Wrapper */
	#wrapper {
		width: auto;
		min-width: 280px;
		margin: 10px 16px 16px;
		padding: 0;
		background-color: #FFFFFF;
		background-image: none;
		-webkit-box-shadow:0 5px 10px #cacaca;
        -moz-box-shadow:0 5px 10px #cacaca;
        box-shadow:0 5px 10px #cacaca;
	}
	
	/* Page Header */
	#header .campaign {
		font-size: 1em;
		margin: 0 0 1px -16px;
		padding: 15px 0 0;
		background-image: none;
	}	
	#header .campaign .headline h1 {
		padding: 10px 20px 10px 45px;
		background-position: 5px center;
		font-size: 1.9em;
	}
	#header .campaign .headline h1 span {
		display: block;
	}
	#header .campaign .image {
		position: static;
		width: auto;
		padding: 0;
		overflow: hidden;
		background-image: url(../img/layout/bg_header_corner_hd.gif);
		background-position: left top;
		background-repeat: no-repeat;
	    -moz-background-size: 16px 11px;
	    -o-background-size: 16px 11px;
	    -webkit-background-size: 16px 11px;
	    background-size: 16px 11px;
	}
	#header .campaign .image img {
		width: auto;
		height: auto;
		margin: 0 auto;
	}
	
	/* Share (without input field to copy link out in Mobile) */
	#share a,
	#share a:link,
	#share a:visited {
		float: none;
		width: auto;
		text-align: center;
		padding: 7px 19px;
		background-position: 50px center;
	}
	#share input {
		visibility: hidden;
	}
	
	/* Columns */
	.columnLeft,
	.columnRight {
		clear: both;
		float: none;
		width: auto;
		margin: 0 9px;
		padding: 0;
		overflow: hidden;
	}
	.columnLeft {
		border-top: 1px solid #808080;
		border-bottom: 1px solid #808080;
		margin: 11px 9px;
		padding: 10px 0;
	}
	.columnRight {
		padding-bottom: 11px;
	}

	/* Filter */
	.filterMenu {
		float: right;
		width: 48%;
	}
	.filterMenu:first-child {
		float: left;
	}
	.filterMenu h1 {
		border-top: none;
		margin-top: 0;
	}
	.filterMenu ul li a:hover,
	.filterMenu ul li a:active,
	.filterMenu ul li a:focus {
		text-decoration: none;
	}
	
	/* Tiles */
	#tiles {
		margin-left: -0.4%;
	}
	#tiles li {
		width: 49.6%;
		height: auto;
		border: none;
		margin: 0 0 0.4% 0.4%;
	}
	#tiles li a img {
		width: 100%;
		height: auto;
	}
	#tiles li a .text {
		height: 100%;
		min-height: 100%;
		padding: 0 3%;
	}
	#tiles li .text em {
		height: 8%;
		font-size: 0.6em;
	}
	#tiles li .text strong {
		padding: 0;
		min-height: 28%;
		max-height: 28%;
		font-size: 0.75em;
	}
	#tiles li .text span {
		height: 50%;
		padding-top: 2%;
		font-size: 0.65em;
	}

}