section,
footer,
header { display: block; }

h3 { margin-top: 0; }
h2 sup { font-weight: 700; font-size: .4em; margin-left: 3px; }

code { font-size: 1.3em; }

.helpLine { cursor: help; display: none; opacity: .95; width: 254px; margin: 0; padding: 8px; -webkit-box-shadow: 3px 3px rgba(0, 0, 0, 0.1); box-shadow: 3px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 3px 3px rgba(0, 0, 0, 0.1); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #AC2115; background: #FFF; background: -moz-linear-gradient(center top , #FFF, #EFEFEF) repeat scroll 0 0 #FFF; background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EFEFEF)) repeat scroll 0 0 #FFF; background: -o-linear-gradient(center top , #FFF, #EFEFEF) repeat scroll 0 0 #FFF; position: absolute; left: -285px; top: -5px; z-index: 20;  }
.helpLine:after { position: absolute; right: -18px; top: 4px; content: ""; display: block; width: 1px; height: 1px; border-width: 8px; border-style: solid; border-color: transparent transparent transparent #AC2115; }
.helpLine ol { padding-left: 20px; list-style: decimal outside !important; }
.helpLine ol li { list-style: decimal outside !important; }

input.hidden,
textarea.hidden { display: none; }

#contentWrapper { display: block; height: 1%; padding-left: 40px; margin-top: 10px; }
#contentWrapper.withNav { padding-left: 245px; }
#contentWrapper.withNav #contentMain { margin-top: 0; }

#nav { color: #660303; display: inline; float: left; margin: 0 0 0 -234px; width:218px; font-family: Arial, Helvetica, sans-serif; }
#nav p { color: #000; font-size: 1.091em; }  
#nav ul { border: 1px solid #C7C7C7; -webkit-border-radius: 10px; border-radius: 10px; -moz-border-radius: 10px; margin: 0 0 1em 0; font-size: 1.273em; padding: 0 1px 5px; }
#nav ul li { font-weight: 700; line-height: 1.2em; padding: 5px 15px; margin: 7px 0 0 0; background: none; }
#nav ul li ul li:first-child,
#nav ul li ul li.first-child { background: none; padding-top: 5px; }
#nav ul li.current,
#nav ul li.current a { color: #4d4d4d; }
#nav ul li.current a:hover { text-decoration: none; cursor: text; }
#nav ul li img { vertical-align: middle; margin-right: 8px; background: url(imgs/selector/plugin-icons.png) no-repeat 0 0; }
#nav ul li img.ico-help { background-position: 0 -252px; }
#nav ul li img.ico-tabs { background-position: 0 0; }
#nav ul li img.ico-accordion { background-position: 0 -42px; }
#nav ul li img.ico-carrousel { background-position: 0 -84px; }
#nav ul li img.ico-datepicker { background-position: 0 -126px; }
#nav ul li img.ico-modal { background-position: 0 -168px; }
#nav ul li img.ico-autocomplete { background-position: 0 -210px; }
#nav ul li img.ico-tweet,#nav ul li img.ico-twitter { background-position: 0 -302px; }
#nav ul li img.ico-bigplayer { background-position: 0 -715px; }
#nav ul li img.ico-bigplaylist { background-position: 0 -84px; }
#nav ul li.current img.ico-help { background-position: 0 -612px; }
#nav ul li.current img.ico-tabs { background-position: 0 -352px; }
#nav ul li.current img.ico-accordion { background-position: 0 -394px; }
#nav ul li.current img.ico-carrousel { background-position: 0 -436px; }
#nav ul li.current img.ico-datepicker { background-position: 0 -478px; }
#nav ul li.current img.ico-modal { background-position: 0 -520px; }
#nav ul li.current img.ico-autocomplete { background-position: 0 -562px; }
#nav ul li.current img.ico-tweet,#nav ul li.current img.ico-twitter { background-position: 0 -662px; }
#nav ul li.current img.ico-bigplayer { background-position: 0 -765px; }
#nav ul li.current img.ico-bigplaylist { background-position: 0 -436px; }

#contentMain { position: relative; width: 100% !important; margin-top: 20px; }
#contentMain .col { float: left; width: 45%; margin-left: 5%; }
#contentMain .col:first-child { margin-left: 0; }

#contentMain #plugins { column-count: 2; margin: 0; }
#contentMain #plugins > li { overflow: hidden; margin: 0 0 3em; padding: 0; background: none; }
.js #contentMain #plugins > li { height: 0px; margin: 0; }
.js #contentMain #plugins > li:first-child { height: auto; margin: 0 0 3em; }
.js #contentMain #plugins > li.hidden { height: 0px; margin: 0; }
.js #contentMain #plugins > li.current { height: auto; margin: 0 0 3em; }
#contentMain #plugins .usage,
#contentMain #plugins .example { float: left; width: 45%; margin: 0 5% 0 0; }
#contentMain #plugins .usage { margin-top: 36px; }

#contentMain #plugins form { position:relative; }
#contentMain #plugins form fieldset { padding-left: 1em; }
#contentMain #plugins form legend { /*float: left;*/ clear: both; font-size: 1.2em; color: #660303; font-weight: 700; margin-bottom: .5em; margin-left: -1em; }
/*#contentMain #plugins form ul:last-of-type { margin-bottom: 1em; border-bottom: 1px dotted #4d4d4d; }*/
#contentMain #plugins form ul li { position: relative; background: none; margin: 0; padding: 0; clear: both; margin-bottom: .5em; }
#contentMain #plugins form ul li:after { content: ""; display: block; visibility: hidden; clear: both; float: none; }
#contentMain #plugins form ul li p { float: left; margin-bottom: 0; }
#contentMain #plugins form ul li input,
#contentMain #plugins form ul li select,
#contentMain #plugins form ul li textarea,
#contentMain #plugins form ul li .group { float: right; margin-bottom: .5em; }
#contentMain #plugins form ul li .group * { float: none; }
#contentMain #plugins form ul li .group.left { float: none; position: relative; }
#contentMain #plugins form ul li .group.left input[type='checkbox']:first-child { margin-left: 0; margin-top: 2px; }
#contentMain #plugins form ul li textarea { width: 99%; }
#contentMain #plugins form ul li > label + input[type='checkbox'],
#contentMain #plugins form ul li .row > label + input[type='checkbox'],
#contentMain #plugins form ul li .group > label + input[type='checkbox'] { float: left !important; margin-left: 0; margin-top: 2px; }
#contentMain #plugins form ul li div.row { clear: both; overflow: hidden; margin-bottom: .5em; }
#contentMain #plugins form ul li div.row textarea { width: 98.5%; }
#contentMain #plugins form ul li.hidden,
#contentMain #plugins form ul div.hidden { display: none; }
#contentMain #plugins form ul .suboptions { padding-left: 16px; }
#contentMain #plugins .usage form:after {
	content: "";
	display: block;
	height: 1px;
	clear: both;
	border-top: 1px dotted #4d4d4d;
	position: absolute;
	bottom: 30px;
	left: 0;
	width: 100%;
}
#contentMain #plugins form input[type='submit'],
#contentMain #plugins form input[type='button'] {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	color: #FFF;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
	padding: 2px 10px;
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 2px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 2px rgba(0, 0, 0, .3);
	-o-box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 2px rgba(0, 0, 0, .3);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 2px rgba(0, 0, 0, .3);
	cursor: pointer;
	min-height: 17px;
	margin-top: 10px;
}
#contentMain #plugins form input[type='submit'] {
	background: #e66767;
	background: -moz-linear-gradient(bottom,  #AC2115,  #e66767);
	background: -webkit-gradient(linear, left bottom, left top, from(#AC2115), to(#e66767));
	background: -o-linear-gradient(bottom,  #AC2115,  #e66767);
	background: linear-gradient(bottom,  #AC2115,  #e66767);
	border: 1px solid #bf1313;
}
#contentMain #plugins form input[type='submit']:active {
	background: #d11414;
	background: -moz-linear-gradient(top,  #AC2115,  #e66767);
	background: -webkit-gradient(linear, left top, left bottom, from(#AC2115), to(#e66767));
	background: -o-linear-gradient(top,  #AC2115,  #e66767);
	background: linear-gradient(top,  #AC2115,  #e66767);
	opacity: 1 !important;
	
}
#contentMain #plugins form input[type='submit']:hover,
#contentMain #plugins form input[type='button']:hover {
	opacity: .8;
}
#contentMain #plugins form input[type='button'] {
	background: #e8e8e8;
	background: -moz-linear-gradient(bottom,  #ddd,  #fff);
	background: -webkit-gradient(linear, left bottom, left top, from(#ddd), to(#fff));
	background: -o-linear-gradient(bottom,  #ddd,  #fff);
	background: linear-gradient(bottom,  #ddd,  #fff);
	border: 1px solid #bbbbbb;
	color: #4d4d4d;
	text-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	margin-left: 1em;
}
#contentMain #plugins form input[type='button']:active {
	background: #d1d1d1;
	background: -moz-linear-gradient(bottom,  #fff,  #ddd);
	background: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#ddd));
	background: -o-linear-gradient(bottom,  #fff,  #ddd);
	background: linear-gradient(bottom,  #fff,  #ddd);
}
#contentMain #plugins form.customForm select,
#contentMain #plugins form.customForm input,
#contentMain #plugins form.customForm textarea {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border: 1px solid #999;
}
#contentMain #plugins form.customForm select,
#contentMain #plugins form.customForm input {
	max-width: 230px;
}
#contentMain #plugins form input,
#contentMain #plugins form textarea { padding: 2px; }  

#contentMain form fieldset input[type='checkbox'] { vertical-align: middle; }
#contentMain input[type='number'] { width: 50px; }

#contentMain #plugins .usageCode { margin-top: 1em; margin-left: 1em; text-align: left; word-wrap: break-word; }
#contentMain #plugins .usageCode code { font-size: 1.2em; color: #4d4d4d; word-wrap: break-word; }

#contentMain #plugins .example #datepickerForm { margin-bottom: 2em; }

#contentMain #plugins .example .gallery ul { position: relative; padding: 0; margin: 0; }
#contentMain #plugins .example .gallery ul li { display: block; float: left; margin: 20px; padding: 0; background: none; }
#contentMain #plugins .gallery li a img {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
#contentMain #plugins .gallery li:nth-child(2) a img {
	-webkit-transform: rotate(-1deg);
  	-moz-transform: rotate(-1deg);
  	-o-transform: rotate(-1deg);
}
#contentMain #plugins .gallery li:nth-child(1) a img {
	-webkit-transform: rotate(2deg);
 	-moz-transform: rotate(2deg);
  	-o-transform: rotate(2deg);
}
#contentMain #plugins .gallery li:nth-child(3) a img {
	-webkit-transform: rotate(-2deg);
  	-moz-transform: rotate(-2deg);
  	-o-transform: rotate(-2deg);
}
#contentMain #plugins .gallery li:nth-child(3) { position: absolute; left: 0; top: 112px; margin: 0; }

#contentMain #plugins form .collapsible { display: block; color: #AC2115; position: relative; padding-left: 15px; }
#contentMain #plugins form .collapsible strong { cursor: pointer; }
#contentMain #plugins form .collapsible:before { content: "+"; display: block; position: absolute; top: 3px; left: 0; width: 11px; height: 12px; color: #FFF; background-color: #AC2115; line-height: 11px; text-indent: 1px; }
#contentMain #plugins form .collapsible.open { color: #4d4d4d; }
#contentMain #plugins form .collapsible.open:before { content: "-"; display: block; position: absolute; top: 3px; left: 0; width: 11px; height: 12px; color: #FFF; background-color: #AC2115; line-height: 11px; text-indent: 3px; }
#contentMain #plugins form .collapsible+ul { display: none; }
#contentMain #plugins form .collapsible.open+ul { display: block; }
#contentMain #plugins form p.comment { color: #666; font-style: italic; }


/* Personalització de les regles CSS textuals dels plugins */
#cboxTitle { font-size: 1.2em; }
.ui-datepicker table { font-size: 0.9em; }


#loadingOverlay { z-index: 100; background-color: rgba(255, 255, 255, 0.7); position: fixed; width: 100%; height: 100%; top :0; left: 0; }
.processing { position: relative; z-index: 40; font-size: 1.2em; width: 310px; min-height: 70px; margin: 20% auto 0; padding: 8px 15px 0 15px; background-color: #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #AC2115; -moz-box-shadow: 1px 2px 8px #DFACA7; -webkit-box-shadow: 1px 2px 8px #DFACA7; box-shadow: 1px 2px 8px #DFACA7; }
.processing p { background: transparent  url("imgs/selector/blades.gif") no-repeat 25px 20px; margin-bottom: 1em; padding: 25px 50px 5px 90px; vertical-align: top; color: #AC2115; font-size: 1.1em; font-weight: bold; }

/*#overlayFramework { z-index: 20; background-color: rgba(0, 0, 0, 0.3); position: fixed; width: 100%; height: 100%; top :0; left: 0; }*/
#overlayFramework { z-index: 20; background-color: rgba(255, 255, 255, 0.9); position: fixed; width: 100%; height: 100%; top :0; left: 0; text-align: center; }
.modalFramework { position: relative; z-index: 40; font-size: 1.2em; width: 70%; min-height: 20%; max-height: 42%; margin: 2% auto 2%; padding: 2.5em 1em 1em;  background-color: #FFF; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #AC2115; -moz-box-shadow: 1px 2px 8px #DFACA7; -webkit-box-shadow: 1px 2px 8px #DFACA7; box-shadow: 1px 2px 8px #DFACA7; overflow: auto; text-align: left; }
.modalFramework > .title { position: fixed; background-color: #FFF; padding-top: 6px; margin-top: -2.5em; width: 69%; display: block; padding-bottom: .3em; border-bottom: 1px dotted #4d4d4d; margin-bottom: .3em; color: #660303; }
#jsContent.modalFramework,
#cssContent.modalFramework { display: inline-block; vertical-align: top; width: 33%; margin-right: 2%; margin-bottom: 0; }
#cssContent.modalFramework { margin-right: 0; }
#jsContent.modalFramework > .title,
#cssContent.modalFramework > .title { width: 32%; }