@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

body {
	margin: 0;
	padding: 0;
	
	background: url(../images/background_pattern.png);
	-webkit-text-size-adjust: 100%;
}

body:after {
	content: url(../images/iOPAC-Icon.png) url(../images/iOPAC-iPhone.png) url(../images/iOPAC-NexusS.png) url(../images/ef_logo.png);
	opacity: 0;
	display: none;
}

body * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	text-overflow:ellipsis;
	font-family:helvetica,arial,sans-serif;
	
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	
	z-index:0;
}

div.button, input.button {
	position: relative;

	background: rgb(191,210,85); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); /* W3C */

	border-width: 1px;
	border-style: solid;
	border-color: rgb(158,203,45) rgb(158,203,45) rgb(191,210,85) rgb(191,210,85);
	
	color: #ffffff;
	text-shadow: 1px 1px 1px #404040;
	
	display: block;
	height: 35px;
	width: 196px;
	
	padding: 5px;
	margin: 5px 0 10px 0;
	
	font-size: 0.8em;
	font-weight: bold;

	text-align: center;
	vertical-align: bottom;
	text-shadow: 1px 1px 1px #c0c0c0;
	
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	
	-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
	
	-moz-transition: background 0.2s ease-in-out 0s;
    -webkit-transition: background 0.2s ease-in-out 0s;
    -o-transition: background 0.2s ease-in-out 0s;
    -ms-transition: background 0.2s ease-in-out 0s;
    transition: background 0.2s ease-in-out 0s;
}

div.button > a {
	display: block;
	width: 100%;
	height: 100%;
	
	padding: 0;
	
	color: #ffffff;
	line-height: 25px;
	
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}

div.button:hover, input.button:hover {
	background: rgb(177,209,0); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(177,209,0,1) 0%, rgba(130,183,7,1) 50%, rgba(115,168,0,1) 51%, rgba(146,201,6,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(177,209,0,1)), color-stop(50%,rgba(130,183,7,1)), color-stop(51%,rgba(115,168,0,1)), color-stop(100%,rgba(146,201,6,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(177,209,0,1) 0%,rgba(130,183,7,1) 50%,rgba(115,168,0,1) 51%,rgba(146,201,6,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(177,209,0,1) 0%,rgba(130,183,7,1) 50%,rgba(115,168,0,1) 51%,rgba(146,201,6,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(177,209,0,1) 0%,rgba(130,183,7,1) 50%,rgba(115,168,0,1) 51%,rgba(146,201,6,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(177,209,0,1) 0%,rgba(130,183,7,1) 50%,rgba(115,168,0,1) 51%,rgba(146,201,6,1) 100%); /* W3C */
	
	border-color: rgb(146,201,6) rgb(146,201,6) rgb(177,209,0) rgb(177,209,0);
}

header {
	position: relative;
	
	background: rgba(0,0,0,0.8);
	
	border: 0;
	border-top: 1px solid rgba(22,22,29,0.8);
	border-bottom: 1px solid rgba(22,22,29,0.8);

	min-width: 978px;
	height: 80px;
	
	margin: 0 auto;

	z-index: 10;

	-webkit-box-shadow:  0px 0px 4px rgba(0, 0, 0, 0.8);
	box-shadow:  0px 0px 4px rgba(0, 0, 0, 0.8);	
}

header div#EFLogo {
	background: url(../images/ef_logo.png) no-repeat center center;
	
	float: left;
	
	width: 300px;
	height: 78px;
}

header div#EFLogo a {
	display: block;
	width: 100%;
	height: 100%;
}

header h1#Logo {
	position: relative;
	top: 20px;
	
	font-style: normal;
	font-size: 1.8em;
	
	line-height: 40px;
	
	color: #cccccc;
	text-shadow: 1px 1px 2px #444444;
	
	float: left;
	
	margin-left: 10px;
	padding-left: 20px;
	
	border-left: #666666 solid 1px;
}

header h1#Logo a {
	display: block;
	width: 100%;
	height: 100%;
	
	color: #cccccc;
	text-shadow: 1px 1px 2px #444444;
	text-decoration: none;
}

header h1#Logo a:hover {
	color: #ffffff;
}

header nav ul {
	float: right;
	list-style-type: none;
	
	margin: 0 10px 0 10px;
}

header nav ul > li {
	font-style: normal;
	font-size: 1.2em;
	
	text-transform: uppercase;
	
	line-height: 78px;
	
	color: #cccccc;
	text-shadow: 1px 1px 2px #444444;
	
	float: left;
	
	margin: 0;
	padding: 0 20px 0 20px;
}

header nav ul > li a {
	text-decoration: none;
	color: #cccccc;
}

header nav ul > li a:hover {
	color: #ffffff;
}

div#iOPACLogo {
	position: absolute;
	display: block;
	
	top: 295px;
	left: 75px;
	
	width: 230px;
	height: 230px;
	
	z-index: 40;
	
	background: url(../images/iOPAC-Icon.png) no-repeat bottom center;
	background-size: 100% 100%;
	
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(1, 1, 1, 0.5)));
	-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(0,0,0.0) 0%, rgba(1,1,1,0.5) 100%);
}

html.noJS div#iOPACLogo {
	-webkit-animation: fadeIn 0.5s;	
}

div#iOPACLogo:after {
    content:"";
    position: absolute;
    top:100%;
    right:0;
    bottom:-10%;
    left:0;
    z-index: -1;
    opacity: .4;
    
    mask: url(../images/mask.svg#mask);
    -moz-transform:translateY(0px) scaleY(-1);
    -ms-transform:translateY(0px) scaleY(-1);
    -o-transform:translateY(0px) scaleY(-1);
    -webkit-transform:translateY(0px) scaleY(-1);
    transform:translateY(0px) scaleY(-1);
}

div#iOPACLogo:after {
	background: -moz-element(#iOPACLogo) no-repeat bottom center;
	background: -ms-element(#iOPACLogo) no-repeat bottom center;
	background: -o-element(#iOPACLogo) no-repeat bottom center;
	background: -webkit-element(#iOPACLogo) no-repeat bottom center;
	background: element(#iOPACLogo) no-repeat bottom center;
}

div#device {
	position: absolute;
	display: block;
	
	top: 120px;
	left: 40px;
	
	width: 300px;
	height: 600px;
	
	z-index: 100;
	
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(1, 1, 1, 0.5)));
	-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(0,0,0.0) 0%, rgba(1,1,1,0.5) 100%);
}

html.noJS div#device {
	-webkit-animation: fadeIn 0.5s;	
}

div#device.apple {
	background: url(../images/iOPAC-iPhone.png) no-repeat bottom center;
	background-size: auto 100%;
}

div#device.android {
	background: url(../images/iOPAC-NexusS.png) no-repeat bottom center;
	background-size: 100% auto;
}

div#device:after {
    content:"";
    position: absolute;
    top:100%;
    right:0;
    bottom:-10%;
    left:0;
    z-index: -1;
    opacity: .4;
    
    mask: url(../images/mask.svg#mask);
    -moz-transform:translateY(0px) scaleY(-1);
    -ms-transform:translateY(0px) scaleY(-1);
    -o-transform:translateY(0px) scaleY(-1);
    -webkit-transform:translateY(0px) scaleY(-1);
    transform:translateY(0px) scaleY(-1);
}

div#device:after {
	background: -moz-element(#device) no-repeat bottom center;
	background: -ms-element(#device) no-repeat bottom center;
	background: -o-element(#device) no-repeat bottom center;
	background: -webkit-element(#device) no-repeat bottom center;
	background: element(#device) no-repeat bottom center;
}

div#navPlatform {
	position: absolute;
	
	top: 220px;
	min-width: 978px;
	height: 30px;
	
	padding: 0px 0px 0px 380px;
}

div#navPlatform ul {
	list-style-type: none;
}

div#navPlatform ul > li {
	font-style: normal;
	font-size: 1.4em;
	line-height: 30px;
	
	color: #666666;
	text-shadow: 1px 1px 2px #ffffff;
	
	float: left;
	
	margin: 0;
	padding: 0 20px 0 20px;
}

div#navPlatform ul > li:first-child {
	padding-left: 0;
}

div#navPlatform ul > li.apple a {
	background: url(../images/apple_logo.svg) no-repeat left top;
	background-size: 20px 25px;
	padding-left: 25px;
}

div#navPlatform ul > li.android a {
	text-transform: uppercase;
	background: url(../images/android_robot.svg) no-repeat left top;
	background-size: 20px 25px;
	padding-left: 25px;
}

div#navPlatform ul > li a {
	display: block;
	text-decoration: none;
	color: #444444;
}

div#navPlatform ul > li a:hover {
	color: #666666;
}

section#description {
	position: absolute;
	
	overflow: auto;
	
	overflow-x: hidden;
	overflow-y: scroll;
	
	top: 260px;
	width: 100%;
	min-width: 978px;
	height: 300px;
	
	background: rgba(0,0,0,0.8);
	
	color: #acacac;
	
	padding: 20px 30px 20px 380px;
	text-align: justify;
}

div#descBefore {
	position: absolute;
	left: 0;
	right: 0;
	top: 240px;
	z-index: 50;
	
	background: transparent;

	content: "";
	height: 20px;
	
	min-width: 978px;
	width: auto;
	display: block;
	
	-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6), inset 0px -4px 8px -6px rgba(0, 0, 0, 0.8);
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6), inset 0px -4px 8px -6px rgba(0, 0, 0, 0.8);
}

div#descAfter {
	position: absolute;
	left: 0;
	right: 0;
	top: 560px;
	z-index: 50;
	
	background: transparent;
	content: "";
	height: 20px;
	
	min-width: 978px;
	width: auto;
	display: block;
	
	-webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.6), inset 0px 4px 8px -6px rgba(0, 0, 0, 0.8);
	box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.6), inset 0px 4px 8px -6px rgba(0, 0, 0, 0.8);
}

div#copyright {
	position: absolute;
	left: 0;
	right: 0;
	top: 565px;
	z-index: 40;
	
	background: transparent;
	width: auto;
	height: 20px;
	display: block;
	
	color: #666666;
	font-size: 0.6em;
	text-align: right;
	
	padding: 0 5px 0 5px;
}

section#description > div.content {
	animation: fadeIn 0.75s;
	-webkit-animation: fadeIn 0.75s;
}

section#description #storeLink {
	position: absolute;
	right: 30px;
	bottom: 20px;
	
	color: #ffffff;
	text-shadow: 1px 1px 2px #333333;
	text-decoration: none;
}

section#description #storeLink img {
	width: 196px;
}

section#description div.content h2 {
	font-size: 1.1em;
	font-weight: lighter;	
	padding-bottom: 10px;
}

section#description div.content p {
	font-size: 0.9em;
	font-weight: lighter;
	padding-bottom: 10px;
}

section#description div.content ul {
	margin: 0 0 10px 30px;
}

section#description div.content ul li {
	font-size: 0.9em;
	font-weight: lighter;
}

div.formField {
	padding: 5px;	
}

div.formField label {
	display: block;
	float: left;
	
	width: 90px;
}

div.formField input[type=text], div.formField input[type=email], div.formField textarea {
	background: rgba(255,255,255,0.5);
	color: #ffffff;
	
	font-size: 0.9em;
	
	padding: 2px 5px 2px 5px;
	
	border: 1px solid transparent;
	
	-webkit-border-radius: 3px;
	border-radius: 3px;
	
	-moz-transition: background 0.2s ease-in-out 0s;
    -webkit-transition: background 0.2s ease-in-out 0s;
    -o-transition: background 0.2s ease-in-out 0s;
    -ms-transition: background 0.2s ease-in-out 0s;
    transition: background 0.2s ease-in-out 0s;
}

div.formField input[type=text]:focus, div.formField input[type=email]:focus, div.formField textarea:focus {
	border: 1px solid #c0c0c0;
}

div.formField input[type=text].error, div.formField input[type=email].error, div.formField textarea.error {
	background: rgba(255,0,0,0.5);
}

div.formField input {
	width: 200px;
	height: 25px;
	
	white-space: nowrap;
	overflow: hidden;
	text-overflow:ellipsis;
}

div.formField input[type=submit] {
	float: right;
	width: 90px;
	height: 30px;
	line-height: 20px;
}

div.formField textarea {
	width: 100%;
	height: 105px;
}

pre {
	font-family: consolas;
	width: 100%;
	
	white-space: pre-wrap;       /* css-3 */
 	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 	white-space: -pre-wrap;      /* Opera 4-6 */
 	white-space: -o-pre-wrap;    /* Opera 7 */
 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}