thank you for the reply
I have used the following mpdf pdf generator.
this is the code of javascript on onclik for link to export pdf
<script type="text/javascript">
function download_pdf()
{
$('#user_note_area').css('width',680);
$('form input').remove();
var total_content = $('#user_note_area section').length+1;
var content = '';
var content_height = 0;
var max_height = 850;
var index = 0;
content_height += $('.logo').outerHeight();
content_height += $('#report_detail').outerHeight();
content += '<section class="content-box" style="margin-top: 10px;">'+ $('#report_detail').html() + '</section>';
for(c=1; c<= total_content; c++)
{
//alert('child num'+i+' = '+ $('#user_note_area section:nth-child('+i+')').outerHeight());
content_height += $('#user_note_area section:nth-child('+c+')').outerHeight();
var next_content_height = $('#user_note_area section:nth-child('+(c+1)+')').outerHeight();
if(content_height + next_content_height > max_height || c == total_content)
{
$('form').append('<input type="hidden" name="content'+ index +'" value="">');
$('form input:eq('+ index +')').val(content);
index++;
content_height = 0;
content = '';
}
if($('#user_note_area section:nth-child('+c+')').hasClass('edition-year'))
{
content += '<section class="edition-year">'+ $('#user_note_area section:nth-child('+c+')').html() + '</section>';
}
else if($('#user_note_area section:nth-child('+c+')').hasClass('content-box'))
{
content += '<section class="content-box">'+ $('#user_note_area section:nth-child('+c+')').html() + '</section>';
}
else
{
content += '<section>'+ $('#user_note_area section:nth-child('+c+')').html() + '</section>';
}
}
$('#user_note_area').css('width','');
$('form').submit();
}
</script>
<form method=“post” action="<?php echo Yii::app()->getBaseUrl().’/site/download_note’; ?>">
</form>
this is the code in controller
require_once(Yii::app()->basePath . '/extensions/pdf_generator/mpdf.php');
$mpdf = new mPDF('c', 'A4');
// LOAD a stylesheet
$stylesheet = file_get_contents(Yii::app()->basePath . '/extensions/pdf_generator/print_note.css');
//$stylesheet = file_get_contents('css/theme/css.css');
$mpdf->WriteHTML($stylesheet, 1);
//$mpdf->SetHeader('Document Title');
//$mpdf->setFooter(date("Y-m-d").'|NFPA 101 Code Compare|{PAGENO}');
$current_user = Setting::model()->findByAttributes(array('user_id' => Yii::app()->user->id));
$footer_note = 'User note report from 101 Quick Compare Page {PAGENO} printed on ' . date("m/d/Y") . ' for (' . $current_user->username . '). View disclaimer information at www.nfpa.org';
$mpdf->setFooter($footer_note);
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML('<img src="' . Yii::app()->request->baseUrl . '/images/theme/logo1.png">');
$total_page = count($_POST);
$i = 1;
foreach ($_POST as $page_content)
{
$mpdf->WriteHTML($page_content);
$i++;
if ($i <= $total_page)
{
$mpdf->AddPage();
}
}
//$mpdf->Output();
// $mpdf->Output('My_101codecompare_notes.pdf','F'); //save file in server
$mpdf->Output('My_101codecompare_notes.pdf', 'I');
exit;
as well as i have used the following css
@charset "utf-8";
/* CSS Document */
/* ------------------------ Reset ------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------ Html tags ------------------------*/
html {-webkit-text-size-adjust: none;}
body{
margin:0;
padding:0;
background:#FFF;
color:#303030;
font:normal 12px/20px Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bold;
color:#303030;
}
h1{font-size:22px;}
h2{font-size:20px; color:#FFF;}
h3{font-size:16px;}
h4{font-size:15px;}
h5{font-size:13px;}
p{
color:#303030;
font:normal 12px/18px Arial, Helvetica, sans-serif;
}
em{font-weight:bold}
a{
font-family:Arial, Helvetica, sans-serif;
color:#303030;
text-decoration:none;
outline:none
}
a:hover{text-decoration:none;}
sup {
vertical-align: super;
font-size: smaller; }
input{outline:none !important}
input[type=‘text’],input[type=‘password’],textarea{
background:#FFF;
box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
-o-box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
padding:0 5px;
border:1px solid #a9a9a9;
height:30px;
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
font:normal 12px Arial, Helvetica, sans-serif;
}
textarea{}
textarea#email {
height: 150px;
width: 100%;
}
/* ------------------------ Alignment & Clear ------------------------*/
.fleft{float:left}
.fright{float:right}
.fnone{float:none !important}
.clrleft{clear:left}
.clrright{clear:right}
.clrboth{clear:both}
.last{margin-right:0 !important}
.underline{text-decoration: underline}
.mr-20{margin-right:10px !important}
.mb-20{margin-bottom:20px !important}
/* ------------------------ Aside Edition ------------------------*/
.margin-right-one{margin-right:10px;}
.margin-right-two{margin-right:20px;}
.margin-bottom-one{margin-bottom:10px !important;}
.margin-bottom-two{margin-bottom:20px}
.margin-top-one{margin-top:10px ;}
.margin-left-one{margin-left:70px;}
.heading-red{color:red; margin-bottom:10px;}
.height-one{min-height:60px;}
.height-two{height:60px !important;}
.border-style-one{border-top:2px solid #000; overflow:hidden}
.underline{text-decoration: underline}
.width-one{width:75px;}
.text-black{color:#303030; margin-bottom:10px}
/* ------------------------ Pagewrap ------------------------*/
.page_wrap{
max-width:100%;
padding:0 2%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
margin:0 auto;
position:relative;
overflow:hidden
}
/* ------------------------ Top Header ------------------------*/
.head_top{
background:#1d1d1d;
height:40px;
}
.head_top h2{color:#FFF}
/* ------------------------ Left Tool and Right Tool ------------------------*/
ul.left_tool, ul.right_tool{
margin:0;
padding:0;
list-style:none
}
ul.left_tool li, ul.right_tool li{
float:left;
display:inline-block;
padding:6px;
margin-right:10px;
}
ul.left_tool li:last-child, ul.right_tool li:last-child{margin-right:0; padding-top:10px}
ul.left_tool li a span, ul.right_tool li a span{
background:url(../../images/theme/sprites.png) no-repeat;
width:30px;
height:30px;
display:inline-block;
text-indent:-999999px;
}
ul.left_tool li a span.home{
background-position: 0 0;
float: left;
margin-top: -4px !important}
ul.left_tool li a span.home:hover{background-position:0 -30px}
ul.left_tool li a span.back{background-position:-90px 0; width:52px;}
ul.left_tool li a span.back:hover{background-position:-90px -30px}
ul.right_tool li a span.setting{background-position:-30px 0}
ul.right_tool li a span.setting:hover{background-position:-30px -30px}
ul.right_tool li a span.help{background-position:-60px 0}
ul.right_tool li a span.help:hover{background-position:-60px -30px}
ul.right_tool li a.notification{
background: #ffffff;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );*/
box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-o-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
border:1px solid #a9a9a9;
width:24px;
height: 24px;
display:block;
margin-top:3px;
border-radius:50% 50% 50% 50%;
-moz-border-radius:50% 50% 50% 50%;
-o-border-radius:50% 50% 50% 50%;
-webkit-border-radius:50% 50% 50% 50%;
text-align:center;
font-size:14px;
margin-top:2px;
font-weight:bold;
color:#000;
text-shadow:1px 1px 0 #FFF;
}
/* ------------------------ Logo Banner ------------------------*/
a.logo{
background:url(../../images/theme/logo-bg.jpg) repeat-x;
height:81px;margin: 20px auto;width: 100%; display:block
}
a.logo img{
/*background:url(../../images/theme/logo1.png) no-repeat;*/
overflow: hidden;
text-indent: -99999px;
}
/* ------------------------ Buttons styles ------------------------*/
.control_button, a.control_button, .show-hide, .blackbtn{
background: #45494d;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzQ1NDk0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #45494d 1%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#45494d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45494d 1%,#000000 100%);
background: -o-linear-gradient(top, #45494d 1%,#000000 100%);
background-image: -ms-linear-gradient(top, #45494d 1%,#000000 100%);
background: linear-gradient(to bottom, #45494d 1%,#000000 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45494d', endColorstr='#000000',GradientType=0 );*/
color:#FFF;
border:1px solid #000;
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
padding:5px 8px;
font-weight:bold;
overflow:hidden
/*margin-right:5px;*/
}
.control_button a{color:#FFF}
.control_button a:hover{color:#303030 !important}
.blackbtn:hover .control_button:hover, section.search_bar a.search:hover, ul.show-hide li:hover a, #advanced_search_btn:hover, .control_button:hover {
background: #ffffff;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 1%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#e6e6e6));
background: -webkit-linear-gradient(top, #ffffff 1%,#e6e6e6 100%);
background: -o-linear-gradient(top, #ffffff 1%,#e6e6e6 100%);
background: -ms-linear-gradient(top, #ffffff 1%,#e6e6e6 100%);
background: linear-gradient(to bottom, #ffffff 1%,#e6e6e6 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );*/
box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-o-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.78);
border:1px solid #a9a9a9;
color:#000
}
#advanced_search_btn:hover{text-decoration:none !important}
a.control_button span.plus{
border-left:1px solid #000;
font:bold 19px "Arial Black", Gadget, sans-serif;
color:#FFF;
padding-left:8px;
margin-left:5px;
position:relative;
top:3px;
}
a.control_button:hover span.plus{
color:#000;
border-left: 1px solid #CCC
}
ul.show-hide{
float:right;
width:100px;
height:30px;
padding:0 !important
}
ul.show-hide li a{
color:#FFF;
width:50px;
margin:0 !important;
float:left;
text-align:center
}
ul.show-hide li:hover a{border:none !important;}
.conrtoller_right{float:right; width:100px;}
/* ------------------------ Aside Edition ------------------------*/
aside.edition{
float:left;
width:250px;
height:auto;
margin-top:27px;
}
/* ------------------------ Article Details ------------------------*/
article.details{width:690px; margin-bottom:20px}
/* ------------------------ Search Bar ------------------------*/
section.search_bar{
float:left;
width:275px;
margin-top:25px;
margin-bottom:20px;
}
section.search_bar input.search{
background: url(../../images/theme/sprites.png) no-repeat -143px -4px;
display:block;
width:30px;
height:25px;
text-indent:-999999px;
color:#FFF;
border:1px solid #000;
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-o-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
cursor:pointer;
float:left
}
section.search_bar input.search{
background-color: #45494d;
}
section.search_bar a.search span.search_icon:hover{background:url(../images/sprites.png) no-repeat -143px -30px; }
section.search_bar input[type="text"]{
height:25px;
border:1px solid #c7c7c7;
padding-left:5px;
width:235px;
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-o-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
}
/* ------------------------ Select Drop Down ------------------------*/
.filter.fright {width: 40%;}
.filter h4{text-align:center; margin-bottom:5px;}
.sbHolder, .sbOptions{
background-color: #FFF;
border:1px solid #c7c7c7;
outline:none;
height: 25px;
position: relative;
width: 355px;
font:bold 12px/25px Arial, Helvetica, sans-serif;
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
-o-box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.18);
}
.sbHolder:focus .sbSelector{}
.sbSelector{
display: block;
height: 25px;
left: 0;
outline: none;
overflow: hidden;
position: absolute;
text-indent: 10px;
top: 0;
width: 310px;
}
.sbSelector:link, .sbSelector:visited, .sbSelector:hover{
color:rbga(0,0,0,0.5);
outline: none;
text-decoration: none;
}
.sbToggle{
background: url(../../images/theme/sprites.png) -172px 0 no-repeat;
display: block;
height: 30px;
outline: none;
position: absolute;
right: 0;
top: -4px;
width: 30px;
}
.sbToggle:hover{
background: url(../../images/theme/sprites.png) -203px 0 no-repeat;
}
.sbToggleOpen{
background: url(../../images/theme/sprites.png) -172px -30px no-repeat;
}
.sbToggleOpen:hover{
background:url(../images/sprites.png) -203px -30px no-repeat;
}
.sbHolderDisabled{
background-color: #3C3C3C;
border: solid 1px #515151;
}
.sbHolderDisabled .sbHolder{}
.sbHolderDisabled .sbToggle{}
.sbOptions{
height:auto !important;
list-style: none;
left: -1px;
margin: 0;
padding: 0;
position: absolute !important;
top: 30px;
width: 200px;
z-index: 1;
overflow-y: auto;
overflow-x:none;
width:355px;
overflow:hidden
}
.sbOptions li{
text-indent:5px;
border-bottom: 1px solid #EEE;
border-top: 1px solid #CCC;
}
.sbOptions a.sbFocus{
background: #45494d;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDk0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #45494d 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45494d), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #45494d 0%,#000000 100%);
background: -o-linear-gradient(top, #45494d 0%,#000000 100%);
background: -ms-linear-gradient(top, #45494d 0%,#000000 100%);
background: linear-gradient(to bottom, #45494d 0%,#000000 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45494d', endColorstr='#000000',GradientType=0 );*/
color:#FFF;
width:100%;
}
.sbOptions li:first-child{border-top:none}
.sbOptions li:last-child{border-bottom:none}
.sbOptions a{
display: block;
outline: none;
padding: 1px 3px;
}
.sbOptions a:link, .sbOptions a:visited{ text-decoration: none;}
.sbOptions a:hover,
.sbOptions a:focus,
.sbOptions li.last a{
border-bottom: none;
}
.sbOptions .sbDisabled{
border-bottom: dotted 1px #515151;
color: #999;
display: block;
padding: 7px 0 7px 3px;
}
.sbOptions .sbGroup{
border-bottom: dotted 1px #515151;
color: #EBB52D;
display: block;
font-weight: bold;
padding: 7px 0 7px 3px;
}
.sbOptions .sbSub{
padding-left: 17px;
}
/* ------------------------ Content Box ------------------------*/
.content-box{
width:100%;
padding:5px 10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1px solid #a9a9a9;
margin-bottom:10px;
overflow:hidden
}
.content-box p{margin-bottom:10px;}
.content-box p:last-child {margin-bottom: 0}
.content-box a{font-weight:bold; margin-right:20px; cursor:pointer}
.content-box a:hover{color:#09C; text-decoration:underline}
.content-box a.link-blue{color:#09C; text-decoration:underline; margin-right:0}
.content-box a.link-blue:hover{text-decoration:none}
/* ------------------------ Edition year ------------------------*/
ul.edition-year{clear:both}
ul.edition-year li:last-child{margin-right:0}
.edition-year p{margin-bottom:10px; text-align: start;}
.edition-year h1{margin-bottom:5px; text-align:center;}
.edition-year h5{margin-bottom:5px;}
.green, .gray{
overflow-y:auto;
border:1px solid #a9a9a9;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.green_print, .gray_print{
border:1px solid #a9a9a9;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
width: 400px;
}
.edition-year tr { width: 100%;}
.green, .green_print{background:#deffda;}
.gray, .gray_print{background:#eeeeee;}
.red{background:#fef2e7; margin-bottom:10px;}
.marginCustom{margin-bottom: 14px; margin-top: -15px;}
/* ------------------------ Edition year ------------------------*/
.browse{position:relative; top:29px}
#tabs{
overflow: hidden;
margin:24px 0 0 0;
padding: 0;
list-style: none;
float:right;
width:33%;
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmU2ZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6));
background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%);
background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e6e6',GradientType=0 );*/
border:1px solid #a9a9a9;
border-radius:5px 5px 0 0
}
#tabs li a{
float: right;
margin:0;
width:50%;
text-align:center;
position: relative;
text-align:center;
text-decoration: none;
font-size:15px;
color: #303030;
font-weight:bold !important;
text-shadow: 0 1px 0 rgba(255,255,255,.<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />;
}
#tabs li a:hover, #tabs #current a{
background: #357030;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM1NzAzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzODc1MzMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #357030 0%, #387533 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#357030), color-stop(100%,#387533));
background: -webkit-linear-gradient(top, #357030 0%,#387533 100%);
background: -o-linear-gradient(top, #357030 0%,#387533 100%);
background: -ms-linear-gradient(top, #357030 0%,#387533 100%);
background: linear-gradient(to bottom, #357030 0%,#387533 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#357030', endColorstr='#387533',GradientType=0 );*/
color:#FFF}
#tabs a:focus{outline: 0;}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
width: 1em;
}
#tabs #current a::after{z-index: 3;}
#content{
background: #fff;
height: auto;
position: relative;
z-index: 2;
border:1px solid #a9a9a9;
clear:both
}
.treeview, .treeview ul {
padding: 0;
margin: 0;
list-style: none;
}
.treeview ul { background: #a7a9ac; color:#000;}
.treeview li {
margin: 0;
padding: 0 10px;
}
.treeview a.selected {background-color: #eee;}
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { cursor: pointer; }
.filetree li { padding:0; font-size:11px;}
.filetree span.folder, .filetree span.file, .filetree span.file_1, .filetree .root span.chapter, .filetree li.folder span, .filetree li.file span { padding: 0 10px; display: block; }
.filetree span.folder/*, .filetree span.file */, #tab1 a, #tab2 a, .filetree .root span.chapter{
border-bottom:1px solid #FFF;
background: #4c9e45;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRjOWU0NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0YzllNDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4c9e45 0%, #4c9e45 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c9e45), color-stop(100%,#4c9e45));
background: -webkit-linear-gradient(top, #4c9e45 0%,#4c9e45 100%);
background: -o-linear-gradient(top, #4c9e45 0%,#4c9e45 100%);
background: -ms-linear-gradient(top, #4c9e45 0%,#4c9e45 100%);
background: linear-gradient(to bottom, #4c9e45 0%,#4c9e45 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c9e45', endColorstr='#4c9e45',GradientType=0 );*/
color: #FFFFFF;
height: 30px;
font:bold 12px/30px Arial, Helvetica, sans-serif;
cursor:pointer
}
.filetree span.folder:hover, .filetree span.file:hover, .filetree span.file_1:hover, .filetree span.file_2:hover, .active, .treeview .hover, .filetree .root span.chapter:hover, .filetree li.folder span:hover, .filetree li.file span:hover{
background: #a9db80;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZGI4MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5NmM1NmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f));
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );*/
color:#000
}
#tab1 a, #tab2 a{padding:0 10px; display:block}
.filetree li.expandable span.folder { border-bottom:1px solid #FFF}
.filetree span.file {
color: #000;
font-size:11px !important;
font-weight:bold;
cursor:pointer
}
li.folder span{
display:block;
font:bold 11px/30px Arial, Helvetica, sans-serif !important;
color:#000;
cursor:pointer
}
li.file span{
display:block;
font:11px/30px Arial, Helvetica, sans-serif !important;
color:#000;
cursor:pointer
}
.file_1{font-size:11px !important}
.filetree span.file_2{
display:block;
font:bold 11px/30px Arial, Helvetica, sans-serif;
cursor:pointer
}
.file_2 a{padding-left:10px;}
.file_2 a:hover {
background: #a9db80;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZGI4MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5NmM1NmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #a9db80 0%, #96c56f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9db80), color-stop(100%,#96c56f));
background: -webkit-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: -o-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: -ms-linear-gradient(top, #a9db80 0%,#96c56f 100%);
background: linear-gradient(to bottom, #a9db80 0%,#96c56f 100%);
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=0 );*/
color:#000;
display:block
}
.active {color: #000 !important;}
.file-1{display: block;}
/* ------------------------ Login ------------------------*/
section.login{
width:475px;
margin:0 auto;
}
section.login h2{
color:#303030;
text-align:center
}
section.login h4{text-align: center}
form.login_form{
margin:20px auto;
width:315px;
}
form.login_form h4{text-align:center; margin-bottom:10px;}
form.login_form p, form.user-setting p{margin-bottom:10px; display:block}
form.login_form p a.control_button{color:#FFF; text-decoration:none}
form.login_form p a.control_button:after{margin:0 !important}
form.login_form p a.control_button:hover{color:#000;}
form.login_form p a{
text-decoration:underline;
color:#09C;
margin-right:10px;
font-weight:bold;
}
/*form.login_form p a:after{
content:"|";
margin-left:10px;
color:#000;
text-decoration:none !important;
}
form.login_form p a:last-child:after{content:""}*/
form.login_form p a:hover{color:#000}
form.login_form p label, form.user-setting p label{
float:left;
width:75px;
}
form.login_form p input[type="text"],form.login_form p input[type='password'], form.user-setting p input[type='text'], form.user-setting p input[type='password']{width:72%}
form.user-setting p span{font-style:italic}
form.user-setting p span.theme-1, form.user-setting p span.theme-2, form.user-setting p span.theme-3, form.user-setting p span.theme-4, form.user-setting p span.theme-5{
width:24px;
height:24px;
display:inline-block;
border:2px solid #000;
margin-right:5px;
text-indent:-999999px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-webkit-box-sizing:border-box;
position:relative;
cursor:pointer
}
form.user-setting p span.theme-1{background:#cc0000}
form.user-setting p span.theme-2{background:#ff9900}
form.user-setting p span.theme-3{background:#ffff00}
form.user-setting p span.theme-4{background:#009e0f}
form.user-setting p span.theme-5{background:#2b78e4}
form.user-setting p span strong.arrow{
background:url(../images/arrow.png) no-repeat;
width:12px;
height:9px;
display:block;
position:absolute;
top:16px;
right:0
}
/* ------------------------ Reveal Modal ------------------------*/
.reveal-modal-bg, .reveal-modal-1-bg .reveal-bg{
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.6);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal{
/*top: auto !important; */
left: 9%;
width: 800px;
}
.reveal-modal-1{
width:300px;
top:auto !important;
left: 30% ;
}
.reveal-modal, .reveal-modal-1 {
visibility: hidden;
background: #eee;
margin-left: 0px;
padding: 20px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 0 10px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
position: absolute;
z-index: 101;
border:2px solid #a9a9a9;
}
.reveal-modal .close-reveal-modal {cursor: pointer;}
ul.nfpa_section{margin-bottom:20px;}
ul.nfpa_section li {
display:inline-block;
margin-right:10px;
font-weight:bold;
font-size:12px;
}
ul.nfpa_section li a{color:#09C; text-decoration:underline}
ul.nfpa_section li a.active{color:#303030; text-decoration:none}
ul.nfpa_section li:after{
content:">";
font-weight:bold;
text-decoration:none !important;
color:#303030;
margin-left:10px;
}
ul.nfpa_section li:last-child:after{content:""}
.popup-grid{margin-bottom:20px;}
.popup-grid .content-box {width: 85.5%;}
.popup-grid h3{margin-bottom:10px;}
.conrtoller_right .control_button{float:right}
#section_information div, #section_information h1 {margin-bottom: 10px;}
#LoginForm_username_em_, #LoginForm_password_em_{color: red;
font-size: 11px;
margin-left: 78px;
margin-top: -8px;}
em.font-italic{font-weight:normal; font-style:italic}
span.highlight{border:2px solid #FFFF00;}
span.highlight_important{border:2px solid #FFFF00;}
#example {
}
#example header.tia hgroup h2 {
color: #303030;
}
#example strong, #example aside strong p {
font-weight: bold;
}
#example em {
font-style: italic;
font-weight: normal;
}
#example p {
margin-bottom: 5px;
}
.underline {
text-decoration: underline;
}
.stroke {
text-decoration: line-through;
}
blockquote {
text-indent: 20px;
}
#example footer.tia p {
margin-bottom: 0;
}
.border-right {
border-right: 1px solid #000000;
padding: 5px;
}
.mr-19{margin-right:19px !important;}
.mr-0{margin-right:0 !important}
label.term{
font-size:14px;
font-weight:bold;
margin-right:10px;
}
.content-box input[type=‘text’]{width:300px; margin-right:5px;}
#section_information > h3 {margin-bottom: 10px;}
#section_information {
float: left;
}
.note_des {
margin-bottom: 0 !important;
}
.clrboth.content-box.note {
margin-bottom: 5px;
}
button.export-pdf{
background:url(../../images/theme/pdf_download.png) no-repeat;
width:24px;
height:27px;
display:block;
float:right;
position: relative; top:0px;
border:none;
outline:none;
cursor:pointer;
margin-bottom:5px;
}
@media screen and (min-width:700px) and (max-width:768px){
/*.page_wrap{width:720px;}
article.details{width:455px}
section.search_bar{width:160px;}
section.search_bar input[type="text"]{width:125px;}
.sbHolder, .sbOptions{width:285px;}
.sbOptions li a{font-size:10px}
.sbSelector{font-size:9px; text-indent:5px;}
ul.edition-year li{width:48.9%}
.reveal-modal{
left: 1%;
top: 190px !important;
width: 705px;}
.conrtoller_right{width:90px;}*/
}
@media screen and (min-width:769px) and (max-width:1024px){}
.displayBlock{display: block !important;}
.displayNone{display: none !important;}
.strikeTrough{text-decoration: line-through;}
table.head {
border-collapse: collapse;
border-spacing: 0;
font-size: 18px;
font-weight: bold;
text-align: center;
width: 100%;
}
table.note_created{
width: 100%;
font-size: 12px;
}
table.note_created td.date{
text-align: right;
width: 200px;
}
.loading {
float: left;
height: 50px;
margin-bottom: 5px;
overflow: hidden;
position: relative;
top: 11px;
width: 163px;
}
.loading img {
left: -4px;
position: relative;
top: 10px;
}
strong {
font-weight: bold;
}
.opened
{
display: block;
}
.closed
{
display: none;
}
.edition-year p{
border-collapse: collapse;
border-spacing: 0;
text-align:justify;
}
.edition_desc{
font-size: 12px !important;
width: 50%;
}
.content-box
{
font-size: 12px !important;
}