/**Style Sheet CSS**/

/**Variable Definition**/
@darkcolor	: rgb(0,90,40);
@lightcolor	: rgb(0,50,110);
@intercolor : white;
@bgcolor	: white;
@yellow		: yellow;
@txtcolor	: black;
@gray		: rgb(220,220,220);

@menuHeight : 45px;
@logoHeight : 380px;
@menuWidth  : 148px;
@pageWidth  : 1000px;
@marginStd  : 25px;
@borderStd  : 1px;

@pageWidthEx: @pageWidth + (2 * @marginStd);// + (14 * @borderStd);
@menuWidthEx: @menuWidth * 1.3;
//@marginStdEx: @marginStd + (7 * @borderStd);

@col01 : 160px;
@col02 : 620px;
@col03 : 190px;
@col04 : 90px;

/**Classes Definition**/
.margin(@left: 0px, @right: 0px, @top: 0px, @bottom: 0px) {
	margin-left: @left;
	margin-right: @right;
	margin-top: @top;
	margin-bottom: @bottom;
}
.padding(@left: 0px, @right: 0px, @top: 0px, @bottom: 0px) {
	padding-left: @left;
	padding-right: @right;
	padding-top: @top;
	padding-bottom: @bottom;
}
.border(@left: 0px, @right: 0px, @top: 0px, @bottom: 0px) {
	border-left: @left;
	border-right: @right;
	border-top: @top;
	border-bottom: @bottom;
}
.font(@size: 100%, @color: @txtcolor, @weight: normal) {
	font-family: sans-serif;
	font-size: @size;
	font-weight: @weight;
	color: @color;
}
.rounded-corners(@size: 20px) {
	-moz-border-radius: @size;
	-webkit-border-radius: @size;
	-khtml-border-radius: @size;
	border-radius: @size;
}
.centerDiv(@size: @pageWidth) {
	left: 50%;
	margin-left: -1 * (@size / 2);
}
.zero {
	.margin;
	.padding;
	.border;
}

/**Page Defaults**/
body {
	.zero;
	.font(80%, @txtcolor, normal);
	background-color: @bgcolor;
	background-image: url('../img/background.png');
	background-repeat: repeat-x;
}
h1 {
	.zero;
	.font(200%, @darkcolor, bolder);
	.padding(0px,0px,25px,25px);
}
h2 {
	.zero;
	.font(160%, @lightcolor, bolder);
	.padding(0px,0px,20px,15px);
	a {
		color: @lightcolor;
		text-align: center;
		&:hover{
			color: @darkcolor;
		}
	}
}
h3 {
	.zero;
	.font(140%, @darkcolor, bolder);
	.padding(0px,0px,10px,5px);
}
h4 {
	.zero;
	.font(120%, @lightcolor, bold);
	.padding(0px,0px,10px,5px);
}
p {
	.zero;
	.font(100%, @txtcolor, normal);
	text-align: justify;
	line-height: 1.5;
	.padding(5px,5px,5px,5px);
	blockquote {
		text-align: justify;
	}
}
img {
	.zero;
}
#imgH1 {
	float:left;
	.margin(0px,5px,5px,5px);
}
ul {
	.zero;
	list-style-type: square;
	list-style-position:inside;
	.margin(30px,15px,10px,10px);
	li {
		.zero;
	}
}
a {
	.zero;
	.font(100%,@darkcolor,bold);
	&:hover{
		.font(100%,@lightcolor,bold);
	}
}

/**Custom Styles**/

/**############### Menu Superior ############### **/
#menuSup {
	width: 100%;
	height: @menuHeight + 2;
	background-color: @darkcolor;
	#nav {
		.zero;
		z-index:100;
		position: absolute;
		width: @pageWidthEx;
		.centerDiv(@pageWidthEx);
		li {
			list-style: none;
			float: left;
			line-height: @menuHeight;
			a {
				display: block;
				width: @menuWidth;
				height: @menuHeight;
				text-decoration: none;
				text-align: center;
				background-color: @darkcolor;
				.font(120%,@yellow, bolder);
				.border(@borderStd,@borderStd,@borderStd,@borderStd);
				border-style: solid;
				border-color: @darkcolor;
				&:hover {
					background-color: @lightcolor;
					.font(120%,@intercolor, bolder);
					border-color:@intercolor;
				}
			}
		}
	}
}

#menuSup #nav li ul {
	display: none;
	width: @menuWidthEx + 12; //padding 10px left
	li {
		line-height: @menuHeight / 2;
		a {
			width: @menuWidthEx;
			height: @menuHeight / 2;
			.font(100%,@yellow, bolder);
			.padding(10px,0px,0px,0px);
			text-align: left;
			&:hover {
				.font(100%,@intercolor, bolder);
			}
		}
	}
}

#menuSup #nav li:hover ul, #menuSup #nav li.hover ul {
	position: absolute;
	display: inline;
	.margin;
	.padding;
	.border(@borderStd,@borderStd,@borderStd,@borderStd);
	border-style: solid;
	border-color: @intercolor;
}
/**############### ############# ############### **/

#siteArea {
	position: absolute;
	width: @pageWidthEx;
	.centerDiv(@pageWidthEx);
	background-color: @lightcolor;
	padding-bottom:X%;
}

#logo {
	width: @pageWidth;
	height: @logoHeight;
	.margin(@marginStd,@marginStd,0px,0px);
	background-color: @gray;
}

#supOutline {
	width: @pageWidth;
	height: @menuHeight;
	.margin(@marginStd,@marginStd,0px,0px);
	background-color: @yellow;
	#followBox {
		width: 140px;
		float: left;
		.padding(5px, 5px, 5px, 5px);
	}
	#countdown {
		width: 550px;
		float: left;
		line-height: @menuHeight;
	}
	#searchBox {
		width: 290px;
		float: right;
		.padding(5px, 5px, 5px, 5px);
	}
}

#content {
	width: @pageWidth;
	.margin(@marginStd,@marginStd,0px,0px);
	background-color: @gray;
	overflow: hidden;
	#outline {
		width: @col03;
		float: right;
		.margin(0px,10px,10px,10px);
	}
	#text {
		width: @col02;
		float: left;
		.margin(10px,10px,10px,10px);
		background-image: url('../img/barraTituloH1.png');
		background-repeat: no-repeat;
		ul {
			.font(100%,@txtcolor,normal);
			list-style-position: outside;
			line-height: 1.5;
			li {
				text-align: justify;
			}
		}
	}
}

/**############### Menu Barra    ############### **/
#menuBar{
	width: @col01;
	float: left;
	ul {
		width: @col01 - (2 * @borderStd);
		.margin(0px,0px,5px,5px);
		li {
			list-style: none;
			float: left;
			line-height: @menuHeight / 1.5 - (2 * @borderStd);
			a {
				display: block;
				width: @col01 - (2 * @borderStd);
				height: @menuHeight / 1.5 - (2 * @borderStd);
				text-decoration: none;
				text-align: left;
				background-color: @lightcolor;
				.font(100%,@intercolor, bold);
				.border(@borderStd,@borderStd,@borderStd,@borderStd);
				border-style: solid;
				border-color: @lightcolor;
				.margin(0px,0px,5px,0px);
				.padding;
				&:hover {
					background-color: @lightcolor;
					.font(100%,@yellow, bold);
					border-color:@intercolor;
				}
			}
		}
	}
}

#menuBar ul li ul {
	.margin;
	li {
		line-height: @menuHeight / 2 - (2 * @borderStd);
		a {
			width: @col01 - (2 * @borderStd) - 5; //padding
			height: @menuHeight / 2 - (2 * @borderStd);
			background-color: @darkcolor;
			.margin;
			.padding(5px,0px,0px,0px);
			&:hover {
				background-color: @lightcolor;
			}
		}
	}
}
/**############### ############# ############### **/

#outline {
	h1 {
		.font(140%,@yellow,bolder);
		.padding(0px,0px,5px,15px);
	}
	h2 {
		.font(120%,@lightcolor,bolder);
		.padding(0px,0px,0px,10px);
	}
	p {
		.font(100%,@intercolor,bolder);
		.padding(0px,0px,0px,5px);
	}
	b, strong {
		.font(100%,@yellow,bolder);
	}
	ul {
		.zero;
		list-style-type: none;
		.font(100%,@intercolor,bolder);
		.padding(0px,0px,10px,10px);
	}
}

#news {
	.rounded-corners(10px);
	background-color: @darkcolor;
	.margin(0px,0px,0px,10px);
	.padding(5px,5px,5px,5px);
	background-image: url('../img/barraTituloH1_News.png');
	background-repeat: no-repeat;
	a {
		color: @yellow;
	}
}

#dates {
	.rounded-corners(10px);
	background-color: @darkcolor;
	.margin(0px,0px,5px,10px);
	.padding(5px,5px,5px,5px);
	background-image: url('../img/barraTituloH1_News.png');
	background-repeat: no-repeat;
}

#cfc {
	width: @col02;
}

#footer {
	.padding(0px,0px,10px,0px);
	width: @pageWidthEx;
	height: @pageWidthEx / 15;
	.font(80%, @intercolor, bolder);
	text-align: center;
	a {
		color: @intercolor;
		&:hover {
			color: @yellow;
		}
	}
}

#table_col_1{
	width: @col04;
	vertical-align: top;
	.font(100%, @darkcolor, bolder);
}

/**############### ############# ############### BOX ############### ############# ############### **/
.box(@width: auto, @height: auto) {
	.zero;
	.border(@borderStd,@borderStd,@borderStd,@borderStd);
	border-style: solid;
	border-color: @lightcolor;
	width: @width;
	height: @height;
	background-color:@intercolor;
}
.box_committee_style {
	.box(@col02, 130px);
	.margin(0px,0px,5px,10px);
	#oc_img {
		float: left;
		width: 100px;
	}
	#oc_txt {
		float: right;
		width: @col02 - 110;
		.margin(10px,0px,0px,0px);
		h1 {
			.zero;
			.font(160%, @darkcolor, bolder);
			.padding(10px,10px,25px,5px);
		}
		h2 {
			.zero;
			.font(140%, @lightcolor, bolder);
			.padding(10px,10px,0px,5px);
		}
		p {
			.zero;
			.font(100%, @txtcolor, normal);
			.padding(10px,10px,0px,5px);
		}
	}
}
.box_sponsors_style {
	.box(@col02, auto);
	.margin(0px,0px,30px,30px);
	h1 {
		.zero;
		.font(160%, @darkcolor, bolder);
		.padding(10px,10px,15px,5px);
	}
	h2 {
		.zero;
		.font(140%, @lightcolor, bolder);
		.padding(10px,10px,0px,5px);
	}
	h3 {
		.zero;
		.padding(10px,10px,10px,5px);
	}
	h4 {
		.zero;
		.padding(20px,20px,10px,5px);
	}
	p {
		.zero;
		.font(100%, @txtcolor, normal);
		.padding(20px,20px,0px,5px);
	}
	a {
		display: block;
	}
}

#box_sponsors {
	.box_sponsors_style;
}

#box_sponsors_KeynoteSpeakers {
	.box_sponsors_style;
	height: 197px;
	h2 {
		.padding(10px,10px,50px,5px);
	}
}

#img_sponsor {
	.zero;
	.margin(40px,auto,5px,10px);
	float: left;
	display: block;
}
#box_committee {
	.box_committee_style;
}
#box_committee_t1 {
	.box_committee_style;
	background-image: url('../img/publicityTeam.png');
	background-repeat: no-repeat;
	background-position: right top;
}

.box_cfc_style(@colsize: 245px) {
	.box(@colsize, auto);
	.margin(5px,5px,5px,5px);
	display: block;
	float: left;
	h1 {
		.zero;
		.font(160%, @darkcolor, bolder);
		.margin(5px,5px,5px,5px);
	}
	h2 {
		.zero;
		.font(120%, @lightcolor, bolder);
		.margin(5px,5px,0px,5px);
		a {
			.font(100%, @lightcolor, bolder);
			&:hover {
				.font(100%, @darkcolor, bolder);
			}
		}
	}
	p {
		.zero;
		.font(100%, @txtcolor, normal);
		.margin(5px,5px,0px,5px);
	}
	img {
		.zero;
		.margin(75px,0px,5px,5px);
	}
}
#box_cfc {
	.box_cfc_style;
	margin-left: 30px;
}
#box_cfc_t1 {
	.box_cfc_style(@col02 - (2 * @borderStd));
	margin-left: 0px;
}

#box_cfc_download {
	float: right;
	margin-bottom: 20px;
	margin-right: 5px;
	margin-left: 10px;
	width: 2 * @menuHeight;
	img {
		float: right;
	}
	a{
		.margin;
		float: right;
		display: block;
		text-align: center;
		width: 2 * @menuHeight;
	}
}

#littleText {
	margin-right: 25px;
	margin-left: 25px;
	font-size: 75%;
}


/** ####### CFP ####### **/
#content #outlinecfp {
  width: 340px;
  float: right;
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#outlinecfp h1 {
  font-family: sans-serif;
  font-size: 140%;
  font-weight: bolder;
  color: #ffff00;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 5px;
  padding-bottom: 15px;
}
#outlinecfp b,
#outlinecfp strong {
  font-family: sans-serif;
  font-size: 100%;
  font-weight: bolder;
  color: #ffff00;
}
#outlinecfp ul {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  border-top: 0px;
  border-bottom: 0px;
  list-style-type: none;
  font-family: sans-serif;
  font-size: 100%;
  font-weight: bolder;
  color: #ffffff;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}
#factsheet {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  background-color: #005a28;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  background-image: url('../img/barraTituloH1_News_long.png');
  background-repeat: no-repeat;
}
#factsheet a {
  font-weight: bolder;
  color: #ffff00;
}
#factsheet img {
  width: 329px;
  height: 190px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  background-color: #005a28;
}

/** ########################################## Gunter ########################################## **/
/** ####### Legend ####### **/
/** also uses some styles from the Program and Accepted Papers section **/
#backLinkTop {
  clear: both;
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 15px;
}
#backLink {
  clear: both;
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 5px;
  margin-right: 15px;
}
#paperIconsInLegend {
  clear: both;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
}
/** ####### Legend (end) ####### **/
/** ####### Program ####### **/
/** also uses some styles from the Accepted Papers section **/
.day {
  width: 796px;
  font-size: 120%;
  font-weight: bold;
  border: 2px solid #000000;
  padding: 5px;
  color: #ffffff;
  background-color: #6e6e6e;
}
.timeslot {
  clear: both;
  width: 806px;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  overflow: hidden;
  font-size: 100%;
}
.social {
  width: 804px;
  background-color: #ffffff;
  padding: 1px;
}
.time {
  float: left;
  width: 38px;
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 1px;
  padding-left: 1px;
}
.headerPlenary {
}
.plenary {
  float: right;
  width: 740px;
  padding: 5px;
}
.tracks {
  min-height: 60px;
  border-left: 1px solid #000000;
  overflow: hidden;
}
.headerTrack {
  margin-bottom: 10px;
}
.track {
  float: right;
  width: 240px;
  padding: 5px;
}
.sessionTitle {
  font-weight: bold;
}
.sessionPerson {
}
.sessionRole {
}
p.sessionRoles {
  padding-left: 0px;
  padding-bottom: 0px;
}
.sessionType {
  font-weight: bold;
  font-style: italic;
}
.titleKeynote {
  font-weight: bold;
  font-style: italic;
}
.keynoteSpeaker {
  font-style: italic;
}
.paperTitle {
}
.paperAuthors {
  font-style: italic;
}
.paperAward {
  font-style: italic;
  color: #ff0000;
}
.paperAffiliation {
}
#paperIconsInProgram {
  padding-left: 5px;
  padding-top: 2px;
}
.paperPlenary {
  border-left: 6px solid #ff0000;
  padding-left: 4px;
  margin-bottom: 5px;
}
#paperTypePlenary {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 10px;
  border-left: 6px solid #ff0000;
  padding-left: 1px;
}
.paperResearch {
  border-left: 6px solid #00326e;
  padding-left: 4px;
  padding-bottom: 15px;
}
.paperIndustry {
  border-left: 6px solid #005a28;
  padding-left: 4px;
  padding-bottom: 15px;
}
.paperRE21 {
  border-left: 6px solid #ffff00;
  padding-left: 4px;
  padding-bottom: 15px;
}
.paperInteractive {
  border-left: 6px solid #ffffff;
  padding-left: 4px;
  margin-bottom: 5px;
}
p.creditProgram {
  clear: both;
  font-size: 100%;
  text-align: right;
  margin-top: 20px;
}
#paperTypeAllProgram {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 15px;
}
#trlsInfo {
  clear: both;
  float: right;
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 120%;
  font-weight: bold;
}
#trlsInfo img {
  vertical-align: middle;
}
#content #program {
  width: 810px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-image: url('../img/barraTituloH1accepted.png');
  background-repeat: no-repeat;
}
/** ####### Program (end) ####### **/
/** ####### Accepted Papers ####### **/
.topic_instructions {
  clear: both;
  font-size: 120%;
  text-align: center;
  padding: 5px;
}
.topic_legend {
  text-align: center;
}
.topic_description {
  font-size: 120%;
  font-weight: bold;
  text-align: center;
  margin-left: 13px;
  margin-right: 13px;
  padding: 5px;
  background-color: #ffff00;
  display: none;
}
.paper {
  clear: both;
}
.title {
  font-size: 140%;
  color: #00326e;
  font-weight: bold;
}
.authors {
  font-size: 120%;
  font-style: italic;
}
.affiliation {
  font-size: 120%;
}
p.valueProposition {
  margin-left: 10px;
  display: none;
}
p.updateDate {
  text-align: right;
}
p.credit {
  clear: both;
  font-size: 100%;
  text-align: right;
  margin-top: 80px;
}
#toggleAllSwitch {
  clear: both;
  float: right;
  margin-top: 5px;
}
#paperTypeResearch {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 10px;
  border-left: 6px solid #00326e;
  padding-left: 1px;
}
#paperTypeIndustry {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 10px;
  border-left: 6px solid #005a28;
  padding-left: 1px;
}
#paperTypeRE21 {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 10px;
  border-left: 6px solid #ffff00;
  padding-left: 1px;
}
#paperTypeInteractive {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 30px;
  margin-right: 10px;
  border-left: 6px solid #ffffff;
  padding-left: 1px;
}
#paperTypeAll {
  float: right;
  font-size: 120%;
  font-weight: bold;
  margin-top: 10px;
  margin-right: 15px;
}
#paperTypeAll img {
  vertical-align: middle;
}
#toggleSwitch {
  float: left;
  width: 34px;
  padding-top: 5px;
  border-top:1px dotted black;
  margin-top: 5px;
}
#paperDescription {
  float: left;
  width: 576px;
  border-top:1px dotted black;
  margin-top: 5px;
}
#paperDescription.Research {
  width: 566px;
  border-right: 6px solid #00326e;
  padding-right: 4px;
}
#paperDescription.Industry {
  width: 566px;
  border-right: 6px solid #005a28;
  padding-right: 4px;
}
#paperDescription.RE21 {
  width: 566px;
  border-right: 6px solid #ffff00;
  padding-right: 4px;
}
#paperDescription.Interactive {
  width: 566px;
  border-right: 6px solid #ffffff;
  padding-right: 4px;
}
#paperIcons {
  float: right;
  width: 200px;
  text-align: right;
  padding-top: 5px;
  border-top:1px dotted black;
  margin-top: 5px;
}
#filters a {
  color: #000000;
}
#filters a:hover {
  color: #00326e;
}
#content #textaccepted {
  width: 810px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-image: url('../img/barraTituloH1accepted.png');
  background-repeat: no-repeat;
}
/** ####### Accepted Papers (end) ####### **/