/* COLORS AND BACKGROUNDS */
body { color: #555; }
h1, h2, h3 { color:#333; }
a:link, a:visited { text-decoration:none; color:#a00; }
a:hover { text-decoration:none; color:#e00; }
body { background-color:#f3f3f3; }
#page { 
  background-image:url(../img/shadow.png);
  background-repeat: repeat-y;
}
#header { border-bottom-style:solid; }
#footer { border-top-style:solid; }
#header { border-bottom-width:1px; }
#footer { border-top-width:1px; }

button.documentation { background-color:#e5ecf9; }
button.documentation:hover { background-color:#ced4e0; }
button.download p { color:gray; }
button.download > #img { background:url(../img/download_green.png); background-size: cover; }
button.download > #img1 { background:url(../img/download_blue.png); background-size: cover; }
button.download > #img2 { background:url(../img/download_red.png); background-size: cover; }

.mylink { color:#c00; font-weight:bold; }

.item_wide p { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0)), color-stop(60%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.item_half p { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0)), color-stop(60%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.news_bar div { 
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(1%,rgba(0,0,0,0)), color-stop(60%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 60%,rgba(0,0,0,0.65) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

.docs tr { background-color:#e5ecf9; }
.docs td { border-top:1px solid white; }
.c_row:hover { background-color:#ced4e0; cursor:pointer; }

.news { position:relative; z-index:10; width:55px; line-height:35px; margin-bottom:-30px; left:30px; border-radius:5px; padding:0 10px; background-color:white; cursor:default; text-align:center;}

/* MARGINS AND POSITIONING */

body { margin: 0px auto;}
#page { width:835px; padding-top:0px; }
h1 { margin: 0.5em 0em 0.2em 0em; }
#dragons { margin:1em; float:right; }
#header { margin-bottom: 2em; }
#menu { margin-top: 4em; }
#menu h3 { margin: 0.4em 1em 0.5em 1em; float:left; }
dt {  margin: 0.8em 0em 0.2em 0em; }

hr { margin-bottom: 1em; }

button.documentation { position:relative; z-index:0; float:right; width: 90px; height: 20px; }
button.download { position:relative; z-index:0; float:right; width: 190px; height: 40px; padding:2px 0 0 0; }
button.download p { line-height:17px; }
button.download div { position:relative; z-index:1; float:left; width:50px; height:50px; }

.status { vertical-align:middle; }

.item { float: left; text-align:center; margin:0.2em 0.4em 0.2em 0em; }
.item img { width:255px; height:250px; padding:0px;  /*border:1px solid #ccc;-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;*/ }

.item_wide { width:790px; height:340px; position:relative; margin-bottom:20px; }
/*.item_wide img { width:790px; height:340px; position:absolute; }
*/.item_wide p { width:750px; height:35px; position:absolute; bottom:0; margin:0; padding:20 20 0 20; transition: height .5s ease .300ms }
.item_wide span { display:none }

.item_half { float:left; width:390px; height:160px; position:relative; margin-bottom:20px; }
.item_half img { width:390px; height:160px; position:absolute; }
.item_half p { width:370px; height:35px; position:absolute; padding:0 10px; bottom:0; margin:0; transition: height .5s ease .300ms }
.item_half span { display:none }

.news_bar { width:790px; height:340px; position:relative; }
/*.news_bar img { width:790px; height:340px; position:absolute; }
*/.news_bar div  { width:710px; height:95px; position:absolute; bottom:0; margin:0; padding:60 40 0 40; transition: height .5s ease .300ms }
.news_bar .text { display:none }

table.docs { table-layout:fixed; }
table.docs td { vertical-align:top; }

.h_row  td{ display:none; }

.news img { margin:-1px 0px; }

/* FONTS */

body { font-family:verdana; font-size:13px; }
h1, h2, h3 { font-family: Trebuchet MS; }
dt { font-style: italic; }
h1 { font-size: 2.8em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }

.item_wide p { color:white; font-family: Trebuchet MS; font-size: 1.3em; font-weight: bold; line-height: 2em; }
.item_wide span { font-size:0.95em; font-weight:normal; line-height:1.2em; }

.item_half p { color:white; font-family: Trebuchet MS; font-size: 1.3em; font-weight: bold; line-height: 2em; }
.item_half span { font-size:0.85em; font-weight:normal; line-height:1em; }

.news_bar div { color:white; font-family: Trebuchet MS; }
.news_bar .title { font-weight:bold; font-size:1.3em;  line-height:0.8em; }
.news_bar .subtitle { font-size:1.2em;  line-height:0.8em; }
.news_bar .text { text-align:justify; font-size:1.2em; line-height:1.2em; }

/* DECORATIONS */

.styled_list {
  list-style-image: url('./../img/plus.png');
}

button { cursor: pointer; }
button.documentation { border:none; }
button.download:hover{ text-shadow:0 0 5px gray; }
button.download:hover > #img { background-image:url(../img/download_green_on.png); }
button.download:hover > #img1 { background-image:url(../img/download_blue_on.png); }
button.download:hover > #img2 { background-image:url(../img/download_red_on.png); }

.mylink:hover { color:#e00; }

.capt {
	background-color:#333;
	color:white;
	margin:0;
}

.accordion h3 { cursor: pointer; }

.docs li { list-style-type:circle; }

.item_wide:hover  > p { height:80px; }
.item_half:hover  > p { height:100px; }

.item_wide:hover  > p > span {
	display:block;

	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;

	-webkit-animation-duration: .1s;
	-moz-animation-duration: .1s;
	-o-animation-duration: .1s;
	animation-duration: .1s;

	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
	animation-delay: .1s;

	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}
.item_half:hover  > p > span {
	display:block;

	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;

	-webkit-animation-duration: .1s;
	-moz-animation-duration: .1s;
	-o-animation-duration: .1s;
	animation-duration: .1s;

	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
	animation-delay: .1s;

	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

.news_bar:hover  > div { height:185px; }

.news_bar:hover  > div  > .text {
	display:block;

	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;

	-webkit-animation-duration: .1s;
	-moz-animation-duration: .1s;
	-o-animation-duration: .1s;
	animation-duration: .1s;

	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	-o-animation-delay: .1s;
	animation-delay: .1s;

	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

.tile:hover {
/*	display:block;
*/
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;

	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;

	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

.item:hover img {
	display:block;

	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;

	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;

	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}

.item:hover p {
	display:block;

	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;

	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;

	-webkit-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-o-animation-fill-mode: both;
	animation-fill-mode: both;
}