<%@ include file="/ts/config.inc" 
%><%@include file="/ts/lib/reset.css"%>

<c:set var="color1" value="${cis:configString('cmsPage.default.color1','#6DB0DD')}" scope="request"/>
<c:set var="color2" value="${cis:configString('cmsPage.default.color2','#CEE572')}" scope="request"/>
/*<c:set var="background" value="${cis:configString('cmsPage.default.background','bg_cross1')}" scope="request"/>*/

<c:if test="${!empty param.color1}"><c:set var="color1" value="#${param.color1}" scope="request"/></c:if>
<c:if test="${!empty param.color2}"><c:set var="color2" value="#${param.color2}" scope="request"/></c:if>
/*<c:if test="${!empty param.background}"><c:set var="background" value="${param.background}" scope="request"/></c:if>*/

<%
String color2_inverse="#ffffff";
String color2=(String)pageContext.findAttribute("color2");
color2=color2.substring(1,color2.length());
int red = Integer.parseInt(color2.substring(0,2), 16);
int green = Integer.parseInt(color2.substring(2,4), 16);
int blue = Integer.parseInt(color2.substring(4,6), 16);
int intensity= red + green + blue;
if (intensity>128*3) {
	color2_inverse="#000000";
}
%>
<c:set var="color2_inverse" value="<%=color2_inverse%>" scope="request"/>


<jsp:include page="${jquery.app['alerts/jquery.alerts.css']}"/>


<c:set var="borderRadius">
-moz-border-radius: {0}; -webkit-border-radius: {0}; -khtml-border-radius: {0}; border-radius: {0}; 
</c:set>
<c:set var="gradientOrange">
	background: #FF7600 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFAA00', endColorstr='#FF4B00'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#FFAA00), to(#FF4B00)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #FFAA00,  #FF4B00) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientRed">
	background: #ff3202 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5b02', endColorstr='#ff0000'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ff5b02), to(#ff0000)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ff5b02,  #ff0000) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientRedHighlight">
	background: #ff8062 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7124', endColorstr='#ff5b5b'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ff7124), to(#ff5b5b)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ff7124,  #ff5b5b) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientGreen">
	background: #4c744c {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ca27c', endColorstr='#26ce26'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#7ca27c), to(#26ce26)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #7ca27c,  #26ce26) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientGreenHighlight">
	background: #619261 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9ac99a', endColorstr='#2ae52a'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#9ac99a), to(#2ae52a)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #9ac99a,  #2ae52a) {0}; /* for firefox 3.6+ */ 
</c:set>

<c:set var="gradientBlue">
	background: #8DCFEA {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ACE2F0', endColorstr='#54B1E0'); /*for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ACE2F0), to(#54B1E0)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ACE2F0,  #54B1E0) {0}; /* for firefox 3.6+ */ 
</c:set>
<%-- gradientBlueIE se ha creado por que cuando hay un background no se ve si también está el filtro del gradiente --%>
<c:set var="gradientBlueIE">
	background: #8DCFEA {0}; /* for non-css3 browsers */
	/*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ACE2F0', endColorstr='#54B1E0'); for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#ACE2F0), to(#54B1E0)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #ACE2F0,  #54B1E0) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientBlueHighlight">
	background: #82bed7 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a2d5e2', endColorstr='#4da2cd'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#a2d5e2), to(#4da2cd)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #a2d5e2,  #4da2cd) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientGray">
	background: #999999 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BCBDBF', endColorstr='#797A7C'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#BCBDBF), to(#797A7C)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #BCBDBF,  #797A7C) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientGrayHighlight">
	background: #868686 {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#adaeb0', endColorstr='#6a6b6d'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#adaeb0), to(#6a6b6d)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #adaeb0,  #6a6b6d) {0}; /* for firefox 3.6+ */ 
</c:set>
<c:set var="gradientLightGray">
	background: #CCCCCC {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E0E0E0', endColorstr='#999999'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#999999)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #E0E0E0,  #999999) {0}; /* for firefox 3.6+ */
</c:set>
<c:set var="gradientLightGrayHighlight">
	background: #bbbbbb {0}; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d0d0', endColorstr='#888888'); /* for IE */
	background: -webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#888888)) {0}; /* for webkit browsers */
	background: -moz-linear-gradient(top,  #d0d0d0,  #888888) {0}; /* for firefox 3.6+ */
</c:set>


html, body {
	Xheight: 100%;
}

<c:set var="userAgent" value="${header['user-agent']}"/>
<c:if test="${fn:contains(userAgent, 'WebKit') or fn:contains(userAgent, 'Gecko')}">
body {overflow-y: scroll;}
</c:if>

.XXXTODO {margin: 5px; padding: 5px; border: 5px solid blue; font-weight: normal; background-color: white; color: black;}
/* .XXXTODO { display: none; } */

#contentLoading { position: fixed; top: 0px; display:none;font-size:100%; width:150px; text-align:center; background-color: #e8beb3; -moz-border-radius: 0px 0px 5px 5px; -webkit-border-radius: 0px 0px 5px 5px; border-radius: 0px 0px 5px 5px; height: 25px; line-height: 25px; z-index: 1000; padding: 0px 5px 0px 5px; }
body {
	background-color: #58585a;
	font-family: Arial;
}
textarea,
input {
	font-family: Arial;
}

.extrafont {
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
}

@font-face {
  font-family: 'imedic_icons';
  src: url('fonts/imedic_icons.eot?15676625');
  src: url('fonts/imedic_icons.eot?15676625#iefix') format('embedded-opentype'),
       url('fonts/imedic_icons.woff2?15676625') format('woff2'),
       url('fonts/imedic_icons.woff?15676625') format('woff'),
       url('fonts/imedic_icons.ttf?15676625') format('truetype'),
       url('fonts/imedic_icons.svg?15676625#imedic_icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

div.wrapper {
	margin: 0 auto;
	width: 980px;
	clear: both;
}

/* LOGIN */
/* XXX TODO FIX LOGIN STYLES */
table.tsLoginWidget thead th { font-size:100%; font-weight: 500; padding-bottom: 15px;}
table.tsLoginWidget tbody td.loginLabel { font-size:110%; padding-top: 5px; padding-bottom: 5px; }
table.tsLoginWidget tbody td input[type='text'],
table.tsLoginWidget tbody td input[type='password'] { font-size:100%; margin-bottom: 5px; }
table.tsLoginWidget tfoot td { padding-top: 5px; padding-bottom: 5px; }
table.tsLoginWidget tfoot td.loginButton { padding-top: 5px; padding-bottom: 5px; }
table.tsLoginWidget tfoot td.loginButton input.button { font-size:100%; }
div.loginMessages div.errorMessage { background-color: #C00; color: #FFF; padding: 5px; text-align: center; margin-bottom: 10px;}
div.loginMessages div.infoMessage { background-color: #0C0; color: #FFF; padding: 5px; text-align: center; margin-bottom: 10px;}
table.tsLoginWidget input.openid_identifier {padding-left:18px; width: 350px;
	background:#FFFFFF url(${pageContext.request.contextPath}/dp/lib/images/openid_identifier.png) no-repeat scroll left center;}


/* HEADER */
#header {background-color: #fff;}
#header .wrapper {position: relative;}
#header .wrapper .decoration {width: 100%;height: 33px;position: absolute;bottom: 0;
/*	<c:if test="${!empty background}">
	background: transparent url('images/public/${background}.png');
	</c:if>*/
}
#header .wrapper .logo {position: absolute;top: 30px;left: 30px;}
#header .wrapper .slogan {bottom: 60px;left: 30px;}
#header .wrapper .slogan textarea {bottom: 0px;left: 0px;}
#header .wrapper .slogan,
/* #header .wrapper .slogan textarea {font-family: 'Rokkitt', Georgia, 'Times New Roman', Arial;position: Arial;position: absolute;color: ${color1};width: 400px;font-size: 42px;z-index: 12;} */
#header .wrapper .slogan textarea {font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;position: absolute;color: ${color1};width: 400px;font-size: 40px;z-index: 12;}
#header .wrapper div.image,
#header .wrapper div.image .preview img {position: absolute;bottom: 0;right: -15px;}

body.public #header {height: 405px;}
body.public #header .wrapper {height: 405px;}

body.virtual #header {height: 125px;}
body.virtual #header .wrapper {height: 125px;}
body.virtual #header .logo { top: 5px;}
body.virtual #header .logo img { max-height: 80px;}

/* CONTENT */
#content {background-color: #fff;}
#content div.wrapper {
/*	<c:if test="${!empty background}">
	background: transparent url('images/public/${background}.png');
	</c:if>*/
}
#content #central {padding-bottom: 22px;}

body.virtual #content #central {margin: 20px;}
body.virtual #content #central div.noAccess {background-color: white; padding: 50px 20px; min-height: 200px;}
body.virtual #content #central div.virtualLogin {background-color: white; padding: 20px; text-align:center;}
body.virtual #content #central div.virtualLogin div.virtualLoginTip {
	float:right; width: 300px; padding: 15px; line-height: 1.5em; margin: 20px 20px 0px 0px;
	border: 1px solid #666; color: #666;
}

body.virtual #content #central div.virtualLogin div.virtualLoginTip a {color: #000; text-decoration: underline;}

#content .addressInfo {
	background: transparent url('images/public/icon_address.png') no-repeat 0px 0px;
	padding-left: 25px;
	width: 225px !important;
}
#content .phonesInfo {
	background: transparent url('images/public/icon_phones.png') no-repeat 1px 0px;
	padding-left: 25px;
	width: 225px !important;
}
#content .timetableInfo {
	background: transparent url('images/public/icon_timetable.png') no-repeat 0px 2px;
	padding-left: 25px;
	width: 225px !important;
}

		
#content .emailInfo {
	background: transparent url('images/public/icon_email.png') no-repeat 0px 2px;
	padding-left: 25px;
	width: 225px !important;
}


#content a {
	color: #666;
	text-decoration: none;
}
#content a:hover {
	color: #000;
	/*text-decoration: underline;*/
}


body.public #content .large,
body.public #content .medium,
body.public #content .small {background-color: #fff;padding: 20px;margin-top: 22px;}

body.public #content .large {width: 880px; clear: both;margin-left: 30px;}
body.public #content .medium {width: 557px;}
body.public #content .small {width: 250px;}

body.virtual #content .background {background-color: #fff; padding: 10px;}
body.virtual #content .large {width: 920px; clear: both;}
body.virtual #content .medium {width: 637px;}
body.virtual #content .small {width: 250px;}

#header a.signup_link {
	text-decoration: none;
	color: #000;
	position: absolute;
	z-index: 9999;
	right: 10px;
	top: 10px;
}
#header a.signup_link div {
	
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
	font-size: 25px;
	padding-top: 55px;
	text-align: center;
	background: transparent url(images/public/signup.png) no-repeat scroll 0px 0px;
	width: 176px;
	height: 175px;
	
}


/* #content div.menu { font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;margin: 0 auto;width: 920px;height: 44px;font-size: 20px;} */
#content div.menu { font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;margin: 0 auto;width: 100%;height: 44px;font-size: 18px;}
#content div.menu ul {float: left;width: 100%;}
#content div.menu ul li {float: left;padding: 12px 0px 10px 0px;}
#content div.menu ul li.secondary {padding-right: 20px;float: right;}
#content div.menu ul li.online {
	padding-left: 32px;
	background: transparent url(images/public/assets_online.png) no-repeat scroll 0px -738px;
}

#content div.menu ul li {padding-left: 20px;}
#content div.menu ul li a {color: inherit !important; text-decoration: none;}
#content div.menu ul li a:hover {text-decoration: underline;}
#content div.menu ul li.selected {}
#content div.menu ul li.selected a.selected {text-decoration: underline;}

#content div.publicMenu {background-color: ${color2}; color: ${color2_inverse};}
#content div.virtualMenu {background-color: #51b1df; color: #fff;}

#content .faded {color: #666}

/* INNER CONTENT */

#content .title,
#content .title input,
#content .title texarea {
	width: 100%;
	color: ${color1};
	font-size: 26px;
	margin-bottom: 20px;
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
}

#content .titleSmall,
#content .titleSmall input,
#content .titleSmall texarea {
	width: 100%;
	color: ${color1};
	font-size: 20px;
	margin-bottom: 5px;
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
}

#content .text,
#content .text input,
#content .text textarea {
	font-size: 13px;
	color: #666;
	line-height: 18px;
	width: 100%;
	font-family: Arial;
	padding-bottom: 20px;
}

#content .text input[type="button"] {
	font-size: 100%;
	color: #000;
}

#content .text ul {
	list-style-type: disc;
	padding: 10px 0px 10px 30px;
}
#content .text ul li {
}


/* FOOTER */
#footer {
}

#footer .wrapper {
	position: relative;
	color: #999;
	clear: both;
	font-size: 13px;
	padding-top: 38px;
	line-height: 18px;
	padding-bottom: 80px;
	letter-spacing: 0 !important;
	font-family: Arial;
}

#footer input,
#footer textarea {
	color: #666;
	font-size: 13px;
	line-height: 18px;
	width: 100%;
	letter-spacing: 0;
	background-color: #58585a;
}

#footer a {
	color: #999;
	text-decoration: none;
}
#footer a:hover {
	color: #fff;
}

#footer ul li.selected,
#footer ul li.selected a {
		color: #fff;
}
#footer div.col0 {
	float: left;
	padding-left: 30px;
}

#footer div.col1 {
	float: right;
	padding-left: 60px;
}
#footer div.col2 {
	float: right;
	padding-left: 60px;
}
#footer div.col3 {
	float: right;
	padding-left: 60px;
	padding-right: 30px;
}

#footer .wrapper #dclos_link {
	position: absolute;
	top: 20px; right: -20px;
}


#tsGlobalMessage { z-index: 10000; position: fixed; top: 20%; left: 50%; width: 300px; margin-left: -150px; opacity: 0.9; background-color: #222; color: #fff; padding: 20px 30px; font-size: 1.8em; line-height: 1.2em; -moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; border-radius: 10px; text-align: center; }


/* INFO PAGE */
#content .infoPage .images {
	float: right;
	width: 275px;
}
#content .infoPage .images .image {
	float: left;
	padding-left: 16px;
	padding-bottom: 16px;	
}
#content .infoPage .images .image .read,
#content .infoPage .images .image .preview,
#content .infoPage .images .image .preview img,
#content .infoPage .images .image .read img {
	width: 120px;
	height: 120px;
}


/* STAFF PAGE */
#content .staffPage .professional {
	color: #666;
	font-size: 13px;
	padding-bottom: 40px;
}
#content .staffPage .professional .image {
	padding-left: 5px;
	padding-bottom: 10px;
}
#content .staffPage .professional .name {
	padding-bottom: 15px;
	font-size: 18px;
	color: ${color1};
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
}
#content .access {
	text-decoration: underline !important;
	font-size: 14px;
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
	padding-top: 15px;
	padding-bottom: 15px;
}
#content .staffPage .professional .specialty .access {
	font-size: 16px;
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
	padding-left: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
#content .staffPage .professional p {
	font-size: 13px;
	line-height: 18px;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	padding-top: 10px; 
	padding-bottom: 10px; 
}
#content .staffPage .professional .online {
	padding-top: 5px;
	color: ${color1};
	padding-left: 5px;
}

/* CONTACT PAGE */
#content .contactPage { }
#content .contactPage a { text-decoration: underline !important; }
#content .contactPage a:hover { color: #000; }
#content .contactPage .col1 { float: left; height: 400px; width: 260px; }
#content .contactPage .col2 { float: left; height: 400px; width: 260px; padding-left: 30px;}
#content .contactPage label { display: block; font-size: 13px; color: #666; line-height: 18px; width: 100%; font-family: Arial; padding-top: 10px; padding-left: 5px; }
#content .contactPage span { font-size: 13px; color: #666; line-height: 18px; width: 100%; font-family: Arial;}
#content .contactPage input[type=text] { font-size: 15px; display: block; width: 100%; background-color: #eee; border: none; height: 20px; }
#content .contactPage textarea { font-size: 15px; display: block; width: 100%; background-color: #eee; border: none; height: 220px; margin: 0px; }
#content .contactPage input[type=submit],
#content .contactPage a.submit { padding: 3px 20px; text-decoration: none !important; font-weight: 500; background-color: ${color1}; color: #fff !important; border: 1px solid ${color1}; border-radius: 5px; cursor: pointer; }
#content .contactPage input[type=submit]:hover,
#content .contactPage a.submit:hover { background-color: #000; border: 1px solid #000; }
#content .contactPage input.error,
#content .contactPage textarea.error { background-color: #ffff33; }
#content .contactPage label.error { color: #ff0000; display: inline; }


/* BLOG PAGE */
.blogPage {
}
.blogPage td {
	vertical-align: top;
	padding-left: 30px;
}

.blogPage ul.blogCategory {
}
.blogPage ul.blogCategory li {
	font-size: 14px;
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
	line-height: 20px;
	padding-bottom: 5px;
	color: #333;
}
.blogPage ul.blogCategory li.selected {
	color: ${color1};
}
.blogPage ul.blogCategory a {
	color: #666 !important;
}
.blogPage ul.blogCategory a:hover {
	color: #000 !important;
}

.blogPage ul.blogLatestEntries {
}
.blogPage ul.blogLatestEntries li {
	font-size: 14px;
	line-height: 15px;
	padding-bottom: 10px;
	color: #333;
}
.blogPage ul.blogLatestEntries li.selected {
	color: ${color1};
}
.blogPage ul.blogLatestEntries a {
}
.blogPage ul.blogLatestEntries a:hover {
}


.blogEntry {
	padding-bottom: 20px;
	border-bottom: 1px dotted #999;
	margin-bottom: 50px;
}
.blogEntry .date {
	color: #AEB552;
	font-size: 14px;
	padding-bottom: 5px;
}
.blogEntry .title {
	width: 100%;
	color: ${color1};
	font-size: 24px;
	margin-bottom: 20px;
	font-family: 'Roboto Slab', 'Rokkitt', Georgia, 'Times New Roman', Arial;
}
.blogEntry .body {
	font-size: 14px;
	line-height: 20px;
	color: #666;
	padding-bottom: 10px;
}

.blogEntry .body h1,
.blogEntry .body h2,
.blogEntry .body h3,
.blogEntry .body h4 {
	font-weight: 500;
	padding-bottom: 10px;
}
.blogEntry .body h1 {
	font-size: 1.8em;
}
.blogEntry .body h2 {
	font-size: 1.6em;
}
.blogEntry .body h3 {
	font-size: 1.4em;
}
.blogEntry .body h4 {
	font-size: 1.2em;
}
.blogEntry .image {
	padding-bottom: 10px;
}
.blogEntry .attachment {
	font-size: 13px;
	color: #AEB552;
	font-weight: 500;
}
.blogEntry .attachment a {
	font-weight: normal;
}

/* VIRTUAL */
body.virtual .medium {font-size: 1em; }

body.virtual .mainColor {color: ${color1};}
body.virtual .userInfo { line-height: 1.5em; font-size: .9em;}

#content .actionsPlaceholder a {
	font-size: .8em;
	color: ${color1};
	text-decoration: underline;
}


ul.onlineVirtualMenu { margin-top: 20px;  }
ul.onlineVirtualMenu li {
	color: ${color1};
	line-height: 1.5em;
	margin-bottom: .2em;
	/*height: 40px; line-height: 40px; padding-left: 50px; margin-bottom: 5px;*/
}
ul.onlineVirtualMenu li a {
	color: inherit !important;
}

ul.onlineVirtualMenu li div.icon {
	font-family: "imedic_icons";
	font-size: 1.4em;
	font-style: normal;
	font-weight: normal;
	speak: none;
	 
	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .4em;
	text-align: center;
	/* opacity: .8; */
	 
	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;
	 
	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;
	 
	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: 0em;
	 
	/* you can be more comfortable with increased icons size */
	/* font-size: 120%; */
	 
	/* Font smoothing. That was taken from TWBS 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;*/
	 
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

ul.onlineVirtualMenu li.selected {font-weight: 500;}
ul.onlineVirtualMenu li.chatsList div.icon:before { content: '\43'; }
/*ul.onlineVirtualMenu li.chatsListSelected {background:${color1} url(images/public/assets_online.png) no-repeat scroll 10px -595px;}*/
ul.onlineVirtualMenu li.newChat div.icon:before { content: '\4d'; }
/*ul.onlineVirtualMenu li.newChatSelected {background:${color1} url(images/public/assets_online.png) no-repeat scroll 10px -395px;}*/
ul.onlineVirtualMenu li.teleVisit div.icon:before { content: '\56'; }
ul.onlineVirtualMenu li.newVisit div.icon:before { content: '\41'; }
/*ul.onlineVirtualMenu li.newVisitSelected {background:${color1} url(images/public/assets_online.png) no-repeat scroll 10px -195px;}*/
ul.onlineVirtualMenu li.nextVisits div.icon:before { content: '\4e'; }
/*ul.onlineVirtualMenu li.nextVisitsSelected {background:${color1} url(images/public/assets_online.png) no-repeat scroll 10px -495px;}*/
ul.onlineVirtualMenu li.changeData div.icon:before { content: '\50'; }
/*ul.onlineVirtualMenu li.changeDataSelected {background:${color1} url(images/public/assets_online.png) no-repeat scroll 10px -295px;}*/
ul.onlineVirtualMenu li.medicalHistory div.icon:before { content: '\44'; }
ul.onlineVirtualMenu li.petHistory div.icon:before { content: '\64'; }
/*ul.onlineVirtualMenu li.medicalHistorySelected {background:${color1} url(images/public/assets_online.png) no-repeat scroll 10px -595px;}*/
ul.onlineVirtualMenu li.sharedFolder div.icon:before { content: '\46'; }
ul.onlineVirtualMenu li.privateBlog div.icon:before { content: '\42'; }
/*ul.onlineVirtualMenu li.privateBlogSelected {background:${color1}; padding-left: 20px; no-repeat scroll 10px -595px;}*/
ul.onlineVirtualMenu li.privateBlogCategory {
		font-size: small;
		background:#fff;
		padding-left: 2.8em;
		margin-bottom: 1em;
		margin-top: 1em;
		line-height: 1.3em;
		no-repeat scroll 10px -545px;
		}
ul.onlineVirtualMenu li.privateBlogCategorySelected {
		font-size: small;
		background:#fff;
		font-weight: 500;
		padding-left: 2.8em;
		margin-bottom: 1em;
		margin-top: 1em;
		line-height: 1.3em;
		no-repeat scroll 10px -595px;
		}
ul.onlineVirtualMenu li.services div.icon:before { content: '\53'; }
/*ul.onlineVirtualMenu li.servicesSelected {background:${color1}; padding-left: 20px; no-repeat scroll 10px -595px;}*/

body.virtual label.error {color: #ff0000;}


body.virtual .professionalSidebar {width: 230px;position:relative;border-bottom: 1px dotted #8c8c8c; padding-bottom: 5px;}
body.virtual .professionalSidebar img {width: 90px;}
body.virtual .professionalSidebar .professionalData {float:left; position:absolute; left: 95px; bottom: 0px; padding-bottom: 5px;}
body.virtual .professionalSidebar .professionalData .professionalTitle {text-transform: capitalize; color: #6CAFDC; margin-bottom: 5px; font-size: 0.8em;}
body.virtual .professionalSidebar .professionalData .professionalName {font-size: 0.8em;}


body.virtual .onlinePersonalData {margin-bottom: 10px;}
body.virtual .onlinePersonalData td {padding: 5px 5px 5px 0px; height: 20px;}
body.virtual .onlinePersonalData input[type="password"], body.virtual .onlinePersonalData input[type="text"] {width: 200px; line-height: 20px; margin-right: 5px;}
body.virtual .onlinePersonalData {}

body.virtual .onlineErrorMessage {color: red; min-height: 300px; padding-top: 50px; text-align:center;}

body.wait *, body.wait {cursor: wait !important;}

#newVisitMainForm .onlineActions {margin-top: 10px;}
#newVisitMainForm .onlineActions a.main {background-color: #35baaf;}
#newVisitMainForm .onlineActions a.wait:hover {pointer-events: none;}

#newVisitMainForm label.error {display:block;}
#newVisitContent .calendarZone .calendar {float:left; padding-right: 20px; font-size: 14px; margin-bottom: 10px;}
#newVisitContent .calendarZone .availableTime {float:right; }
#newVisitContent .calendarZone .calendarBack {}
#newVisitContent .calendarZone .calendarBack .calendarLoading {margin-top: 30px; text-align:center;}
#newVisitContent .calendarZone .calendarContainer .ui-datepicker {width: 280px; padding: 0px; border: none !important;}
#newVisitContent .calendarZone .calendarContainer .ui-widget-content {background: none;}
#newVisitContent .calendarZone .calendarContainer .ui-widget-header {background: none; border: none;}

#newVisitContent .calendarZone div.legend { padding: 10px; float: left; padding-right: 20px; margin-bottom: 10px; }
#newVisitContent .calendarZone div.legend label { font-size: 0.8em; float: left; padding-left: 3px; padding-right: 6px; }
#newVisitContent .calendarZone div.legend div { float: left; width: 9px; height: 9px; border: 1px solid #ccc; }
#newVisitContent .calendarZone div.legend div.available { background: rgba(53, 186, 175, 0.16); }
#newVisitContent .calendarZone div.legend div.notAvailable{ background: #FF8C07; }
#newVisitContent .calendarZone div.legend div.holiday { background: #D8D9DA; }
#newVisitContent .calendarZone div.legend div.selected { background: #6DB0DD; }

#newVisitContent .visitDetail textarea {padding: 3px; resize: none; height: 50px; width: 270px; font-size: inherit;}
#newVisitContent table.selectVisitData td {padding: 3px; vertical-align: top;}
#newVisitContent table.selectVisitData td.label {font-weight: 500;}
#newVisitContent .visitDetail {}
#newVisitContent .visitDetail span.faded {font-weight: normal !important; font-style:italic;}
#newVisitContent ul.visitGaps {list-style-type: none; padding: 0px;}
#newVisitContent ul.visitGaps li.selectedDay {background-color: #35baaf; padding: 5px 5px 5px 15px; margin-bottom: 5px; color: #ffffff;}
#newVisitContent ul.visitGaps li.visitGap {line-height: 1.2em; padding: 5px 5px 5px 15px; margin-bottom: 5px;}
#newVisitContent ul.visitGaps li.visitGapAvailable {background-color: rgba(53, 186, 175, 0.16); cursor: pointer;}
#newVisitContent ul.visitGaps li.visitGapAvailableSelected {background-color: #e3f4fb !important; color: #007eb5; border: 1px solid #007eb5; font-weight: bolder;}
#newVisitContent ul.visitGaps li.visitGapUnavailable {background-color: #f6f6f6;}
#newVisitContent ul.visitGaps li.visitGap .availableLabel {color: #007eb5;}
#newVisitContent ul.visitGaps li.visitGap .selectedLabel {}
#newVisitContent ul.visitGaps li.visitGapAvailable .selectedLabel {display:none;}
#newVisitContent ul.visitGaps li.visitGapAvailableSelected .availableLabel {display:none;}

#newVisitContent .professional label {font-size: 0.9em; }
#newVisitContent .professional label .specialty {font-size: 0.8em; padding-left: 22px; margin-bottom: 6px; }


/*
body.virtual .professional .name {
	padding-bottom: 10px;
	font-size: 15px;
	color: ${color1};
}
body.virtual .professional .specialty {
	font-size: 12px;
	padding-left: 22px;
	padding-top: 5px;
	padding-bottom: 15px;
}
body.virtual .professional p {
	font-size: 13px;
	line-height: 18px;
	border-top: 1px dotted #999;
	border-bottom: 1px dotted #999;
	padding-top: 10px; 
	padding-bottom: 10px; 
}
*/


body.virtual ul.nextVisits {}
body.virtual ul.nextVisits li {background-color: #f6faec; padding: 10px; xpadding: 5px 5px 5px 15px; margin-bottom: 5px;}
body.virtual ul.nextVisits li .visitDay {text-transform: capitalize; margin-bottom: 5px; font-weight: 500;}
body.virtual ul.nextVisits li .visitDay a.cancelVisit {margin-left: 10px; font-size: 0.8em; color: #000 !important; text-decoration: underline !important;}
body.virtual ul.nextVisits li .visitDay a.cancelVisit:hover {text-decoration: none !important;}
body.virtual ul.nextVisits li .visitTime {margin-bottom: 5px; font-weight: 500;}
body.virtual ul.nextVisits li .professional {font-weight: normal; padding-left: 20px;}
body.virtual ul.nextVisits li.selectedEntry {background-color: #f1902f; color: #fff;}
body.virtual ul.nextVisits li.selectedEntry div.selectedEntry {float: right; background-color: #f6faec; color: #000; padding: 5px; font-size: 0.8em;}

#tooltip {position: absolute; z-index: 3000; padding: 5px; opacity: 1; max-width: 400px; ${cis:params(borderRadius,"5px")} 
}
#tooltip h3, #tooltip div { margin: 0; line-height: 15px; font-size: .8em;}
#tooltip { background-color: #F6F6F6;  border: 1px solid #a4a4a6; ${cis:params(borderRadius,"5px")}}

/* PAGE ACTIONS AND BUTTONS */
XXpageActionsGlobal { height: 30px; padding-bottom: 15px; margin-left: -2px; }
#content .pageActions { height: 60px; padding: 10px 0px; }
#content .pageActions input[type=button] { margin: 0; height: 28px; padding: 5px 10px; background-color: #eee; color: #666; text-decoration: none; font-weight: 500; border: 1px solid #ccc; float: left; ${cis:params(borderRadius,"5px")}
 }
#content .pageActions input[type=button]:hover { background-color: #ddd; cursor: pointer; }
#content .pageActions a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
#content .pageActions a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 0px solid #ccc; }
#content .pageActions a { padding: 7px 10px; background-color: #eee; color: #aaa; text-decoration: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; float: left; border-left: 1px solid #ccc; }
#content .pageActions a:hover { color: #fff;background-color: #1da2dc; }
#content .pageActions a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 2px; }
#content .pageActions a { border-right: 1px solid #ccc; border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 2px; }
#content .pageActions a.link { text-decoration: underline; background-color: transparent; border: none; }
#content .pageActions a.link:hover { text-decoration: underline; background-color: transparent; border: none; color: #000; }
#content .pageActions div.preActionsText {padding-top: 8px; padding-right: 5px; float: left; font-weight: 500;}

#content .pageActions a.main { 
	color: #fff; border: none; background-color: #167169;
	${cis:params(gradientGreen,"")}
}
#content .pageActions a.main:hover { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}
#content .pageActions a.cancel { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
#content .pageActions a.cancel:hover { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}
#content .pageActions a.back { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
#content .pageActions a.back:hover { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}
#content .pageActions a.normal { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
#content .pageActions a.normal { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}

#content tr.rowActions td { padding-top: 3px; }
#content .rowActions .pageActions { padding: 5px 0px 5px 0px; }
#content .rowActions .pageActions a { 
	position: relative;
	border: none; margin: 0px 1px; line-height: 20px; padding: 0px 10px 0px 10px; font-size: .8em; font-weight: normal; color: #fff; 
	background-color: #007eb5 !important;
	${cis:params(gradientGreen,"")}
	${cis:params(borderRadius,"4px")}
	
}
#content .rowActions .pageActions a:hover {
	${cis:params(gradientGreenHighlight,"")}
}
#content .rowActions .pageActions a div.icon { position: absolute; left: 2px; top: 0px; width: 20px; height: 20px; }
 
#content .rowActions .pageActions a.first { margin-left: 0px; }
#content .rowActions .pageActions a.back { padding-left: 25px; ${cis:params(gradientGreen,"")} }
#content .rowActions .pageActions a.back:hover { ${cis:params(gradientGreenHighlight,"")} }
#content .rowActions .pageActions a.back div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -600px; }
#content .rowActions .pageActions a.delete { padding-left: 25px; }
#content .rowActions .pageActions a.delete div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -540px; }
#content .rowActions .pageActions a.edit { padding-left: 25px; }
#content .rowActions .pageActions a.edit div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -520px; }
#content .rowActions .pageActions a.view { padding-left: 25px; }
#content .rowActions .pageActions a.view div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -500px; }
#content .rowActions .pageActions a.access { padding-left: 25px; } /* XXX */
#content .rowActions .pageActions a.access div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -600px; } /* XXX */
#content .rowActions .pageActions a.highlight { ${cis:params(gradientGreen,"")} }
#content .rowActions .pageActions a.highlight:hover { ${cis:params(gradientGreenHighlight,"")} }
#content .rowActions .pageActions a.redHighlight { ${cis:params(gradientRed,"")} }
#content .rowActions .pageActions a.redHighlight:hover { ${cis:params(gradientRedHighlight,"")} }
#content .rowActions .pageActions a.greenHighlight { ${cis:params(gradientGreen,"")} }


/* PAGE ACTIONS AND BUTTONS */
XXpageActionsGlobal { height: 30px; padding-bottom: 15px; margin-left: -2px; }
.pageActions { height: 30px; padding: 10px 0px;}
.pageActions input[type=button] { margin: 0; height: 28px; padding: 5px 10px; background-color: #eee; color: #666; text-decoration: none; font-weight: 500; border: 1px solid #ccc; float: left; ${cis:params(borderRadius,"5px")}
 }
.pageActions input[type=button]:hover { background-color: #ddd; cursor: pointer; }
.pageActions a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.pageActions a { border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-right: 1px solid #ccc; }
.pageActions a { padding: 7px 10px; background-color: #f5f5f5; color: #666; text-decoration: none; font-weight: 500; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; float: left; border-left: 1px solid #ccc; }
.pageActions a:hover { background-color: #DAF2F8; }
.pageActions a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; margin-left: 2px; }
.pageActions a { border-right: 1px solid #ccc; border-top-right-radius: 5px; border-bottom-right-radius: 5px; margin-right: 2px; }
.pageActions a.link { text-decoration: underline; background-color: transparent; border: none; }
.pageActions a.link:hover { text-decoration: underline; background-color: transparent; border: none; color: #000; }
.pageActions div.preActionsText {padding-top: 8px; padding-right: 5px; float: left; font-weight: 500;}

.pageActions a.main { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
.pageActions a.main:hover { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}
.pageActions a.cancel { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
.pageActions a.cancel:hover { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}
.pageActions a.back { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
.pageActions a.back:hover { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}
.pageActions a.normal { 
	color: #fff; border: none;
	${cis:params(gradientGreen,"")}
}
.pageActions a.normal { 
	color: #fff; border: none;
	${cis:params(gradientGreenHighlight,"")}
}

tr.rowActions td { padding-top: 3px; }
.rowActions .pageActions { padding: 5px 0px 5px 0px; height: 20px; }
.rowActions .pageActions a { 
	position: relative;
	border: none; margin: 0px 1px; line-height: 20px; padding: 0px 10px 0px 10px; font-size: 12px; font-weight: normal; color: #fff; 
	${cis:params(gradientGreen,"")}
	${cis:params(borderRadius,"4px")}
	
}
.rowActions .pageActions a:hover {
	${cis:params(gradientGreenHighlight,"")}
}
.rowActions .pageActions a div.icon { position: absolute; left: 2px; top: 0px; width: 20px; height: 20px; }
 
.rowActions .pageActions a.first { margin-left: 0px; }
.rowActions .pageActions a.back { padding-left: 25px; ${cis:params(gradientGreen,"")} }
.rowActions .pageActions a.back:hover { ${cis:params(gradientGreenHighlight,"")} }
.rowActions .pageActions a.back div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -600px; }
.rowActions .pageActions a.delete { padding-left: 25px; }
.rowActions .pageActions a.delete div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -540px; }
.rowActions .pageActions a.edit { padding-left: 25px; }
.rowActions .pageActions a.edit div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -520px; }
.rowActions .pageActions a.view { padding-left: 25px; }
.rowActions .pageActions a.view div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -500px; }
.rowActions .pageActions a.access { padding-left: 25px; } /* XXX */
.rowActions .pageActions a.access div.icon { background: transparent url(images/imedic_icons.png) no-repeat 0px -600px; } /* XXX */
.rowActions .pageActions a.highlight { ${cis:params(gradientGreen,"")} }
.rowActions .pageActions a.highlight:hover { ${cis:params(gradientGreenHighlight,"")} }
.rowActions .pageActions a.redHighlight { ${cis:params(gradientRed,"")} }
.rowActions .pageActions a.redHighlight:hover { ${cis:params(gradientRedHighlight,"")} }
.rowActions .pageActions a.greenHighlight { ${cis:params(gradientGreen,"")} }
.rowActions .pageActions a.greenHighlight:hover { ${cis:params(gradientGreenHighlight,"")} }


/* IMEDIC+ (SERVEIS) PAGE */
.imedicPage { }
.imedicPage a { text-decoration: underline !important; }
.imedicPage a:hover { color: #000; }
.imedicPage .col1 { float: left; height: 280px; width: 290px; }
.imedicPage .col2 { float: left; height: 280px; width: 290px; padding-left: 30px;}
.imedicPage label { display: block; font-size: 13px; color: #666; line-height: 18px; width: 100%; font-family: Arial; padding-top: 10px; padding-left: 5px; }
.imedicPage span { font-size: 13px; color: #666; line-height: 18px; width: 100%; font-family: Arial;}
.imedicPage input[type=text] { font-size: 15px; display: block; width: 100%; background-color: #eee; border: none; height: 20px; }
.imedicPage textarea { font-size: 15px; display: block; width: 100%; background-color: #eee; border: none; height: 122px; margin: 0px; }
.imedicPage input[type=submit],
.imedicPage a.submit { font-size: 1.3em; padding: 10px 30px; text-decoration: none !important; font-weight: normal; background-color: ${color1}; color: #fff !important; border: 1px solid ${color1}; border-radius: 5px; cursor: pointer; }
.imedicPage a.cancel { font-size: 1.3em; padding: 10px 30px; text-decoration: none !important; font-weight: normal; background-color: #ccc; color: #333 !important; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; }
.imedicPage input[type=submit]:hover,
.imedicPage a.submit:hover,
.imedicPage a.cancel:hover { color: #fff !important; background-color: #000; border: 1px solid #000; }
.imedicPage input.error,
.imedicPage textarea.error { background-color: #ffff33; }
.imedicPage label.error { color: #ff0000; display: inline; }
.imedicPage div.text strong { font-weight: 500; font-size: 1.1em;}
.imedicPage div.text ul { padding: 15px; }
.imedicPage div.text ul li { padding-bottom: 10px;}
.imedicPage div.text, 
.imedicPage div.text input, 
.imedicPage div.text textarea {
	font-size: 15px !important;
	line-height: 20px !important;
}

#content .clinicalHistoryContent .medicalHistoryItemForm .title {
    font-weight: bolder;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #666;
	font-size: .9em;
	font-family: Arial;
}

#content .clinicalTrackingContent .medicalTrackingItemForm .title {
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #666;
	font-size: .9em;
	font-family: Arial;
}

#content .sharedFolderContent .medicalHistoryItemForm .title {
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 10px;
    color: #666;
	font-size: .9em;
	font-family: Arial;
}

/* SOCIAL NETWORKING ICONS */
@font-face {
	font-family: 'Fonts_imedic';
	src:url('fonts/Fonts_imedic.eot');
	src:url('fonts/Fonts_imedic.eot?#iefix') format('embedded-opentype'),
		url('fonts/Fonts_imedic.woff') format('woff'),
		url('fonts/Fonts_imedic.ttf') format('truetype'),
		url('fonts/Fonts_imedic.svg#Fonts_imedic') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'Fonts_imedic';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.fs1 {
		font-size: 1.8em;
		padding: 4px;
}

.noLogo {
	position: absolute;
	text-align: left;
	padding-top: 40px;
	padding-left: 30px;
	font-size: 20px;
}

#popup_container {
	background-color: white;
	min-width: 400px;
	max-width: 400px;
	padding: 2em !important;
}

#popup_message {
	margin-bottom: 20px;
}

<ts:spark template="lib/public.wysiwyg.spark">
	<ts:param name="prefix" value=".imedicPage div.freetext"/>
</ts:spark>