/* CONTAINERS */

/* div: primaria */

.dynamicbox {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	width: 300px;	
}

.dynamicbox div.dynamicbox-inside {
	border: 1px solid #ABABAB;
}

/* div: titulo */

.dynamicbox-title {
	color: #575757;
	padding: 5px 10px;
	background: #ABABAB;
}

/* div: conteudo */

.dynamicbox-content-container-on,
.dynamicbox-content-container-off {
	padding: 10px;
	height: 130px;
}

.dynamicbox-content-container-on p,
.dynamicbox-content-container-off p {
	/* font-size: 80%; */
	font-weight: normal; 
}

.dynamicbox-content-container-on img,
.dynamicbox-content-container-off img {
	float: left;
	margin: 0 15px 0 0; 
}

.dynamicbox .dynamicbox-content-container-off {
	display: none;
}

.dynamicbox .dynamicbox-content-container-on {
	display: block;
}

.dynamicbox-content-container-on { display: inline-block }
.dynamicbox-content-container-on:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } 
* html .dynamicbox-content-container-on { height: 1% }
.dynamicbox-content-container-on { display: block }

.dynamicbox-content-container-off { display: inline-block }
.dynamicbox-content-container-off:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
* html .dynamicbox-content-container-off { height: 1% }
.dynamicbox-content-container-off { display: block }

/* div: container das listas */

.dynamicbox-lists {
	padding: 0;
}

/* div: container dos controles de navegação */ 

.dynamicbox-paging {
	position: relative;	
	height: 40px;
}

.dynamicbox-paging-container {
	height: 30px;
	position: absolute;
	top: 5px;
	right: 3px;	
}

/* LISTAS */ 

/* lista: seletores do conteudo */

.dynamicbox ul {
	margin: 0;
	padding: 0;	
	list-style: none;
	list-style-position: inside;	
}

.dynamicbox ul li {
	display: inline;
}

.dynamicbox-invisible {
	width: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
}

.dynamicbox-visible {
	width: auto;
	height: auto;
	overflow: auto;
	position: static;
}

/* lista: controles de paginacao */

.dynamicbox-paging ul li {
	display: inline;
}

.dynamicbox-paging ul { display: inline-block }
.dynamicbox-paging ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden }
* html .dynamicbox-paging ul { height: 1% }
.dynamicbox-paging ul { display: block }

/* LINKS */

/* links: seletores do conteudo */

.dynamicbox ul li a.on,
.dynamicbox ul li a.off {
	display: block;
	padding: 5px;
	line-height: 20px;
	margin-bottom: 1px;		
}

.dynamicbox ul li .on:link,
.dynamicbox ul li .on:visited,
.dynamicbox ul li .on:hover,
.dynamicbox ul li .on:active {
	color: #575757;
	background: #ABABAB;
	text-decoration: none;
}

.dynamicbox ul li .off:link,
.dynamicbox ul li .off:visited {
	color: #999;
	background: #DADADA;	
	text-decoration: none;
}

.dynamicbox ul li .off:hover,
.dynamicbox ul li .off:active {
	color: #575757;
	background:  #BEBEBE;
	text-decoration: underline;
}
	
/* links: controles de paginacao */

.dynamicbox-paging-link-off,
.dynamicbox-paging-link-on {
	display: block;
	float: left;
	width: 70px;
	line-height: 30px;		
	margin-right: 2px;
	padding: 0 5px;	
	font-size: 90%;
	font-weight: normal;	
}

.dynamicbox-paging-link-off:link,
.dynamicbox-paging-link-off:visited,
.dynamicbox-paging-link-off:hover,
.dynamicbox-paging-link-off:active {
	color: #A3A3A3;
	cursor: default;		
	background: #DDDDDD;
	text-decoration: none;	
}

.dynamicbox-paging-link-on:link,
.dynamicbox-paging-link-on:visited {
	color: #595959;	
	background: #B2B2B2;
	text-decoration: none;	
}
.dynamicbox-paging-link-on:hover,
.dynamicbox-paging-link-on:active {
	color: #E6E6E6;	
	background: #595959;
	text-decoration: underline;
}



/* MISCELANEA */

.dynamicbox :focus{ outline: 0 }