1<#-- 

2Web content templates are used to lay out the fields defined in a web 

3content structure. 

4 

5Please use the left panel to quickly add commonly used variables. 

6Autocomplete is also available and can be invoked by typing "${". 

7--><style type="text/css">* { 

8  box-sizing: border-box; 

9} 

10 

11/* Create two equal columns that floats next to each other */ 

12.column1 { 

13  float: left; 

14  width: 25%; 

15  padding: 10px; 

16  height: 300px; /* Should be removed. Only for demonstration */ 

17} 

18/* Create two equal columns that floats next to each other */ 

19.column2 { 

20  float: left; 

21  width: 75%; 

22  padding: 10px; 

23  /* height: 300px; Should be removed. Only for demonstration */ 

24}	 

25 

26/* Clear floats after the columns */ 

27.row:after { 

28  content: ""; 

29  display: table; 

30  clear: both; 

31} 

32.row {font-family: helvetica; width: 100%;  margin: 0 auto/*; overflow: hidden*/}	 

33	 

34/* Para contenido*/ 

35/*a{text-decoration: none}*/ 

36/* enlaces */ 

37#faq-links div { 

38    text-decoration: none; 

39    background-image: linear-gradient(currentColor, currentColor); 

40    background-position: 0% 100%; 

41    background-repeat: no-repeat; 

42    background-size: 0% 2px; 

43    transition: background-size .3s; 

44    /*display: initial;*/ 

45    /*background: #5980b0;*/ 

46    /*padding: 4px 8px; 

47    border-radius: 10px;*/ 

48    color: #c32432; 

49    font-weight: bold; 

50} 

51 

52#faq-links div:hover, div:focus { 

53    background-size: 100% 2px; 

54	color: #32639e; 

55}	 

56	 

57	 

58	 

59	 

60 

61#faq-links {padding: 0px 20px 10px} 

62 

63#faq-links div { 

64 

65    color: #3f6da4; 

66 

67    cursor: pointer; 

68    font-weight: 700; 

69    text-transform: capitalize; 

70    margin: 18px 0 

71} 

72 

73.faq-group { 

74    padding: 0 20px 40px 20px; 

75    position: relative 

76} 

77 

78.faq-group div { 

79    font-weight: 700; 

80    text-align: center; 

81	color: #32639e; 

82} 

83 

84.faq-group hr { 

85        border: 0; 

86    border-top: 1px solid #32639e; 

87    clear: both; 

88    -moz-box-sizing: content-box; 

89    -webkit-box-sizing: content-box; 

90            box-sizing: content-box; 

91    height: 0; 

92} 

93 

94.faq-group:after { 

95    top: 33%; 

96	 left: 50%; 

97	border: solid transparent; 

98	content: " "; 

99	height: 0; 

100	width: 0; 

101	position: absolute; 

102	pointer-events: none; 

103	border-top-color: #32639e; 

104	border-width: 15px; 

105  margin-left: -15px 

106} 

107 

108.faq-accordion>li  { 

109    border-top: 1px solid rgba(198, 198, 198, 0.4); 

110    color: #2e5c93; 

111    padding: 1.125em 0 

112} 

113 

114.faq-accordion li a { 

115    color: #2e5c93; 

116    padding: 1.125em; 

117} 

118 

119.faq-accordion > li:last-child { 

120    border-bottom: 1px solid rgba(198, 198, 198, 0.4); 

121} 

122 

123.faq-accordion > li > a:before { 

124    content: 'Q.'; 

125    padding-right: 0.313em 

126} 

127 

128.faq-accordion > li > a:after { 

129    color: #c24348; 

130    content: '+'; 

131    float: right; 

132    font-weight:300; 

133    margin-right: 1.25em; 

134    -webkit-transform: scale(2); 

135    -ms-transform: scale(2); 

136            transform: scale(2); 

137    overflow-y: hidden; 

138} 

139 

140.faq-accordion > li > a.expanded:after { 

141    color:  #c24348; 

142    content: '\2212'; 

143    -webkit-transform: scale(2); 

144    -ms-transform: scale(2); 

145            transform: scale(2); 

146} 

147 

148.faq-accordion > li > a.expanded {font-weight: 700; opacity: 1 !important} 

149 

150.faq-content { 

151    background-color: #eff4fa; 

152    margin: 20px 0 -20px; 

153} 

154 

155.faq-content p:before { 

156    content: 'A.'; 

157    color: #c24348; 

158    float: left; 

159    font-weight: 700; 

160  margin-right: .5em 

161} 

162 

163.faq-content p { 

164    margin: 0 1.2em; 

165    padding: 1.250em 0 

166 

167} 

168 

169.faq-hide {display: none} 

170 

171.faq-selected { 

172    color: #c32432!important; 

173 -webkit-transition: all 1s ease; 

174         transition: all 1s ease; 

175} 

176 

177	 

178	 

179	hr { 

180    margin-top: 6px; 

181    margin-bottom: 20px; 

182    border: 0; 

183    border-top: 1px solid #32639e; 

184} 

185 

186.slide-left{ 

187 color: #32639e; 

188	text-align: justify; 

189	-webkit-animation-name: slide-left;	 

190  -moz-animation-name: slide-left;	 

191  	animation-name: slide-left; 

192 

193	 

194	-webkit-animation-duration: 1s; 

195  -moz-animation-duration: 1s; 

196  animation-duration: 1s;	 

197 

198		 

199	-webkit-animation-timing-function: ease-in-out;	 

200  -moz-animation-timing-function: ease-in-out; 

201  animation-timing-function: ease-in-out; 

202 

203} 

204 

205.subtit-umsa{ 

206    font-weight: bold; 

207    font-size: 15px; 

208    color:#bb2026; 

209	padding-bottom: 5px; 

210	padding-top: 5px; 

211} 

212 

213@-webkit-keyframes slide-left { 

214	0% { 

215		-webkit-transform: translateX(150%); 

216	} 

217	50%{ 

218		-webkit-transform: translateX(-8%); 

219	} 

220	65%{ 

221		-webkit-transform: translateX(4%); 

222	} 

223	80%{ 

224 

225 

226		-webkit-transform: translateX(-4%); 

227	} 

228	95%{ 

229		-webkit-transform: translateX(2%); 

230	}			 

231	100% { 

232		-webkit-transform: translateX(0%); 

233	} 

234} 

235 

236@-moz-keyframes slide-left { 

237	0% { 

238		-webkit-transform: translateX(150%); 

239    -moz-transform: translateX(150%); 

240		        transform: translateX(150%); 

241	} 

242	50%{ 

243		-webkit-transform: translateX(-8%); 

244    -moz-transform: translateX(-8%); 

245		        transform: translateX(-8%); 

246	} 

247	65%{ 

248		-webkit-transform: translateX(4%); 

249    -moz-transform: translateX(4%); 

250		        transform: translateX(4%); 

251	} 

252	80%{ 

253		-webkit-transform: translateX(-4%); 

254    -moz-transform: translateX(-4%); 

255		        transform: translateX(-4%); 

256	} 

257	95%{ 

258		-webkit-transform: translateX(2%); 

259    -moz-transform: translateX(2%); 

260		        transform: translateX(2%); 

261	}			 

262	100% { 

263		-webkit-transform: translateX(0%); 

264    -moz-transform: translateX(0%); 

265		        transform: translateX(0%); 

266	} 

267} 

268@keyframes slide-left { 

269	0% { 

270		-webkit-transform: translateX(150%); 

271    -moz-transform: translateX(150%); 

272		        transform: translateX(150%); 

273	} 

274	50%{ 

275		-webkit-transform: translateX(-8%); 

276    -moz-transform: translateX(-8%); 

277		        transform: translateX(-8%); 

278	} 

279	65%{ 

280		-webkit-transform: translateX(4%); 

281    -moz-transform: translateX(4%); 

282		        transform: translateX(4%); 

283	} 

284	80%{ 

285		-webkit-transform: translateX(-4%); 

286    -moz-transform: translateX(-4%); 

287		        transform: translateX(-4%); 

288	} 

289	95%{ 

290		-webkit-transform: translateX(2%); 

291    -moz-transform: translateX(2%); 

292		        transform: translateX(2%); 

293	}			 

294	100% { 

295		-webkit-transform: translateX(0%); 

296    -moz-transform: translateX(0%); 

297		        transform: translateX(0%); 

298	} 

299}	 

300	 

301	 

302	 

303/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ 

304@media screen and (max-width: 600px) { 

305  .column1, .column2 { 

306    width: 100%; 

307  } 

308 

309  .column1 { 

310    height: auto; 

311  } 

312} 

313</style> 

314 

315<#assign count = 0> 

316<div class="row"> 

317	<div class="column1"> 

318		<div style="padding: 0px 20px;color: #c24348;font-weight: bold; font-weight: 700;">${TitMenu.getData()}</div> 

319		<hr /> 

320		<div id="faq-links">  

321 

322        <#if TitOpc.getSiblings()?has_content> 

323            <#list TitOpc.getSiblings() as cur_TitOpc> 

324                 

325                <#if count == 0> 

326                    <div class="faq-selected" id="unidad${count}">${cur_TitOpc.getData()}</div> 

327                <#else> 

328                    <div id="unidad${count}">${cur_TitOpc.getData()}</div> 

329                </#if> 

330 

331                 

332                <#assign count = count + 1> 

333 

334                 

335			     

336            </#list> 

337        </#if> 

338			 

339 

340 

341		</div> 

342	</div> 

343    <#assign count = 0> 

344	 

345    <div class="column2"> 

346      <#if TitOpc.getSiblings()?has_content> 

347             

348 

349                 

350        <#list TitOpc.getSiblings() as cur_TitOpc>  

351            <#if count == 0> 

352            <div class="about-unidad${count}" id="faq-wrapper"> 

353             <#else> 

354            <div class="about-unidad${count} faq-hide"> 

355            </#if>   

356                        <div class="faq-group"> 

357                            <div class="slide-left"> 

358                                <div>${cur_TitOpc.getData()}</div> 

359                            </div> 

360                            <hr /> 

361                        </div> 

362                        <!--faq-group--> 

363                        <div class="slide-left"> 

364                            <div class="faq"> 

365                                ${cur_TitOpc.getChild('Descripcion').getData()} 

366                            </div> 

367                        </div> 

368                        <#assign count = count + 1> 

369            </div>                  

370        </#list> 

371                 

372            

373 

374      </#if> 

375 

376 

377	</div> 

378</div> 

379 

380 

381<script> 

382/*<p>Pagination part? borrowed from <a href='/JoshBlackwood/'>Joshua Blackwood</a>'s Pen <a href='/JoshBlackwood/pen/yoLBJ/'>yoLBJ</a>.</p>*/ 

383 

384var accordWithPage =  function() { 

385 

386 var faqDiv = $('#faq-links div'); 

387 

388 

389$(function () { 

390 

391faqDiv.on("click", function() { 

392 

393  var hideSec = 'faq-hide'; 

394      var $this = $(this), 

395      $id = $this.attr('id'), 

396      $class = '.' + $('.about-' + $id).attr('class').replace(hideSec, ''); 

397 

398  $('#faq-wrapper').addClass(hideSec); 

399  $('.about-' + $id).removeClass(hideSec); 

400  $('div[class*=about]').not($class).addClass(hideSec); 

401 

402 }); 

403 

404}); 

405 

406$(function () { 

407 

408        var select = 'faq-selected'; 

409 

410        faqDiv.click(function () { 

411 

412        if ($(this).hasClass(select)) { 

413            $(this).removeClass(select); 

414        } else { 

415            $('#faq-links .faq-selected').removeClass(select); 

416            $(this).addClass(select); 

417        } 

418    }); //faq link selected 

419}); 

420 

421 

422 

423//Accordion 

424 

425$(function () { 

426 

427  var expand = 'expanded'; 

428  var content = $('.faq-content'); 

429        //FAQ Accordion 

430        $('.faq-accordion > li > a').click(function (e) { 

431        		e.preventDefault(); 

432        if ($(this).hasClass(expand)) { 

433            $(this).removeClass(expand); 

434//          $('.faq-accordion > li > a > div').not(this).css('opacity', '1');//returns li back to normal state 

435            $(this).parent().children('ul').stop(true, true).slideUp(); 

436        } else { 

437//            $('.faq-accordion > li > a > div').not(this).css('opacity', '0.5');//dims inactive li 

438            $('.faq-accordion > li > a.expanded').removeClass(expand); 

439            $(this).addClass(expand); 

440            content.filter(":visible").slideUp(); 

441            $(this).parent().children('ul').stop(true, true).slideDown(); 

442        } 

443    }); //accordion function 

444 

445    content.hide(); 

446 

447}); 

448 

449} 

450 

451accordWithPage(); 

452 

453/*$(function () { 

454   $("#faq-links div").click(function () { 

455    $('.slide-left').fadeOut( "slow", "linear" ); 

456     $('.slide-left').fadeIn( "slow", "linear" ); 

457    }); //faq link fade in and out 

458  }); //document ready*/ 

459</script>