/*
* Cast CSS - Definizioni di base per l'uso delle librerie in versione jQuery 
*/

/* definizioni di carattere generale che in questa versione non servono più */
/*body, table {margin:0; padding:0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 90%;}
form, iframe, h1, h2, h3, xh4, h5, h6, div {margin:0; padding:0;}

body.fwkMain {background: #E5E5E5;}
body.fwkInner {background: white;}
*/

.castPageTitle {border: none;}
.logoSmall {height:14px; margin: 4 2 2 5 ;}
.logoBig {height:32px; margin-right: 5px; margin-left: 2px;}
.hide {display: none;}
.inline {display: inline-block; padding-left: 5px; padding-right: 5px;}
hr {margin-top: 5px; margin-bottom: 5px; border-bottom: 1px solid orange;}
a {color: #996633; text-decoration:none;}
a:hover {color: #754d25; text-decoration:underline;}
a.caBtn:hover {text-decoration:none;}

/* metto mano ad alcune definizioni di jquery-ui che mi sembrano non a posto */
.ui-widget-content {border-radius: 7px !important;}
.castPageTitle {border: none;}
.ui-widget-header {border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; padding: 3px !important;}
.castClose {float: right;} /* usato per le X di chiusura dei DIV creati con il metodo curFwk.div */

/* definizioni per la form di login e la classe user */
.login {margin-left: auto; margin-right: auto; padding: 0; text-align:center;}
.login #fwkContainer {border: none; width: 400px;}
.login #loginDiv {width: 400px; margin-top: 40px; margin-left: auto; margin-right: auto; margin-bottom: 0; padding: 0; text-align:center;}
.login #loginTitle {margin: 0; padding: 15px;}
.login #loginBody {margin: 25px;}
.login table {margin-left: auto; margin-right: auto; text-align: left;}
.login form th {text-align: left; padding: 4px;}
.login form td {padding: 4px;}
.login form #ok {width: 80px; height: 56px;}

/* definizioni per il bottone dell'utente (usrBox) */
#usrBox img {height:14px; margin-top: -12px;}
#usrBoxUpd hr {margin: 8px; border-top: 1px solid orange;}
#usrTxt {margin-top: -10px;}

/* tasto di help */
.helpLink {float: right; margin: 2px;}
.helpLink button {height: 34px;}
.helpLink i {color: #1c6eb5;}

/* form di login per schermi più piccoli */
@media screen and (max-width: 599px) {
	.login #loginDiv {width: 300px; margin-top: 40px; margin-left: auto; margin-right: auto; margin-bottom: 0; padding: 0; text-align:center;}
	.login #loginUsr, .login #loginPwd {width: 90px;}
	#fwkHeaderText {margin-left: 40px;}
	#usrBoxUpd {position: fixed; top: 20px; right: 20px;}
	#usrBox {width: 40px; margin-bottom: 3px;}
	#usrTxt {display: none;}
}

/* queste restano per retrocompatibilità, però sarebbe meglio usare quelle di bootstrap */
.message {background: yellow; color: black;}
.warning {background: orange; color: black;}
.error {background: red; color: white;}
.high {padding: 10px;}
.message hr, .warning hr {color: black;  background-color: black;}
.error hr {color: white; background-color: white;}
.errButton {margin: 5px 0 10px 0; padding: 10px;}

/* definizioni per oscurare lo sfondo */
.grayout {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;display: none;
	background-color: black;filter: alpha(opacity=30);opacity: 0.3; -moz-opacity:0.3;}

/* definizioni per la classe message */
#caMessage {z-index: 101; background: white; position: absolute; display:none;
		border: 1px solid silver; border-radius: 10px;}

/* per il posizionamento centrale ho trovato questo che va bene */
.caModalCenter {max-height: calc(100% - 100px); max-width: calc(100% - 20px); position: fixed !important; top: 35%; left: 50%; transform: translate(-50%, -50%);
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}
		
.caMsgTit {background: #8ec2f2; line-height: 32px; padding: 3px; padding-left: 10px; font-weight: bold; /* azzurro per tipi standard e info */
	border-top-left-radius: 9px; border-top-right-radius: 9px;}
.caMsgsuccess .caMsgTit {background: #8cd891;}	 /* verde per i tipi "success" */	 
.caMsgwarning .caMsgTit {background: orange;}	/* arancio per warning */ 
.caMsgerror .caMsgTit {background: red; color: white;}	  /* rosso per errori */

.caMsgButDiv {width: 100%; text-align: center; margin-bottom: 30px;}
.caMsgButDiv button {width: 100px; padding: 10px;}
.caMsgBut {font-weight: bold; float: right; width: 28px; height: 28px; margin: 2px; margin-left: 5px; padding: 0;}
.caMsgButAW {float: right; width: 28px; padding: 0;}
.caMsgButIE {font-weight: bold; float: right; width: 28px; height: 28px; margin: 2px; margin-left: 5px; padding: 0; position: relative; top: -34px;}
.caMsgButAWIE {float: right; width: 28px; padding: 0; position: relative; top: -34px;}
.caMsgBody {padding: 30px 10px 20px 10px; text-align: center; font-size: 110%;}
.caMsgInput {padding: 0 10px 20px 10px; text-align: center;}
.caMsgInput input {font-family: verdana, arial; font-size: 110%;}
.caMsgAlert {width: 100%; background: red; color: white; display: none; margin-top: 20px; line-height: 32px;
	text-align: center; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px;}
.caNoData {border-radius: 5px; font-weight: bold; width: 100%; max-width: 400px; padding: 10px; background: gold; margin: 10px auto 10px auto;}
.caNoDataOpt {width: 100%; max-width: 400px; padding: 10px; margin: 10px auto 10px auto;}

/* Definizioni per la gestione delle finestre modal */
/* Modal background */
.caModal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.caModal-content {
	background-color: #fefefe;
	border-radius: 10px;
	margin: 10% auto; /* 15% from the top and centered */
	width: 90%; /* Could be more or less, depending on screen size */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	max-width: 400px;
}

.anagNew div.caModal-content {margin-top: 20px;}

/* The Close Button */
.caModalClose {
	color: #aaa;
	float: right;
	font-size: 20px;
	font-weight: bold;
	display: inline-block;
	line-height: 25px;
}

.caModalClose:hover,
.caModalClose:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.caModal-header {
	padding: 2px 8px;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;
	background-color: #d5d5d5;
	color: black;
	height: 30px;
}

.caModal-header .text {padding: 4px; font-size: 105%; font-weight: bold; display: inline-block;}

.caModal-body {padding: 2px 16px;}

.caModal-footer {
	padding: 10px 16px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #ececec;
	color: black;
}

/* definizioni varie, assolutamente disordinate (da verificare e commentare) */
#usrBoxTarget {height: 30px; width: 200px; border: none;}

#usrBoxUpd {display: none; width: 240px; height: 320px; position: fixed; top: 20px; right: 100px; z-index: 101; text-align: center;}
#usrBoxLogout {margin-top: 10px;}
#usrBox {height: 34px; width: 80px; margin-top: 2px; text-align: center;}
#usrImg {padding-bottom: 3px;}
#usrTxt {font-size: 8px;}
.usrPwdField {font-size: 12px;}

.mob #usrImg {margin-top: 0;}
.mob #usrTxt {display: none;}

.cell {float: left; padding: 2px;}
.cellR {float: right; padding: 2px;}

/*
.btn, button, select, input[type="button"], input[type="submit"], input[type="reset"] {
*/

.caBtn, .caBtnAw {
	font-family: verdana,arial,sans-serif; 
	font-size: 85%;
	border-radius: 4px;
	line-height: 20px !important;
	display: inline-block;
	padding: 2px 4px;
	border: 1px solid #d3d3d3;
	background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
	font-weight: normal;
	color: #555555;
	outline: none;	
	cursor: pointer;
	min-width: 25px;
}

/* questa viene usata per i bottoni che contengono solo un tag <i> per il font awesome */
.caBtnAw {font-size: 95%; padding:4px; margin-right: 1px;}

/*.btn:hover, button:hover, select:hover, input[type="button"]:hover, 
input[type="submit"]:hover, input[type="reset"]:hover { 
*/

.caBtn:hover, .caBtnAw:hover  {
	background: #d5d4d6; 
	border: 1px solid #818185;
	color: #010101;
}

.caBtnDisabled{opacity: 0.5;}

/* definizioni per la classe browse */
/* nota: negli apparati di tipo mobile il mark della riga corrente deve essere nascosto, così non si attiva la tastiera che tanto non avrebbe le frecce; nei normali lo riabilito (più sotto) */
.mark {font-size: 1px; width: 0px; float: right; border: 0; display: block;} 
.num {text-align: right;}
/* display: block;   /* abilitare questa opzione alla brTitle se si vuole il titolo su una riga autonoma */

#brwTitle {font-weight: bold;}
#brwFollowMsg {font-style: italic;}
#brwDataTable {font-size: 95%; cursor: pointer;} 
#brwDataTable th {border-bottom: 1px outset #afaf9f; color: #8b0000; padding-left: 5px; padding-right: 5px;}
#brwDataTable tr {vertical-align: top;}
#brwDataTable tr.evid {color: black; background: orange;}
#brwDataTable td {border-bottom: 1px solid silver; padding: 1px 3px 1px 3px;}
.webBrowse #brwDataTable {margin-left: auto; margin-right:auto; width:100%;}
#brwDataTable {border: 3px solid silver;}
#brwDataTable .cell {float: left; padding: 2px;}
#brwDataTable .cellR {float: right; padding: 2px;}
#selRowCnt {display: inline-block; margin-left: 3px;}
#selRowCnt::before {content:"selezionati: ";}

/* definizione per browse contenuta in un div di classe castBox, che è quello generato da divBoxOpen  */
.castBox #brwDataTable {width: 100%; margin: 3px 0; border: none;}

#fltgo {font-size: smaller;}					/* il pulsante "vai" del filtro per default ha un carattere più piccolo */
#fltReset {display: none;}						/* il pulsante "reset" del filtro per default è non visibile */
#brwFilter {display: none;}						/* il campo di testo del filtro per default è non visibile */
.brwFlt input {line-height: initial; margin-top: 3px; width: 100%; color: black;}
.brwFlt th {color: black; font-weight: normal;}
.caFltData {width:100%;min-width:120px;}
.caFltData input {width:90px;}
#fltGo {width: auto; margin-top: 1px; margin-bottom: 1px;}
#chgPg {margin:0; padding: 0;}
#newPag, #chgPagGo {display: none;}	/* il campo di input per il cambio pagina e il tasto vai non sono visiibli */

/* definizioni per la vecchia classe labels che deve funzionare anche nel nuovo sistema */
#lblMainOut {padding-left: 10px; padding-right: 0; padding-top: 1px; background: orange; border: 0; cursor: pointer;}
#lblMain {overflow-x: hidden; background: orange; border: 0; margin-top: 5px;}

	/* -- questo per non mettere la barra di scorrimento; se si vuole la barra: overflow-x: scroll; */
.webLabels table {width: 100%;font-size: 100%;border: 0;}
.webLabels table td {width: 120px; border-bottom: 0;padding: 2px;padding-top: 5px;padding-bottom: 0;background: #fafafa;color: gray;
		font-weight: 400;cursor: hand;}
.webLabels table .over {width: 120px; border-bottom: 0; padding: 2px; padding-top: 2px; padding-bottom: 3px; margin-left: 1px; margin-right: 1px;
		background: orange; color: black;}
.webLabels table .on {width: 120px; border: 2px outset orange; border-bottom: 0; padding: 2px; padding-top: 2; padding-bottom: 3px; color: #4e4e6c; background: #FFFFE0;}
.webLabels table .onOver {width: 120px; border: 2px outset orange; border-bottom: 0; padding: 2px; padding-top: 2px; padding-bottom: 3px; color: black; background: orange;}
.webLabels .sep{border: 0; width: 10px; font-size: 15px; background: orange;}
.webLabels .last{border: 0; width: 100%; background: orange;}

/* queste sotto sono per la form */

.caFormLabels {padding-left: 6px; padding-right: 6px;}
.caFormLabels .nav > li > a {padding: 8px 12px;} 
.caFormLblDiv {}
.caFormRowTitle {font-weight: bold; padding-left: 3px; padding-right: 3px; background: #fdf4e2;}
.caFormRowFields {border-top: 1px solid silver; }
/* @media (min-width: 768px) { */
@media (min-width: 768px) {
	.caFormRowTitle {border-top: 1px solid silver; background: none;}
	.caFormRowFields {border-left: 3px solid orange; padding: 3px; border-top: 1px solid silver;}
}

.caFormFirstRow {border-top: none;}
.caFormField {float: left; padding: 3px;}
.caForm .row {margin-left: 0; margin-right: 0;}
.caFormButtons {text-align: center; padding: 6px; border-top: 1px solid silver}
.caFormMsgDiv {padding: 6px; margin-bottom: 6px; display: none; border-top: 1px solid silver;}
.caFormMsgOn {background-color: #5494cd; color: white; font-weight: bold;}
.caFormInfo {font-size: smaller;}
.caFormSkip {width: 1px; line-height: 1px; height: 1px}
.caReq {padding-left: 5px;}
.caReq::after {content: "*";}
.caLabel {font-weight: normal; margin:0;}
.form-group-sm {margin-bottom: 0;}

#webForm {border: none;}
#webForm table {margin-left: auto; margin-right: auto;}
#webFormTable caption {color: black; font-weight: bold;}
#webFormTable th {border-right: 1px solid orange; border-bottom: 1px solid silver; text-align: left; padding: 2px;}
#webFormTable td {border-bottom: 1px solid silver; padding: 2px;}
#webFormTable td td {border-bottom: none;}
#webFormTable td td.cur {background: orange;}
#webForm #buttonsTd {border: none;}
#webForm #buttonsTd #buttonsDiv {text-align: center;}
/* questa definizione riguarda le celle della classe form con opzione floatMode */
/* in floatMode le celle della riga vengono trattate non più come tabelle ma come div flottanti, a tutto vantaggio della visualizzazione dinamica */
.cellRow div {float: left; padding: 2px;}

/* definizioni per oggetti particolari (era scritto così ma non so bene cosa siano, anche qui è da verificare e commentare) */
.ui-button {font-size: 100%;}
a.btn {color: none; padding: 6px; line-height: 32px; text-decoration:none; margin-right: 2px;} 
.ui-widget-content, .ui-widget-header {-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;}

img.fwk {border:none;}
img.btn {border:none;}

.castBox {
	border: 2px solid silver;
	border-radius: 7px;
}
.castBox .title {
	padding: 5px;
	
	background: #cecece; color: black; font-weight: bold;
	border-bottom: 2px solid silver;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

/* definizioni per la classe buttons */
.buttons button{min-height:40px;min-width:80px;border-radius:3px;}
.buttons td {margin: 8px; padding: 4px;}
.caBtnOn {background: gold;}

/* altre cosine */
.mntTitleNew {background: #898aef; font-weight: bold; color: white; padding: 5px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.mntTitleMod {background: #8fbde0; font-weight: bold; color: black; padding: 5px; border-top-left-radius: 8px; border-top-right-radius: 8px;}
.mntTitleDel {background: red; font-weight: bold; color: white; padding: 10px; border-top-left-radius: 8px; border-top-right-radius: 8px;}

.caSrcFrame {height: 600px; width: 500px; border: 3px solid silver; border-radius: 6px; padding: 3px;}
.styBrwSrc #brwDataTable {border: none;}
.SQL {display: none;}
#byCast {color: #cacaca; font-size: 0.9em; float: left; padding-top: 3px;}
.login #byCast {margin-left: auto; margin-right:auto; float: none;}

/* queste aiutano nelle form fatte con la classe form per definire le larghezze dei campi larghi */
.width50 {max-width: 800px;}
.width75 {max-width: 1200px;}
.width90 {max-width: 1200px;}

@media screen and (max-width: 319px) {
	.width50 {max-width: 160px;}
	.width75 {max-width: 240px;}
	.width90 {max-width: 300px;}
	.caSrcFrame {height: 300px; width: 300px;}	
	.container-fluid {padding: 0;}
}
@media screen and (min-width: 320px) and (max-width: 399px) {
	.width50 {max-width: 160px;}
	.width75 {max-width: 240px;}
	.width90 {max-width: 300px;}
	.caSrcFrame {height: 300px; width: 300px;}	
	.container-fluid {padding: 0;}
}
@media screen and (min-width: 400px) and (max-width: 519px) {
	.width50 {max-width: 200px;}
	.width75 {max-width: 300px;}
	.width90 {max-width: 400px;}
	.container-fluid {padding-left: 2px; padding-right: 2px;}
}
@media screen and (min-width: 520px) and (max-width: 599px) {
	.width50 {max-width: 250px;}
	.width75 {max-width: 375px;}
	.width90 {max-width: 500px;}
	.container-fluid {padding-left: 2px; padding-right: 4px;}
}
@media screen and (min-width: 600px) and (max-width: 639px) {
	.width50 {max-width: 300px;}
	.width75 {max-width: 450px;}
	.width90 {max-width: 600px;}
	.container-fluid {padding-left: 2px; padding-right: 4px;}
}
@media screen and (min-width: 640px) and (max-width: 767px) {
	.width50 {max-width: 320px;}
	.width75 {max-width: 480px;}
	.width90 {max-width: 600px;}
	.container-fluid {padding-left: 2px; padding-right: 6px;}
}
@media screen and (min-width: 768px) and (max-width: 799px) {
	.width50 {max-width: 384px;}
	.width75 {max-width: 576px;}
	.width90 {max-width: 760px;}
	.container-fluid {padding-left: 2px; padding-right: 2px;}
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
	.width50 {max-width: 400px;}
	.width75 {max-width: 600px;}
	.width90 {max-width: 800px;}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.width50 {max-width: 512px;}
	.width75 {max-width: 750px;}
	.width90 {max-width: 1000px;}
}
@media screen and (min-width: 1280px) {
	.width50 {max-width: 640px;}
	.width75 {max-width: 960px;}
	.width90 {max-width: 1200px;}
}

/* faccio in modo che sui monitor con altezze comprese tra i 400 e i 768 px la griglia si riduca per ottimizzare lo spazio */
/* al di sotto di questa misura sono cellulari, e non posso ridurre; */
/* al di sopra sono monitor ad alta risoluzione e i caratteri devono essere maggiori */   
@media screen and (min-height: 500px) and (max-height: 768px) {
	html, body, table, h1, h2, h3, h4, h5, .list-group-item, .btn {font-size: 12px !important;}
	.nav>li>a {padding: 5px 8px;}
}

/* CSS line loader */

.caLoader {
	/* width: 54%; */
	/* position: relative; */
	/* left: 10%; */
}

.caLoader:before {
	display: block;
	position: absolute;
	content: "";
	/* left: -74px; */
	width: 50px;
	height: 4px;
	background-color: #2980b9;
	animation: loading 2s linear infinite;
}

@keyframes loading {
	from {
		left: 10px;
		width: 5%;
	}
	50% {
		width: 30%;
	}
	70% {
		width: 55%;
	}
	80% {
		left: 50%;
	}
	95% {
		left: 85%;
	}
	to {
		left: 95%;
	}
}

/* CSS line loader */

/*************************************************************************************************************************/
/* da qui in poi ci sono le definizioni delle versioni precedenti la cui inclusione deve essere valutata punto per punto */
/*************************************************************************************************************************/

/*
#fwkContainer {width: 100%; background: white; margin-left: auto; margin-right: auto; min-height:99%;}
#innerContainer {background: white; margin-left: auto; margin-right: auto;}

#fwkHeaderText {display: inline-block; font-size: smaller; margin-top: 4px; margin-left: 80px;}
#fwkHeaderUsr {height: 36px; float: right; text-align: center; padding-right: 4px;}
#fwkFooter {width: 100%; left: 0; border-top: 2px solid #dadada; font-size: 0.8em; line-height: 0.8em; clear:both; background: white; height: 1.4em;}
#fwkFooterFix {position:absolute; width: 100%; bottom: 5px; left : 0; border-top: 2px solid #cacaca; font-size: 0.9em; line-height: 0.9em; clear: both; background: white;}

a {color: #996633;}
a:hover {color: black;}

.centeredDiv {margin-left: auto; margin-right: auto; padding: 0; text-align:center; background: white;}
#frmMessages {width: 964px; height: 89%; float: none; border: 2px solid #CCFF99; display:block;}
*/

/* definizioni per gli elementi title, si differenziano tra pagine esterne e pagine interne */
/*
.fwkMain .divTitle {position: relative; height: 20px; padding: 3px; border-bottom: 1px solid silver; background: #EDEDED; background:url(../../images/ipad_menu.gif);}
.fwkInner .divTitle {position: relative; height: 20px; padding: 3px; border-bottom: 1px solid silver; background: #EDEDED;}
.divTitleL {position: absolute; left: 4px; width: 50%;}
.divTitleR {position: absolute; right: 4px; width: 50%; text-align: right; }
*/

/* menu standard */
/*
.menuContainer td a, .menuContainer td a:hover {color: none; background: none;} 
.webMenu {width: 100%; background: #EDEDED; border-bottom: 1px solid silver; }
.webMenu table td {border-bottom: none;}
.rootVoices {background-color:none !important; text-shadow:none;}
.menuVert {width: 300px; float: left; margin-right: 10px; margin-bottom: 5px;}
*/

/* menu verticale, basato sull'UI accordion... c'è qualcosa che non capisco e ci devo mettere  mano qui */
/* .ui-accordion .ui-accordion-header {padding: 3px; padding-left: 25px;} */


/* sui cellulari ho visto che è meglio non influenzare le larghezze dei div contenitori esterni */
/*
@media screen and (max-width: 319px) {
	#fwkContainer {padding: 5px 3px 0px 0px;}  
	.login #fwkContainer {width: 319px;}
	#dvceLOW {display: block; background: #CC3300; color: white;}
	.menuVert {width: 319px; float: none; font-size: 130%; border-top: 2px solid #CC3300;}
	#frmMessages {width: 315px; height: 100%; border: 2px solid #CC3300;}
}
@media screen and (min-width: 320px) and (max-width: 399px) {
	#fwkContainer {padding: 5px 3px 0px 0px;} 
	.login #fwkContainer {width: 320px;}
	#dvce320 {display: block; background: #CC9966; color: #333333;}
	.menuVert {width: 320px; float: none; font-size: 120%; border-top: 2px solid #CC9966;}	
	#frmMessages {width: 316px; height: 100%; border: 2px solid #CC9966;}
}
@media screen and (min-width: 400px) and (max-width: 519px) {
	#fwkContainer {padding: 5px 3px 0px 0px;} 
	.login #fwkContainer {width: 400px;}
	#dvce400 {display: block; background: #CCCC99; color: #333333;}
	.menuVert {width: 400px; float: none; font-size: 120%; border-top: 2px solid #CCCC99;}
	#frmMessages {width: 396px; none; height: 100%; border: 2px solid #CCCC99;}
}
@media screen and (min-width: 520px) and (max-width: 599px) {
	#fwkContainer {width: 518px; padding: 5px 3px 0px 0px;}
	#innerContainer {width: 510px;}
	.login #fwkContainer {width: 400px;}
	#dvce400 {display: block; background: #3b5999; color: white;}
	.menuVert {width: 518px; float: none; font-size: 120%; border-top: 2px solid #CCCC99;}
	#frmMessages {width: 514px; none; height: 100%; border: 2px solid #CCCC99;}
}
@media screen and (min-width: 600px) and (max-width: 639px) {
	#fwkContainer {width: 600px; padding: 5px 3px 0px 0px;}
	#innerContainer {width: 590px;}
	.login #fwkContainer {width: 400px;}
	#dvce600 {display: block; background: #FFCC99; color: #333333;}
	.menuVert {width: 220px; font-size: 110%; border-top: 2px solid  #FFCC99;}
	#frmMessages {width: 365px; height: 89%; border: 2px solid  #FFCC99;}
}
@media screen and (min-width: 640px) and (max-width: 767px) {
	#fwkContainer {width: 640px; padding: 5px 3px 0px 0px;}
	#innerContainer {width: 630px;}
	.login #fwkContainer {width: 400px;}
	#dvce640 {display: block; background: pink; color: #333333;}
	.menuVert {width: 250px; font-size: 110%; border-top: 2px solid pink;}
	#frmMessages {width: 372px; height: 89%; border: 2px solid pink;}
}
@media screen and (min-width: 768px) and (max-width: 799px) {
	#fwkContainer {width: 768px; padding: 5px 3px 0px 0px;}
	#innerContainer {width: 750px;}
	.login #fwkContainer {width: 400px;}
	#dvce768 {display: block; background: orange; color: #333333;}
	.menuVert {width: 250px; font-size: 110%; border-top: 2px solid orange;}
	#frmMessages {width: 500px; height: 89%; border: 2px solid orange;}
}
@media screen and (min-width: 800px) and (max-width: 1023px) {
	#fwkContainer {width: 800px; padding: 5px 3px 0px 3px;}
	.login #fwkContainer {width: 400px;}
	#dvce800 {display: block; background: #009966; color: #333333;}
	.menuVert {width: 250px; font-size: 100%; border-top: 2px solid #009966;}
	#frmMessages {width: 534px; height: 89%; border: 2px solid #009966;}
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	#fwkContainer {width: 1024px; padding: 5px 3px 0px 3px;}
	.login #fwkContainer {width: 400px;}
	#dvce1024 {display: block; background: #99CC99; color: #333333;}
	.menuVert {width: 250px; font-size: 100%; border-top: 2px solid #99CC99;}
	#frmMessages {width: 760px; height: 89%; border: 2px solid #99CC99;}
}
@media screen and (min-width: 1280px) {
	#fwkContainer {width: 1280px; padding: 5px 3px 0px 3px;}
	.login #fwkContainer {width: 400px;}
	#dvce1280 {display: block; background: #CCFF99; color: #333333;}
	.menuVert {width: 300px; font-size: 100%; border-top: 2px solid #CCFF99;}
	#frmMessages {width: 964px; height: 89%; border: 2px solid #CCFF99;}
}

#frmMessages {float: none; margin: auto;}
*/