/* cssframe.css (CSSFrame.com v.2008-11-01); no need to modify; start your style sheet by copying Starter CSS block from the bottom*/

/* reset & set defaults */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,html body .none{
margin:0;padding:0;border:0;
font-weight:inherit; font-style:inherit;font-size:100%; font-family: inherit;
vertical-align:baseline; text-align:left}
blockquote:before,blockquote:after,q:before,q:after{content:""}
caption,th,strong,dt{font-weight:bold}
em,cite{font-style:italic}
ul,ol,li,dd{margin-left:1em}
ol.none,ul.none{list-style:none} /*use .none for blank lists*/
/*todo: see if this can be deleted
ol.none,ul.none,ol.none li,ul.none li,li.none,dl.none dd,dd.none,dl.none{margin:0}
dl.none dt, dt.none{font-weight:inherit}
*/
/*todo: what is this for?*/
option{padding-left:0.4em}
img{display:block} /* for strict mode */
table{ border-collapse:collapse; border-spacing:0}
/*td, th{border:1px solid #aaa}
th,td{margin:0; padding:2px 4px}*/


/* font size x18px */
body{font-size:12px; line-height:1.5}
p,ol,ul{margin-bottom:18px}
h1,h2,h3,h4,h5{font-weight:normal; margin-bottom:.25em;} /*+.25em comes from 1.5 line-height = .5em below baseline*/
div p:last-child{margin-bottom:0} /*valid in CSS 3*/
h1{font-size:30px}
h2{font-size:24px}
h3{font-size:20px}
h4{font-size:16px}
h5{font-size:12px;font-weight:bold;}
ul ul,ul ol,ol ul,ol ol{margin-top:9px; margin-bottom:9px}/*use .none to nullify margins*/
.denser, .denser p{font-size:11px; line-height:14.4px; margin-bottom:14.4px}
.dense, .dense p{font-size:10px; line-height:13.5px; margin-bottom:13.5px}/*4 lines in regular 3*/
.verydense, .verydense p{font-size:9px; line-height:10.8px; margin-bottom:10.8px}/*5 lines in regular 3*/

/* grid: use .col for layout, then .pad for padding*/
body{text-align:center}
.container{text-align:left; margin:0 auto; width:960px} /*feel free to overwrite width with multiple of 40*/
.header, .content, .footer{clear:both; float:left; width:100%; position:relative}
/* use colX for layout only, no paddings or margins */
.col,.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col9,.col10,.col11,.col12,
.col13,.col14,.col15,.col16,.col17,.col18,.col19,.col20,.col21,.col22,.col23,.col24,.half{float:left}
.col, .col1{width:40px}
.col2{width:80px}
.col3{width:120px}
.col4{width:160px}
.col5{width:200px}
.col6{width:240px}
.col7{width:280px}
.col8{width:320px}
.col9{width:360px}
.col10{width:400px}
.col11{width:440px}
.col12{width:480px}
.col13{width:520px}
.col14{width:560px}
.col15{width:600px}/*Use for phi*/
.col16{width:640px}
.col17{width:680px}
.col18{width:720px}
.col19{width:760px}
.col20{width:800px}
.col21{width:840px}
.col22{width:880px}
.col23{width:920px}
.col24{width:960px}
.half{width:50%}/*.half should be inside .colX and have no .colX inside*/

/*START padding modifications*/
/*.pad - a basic padding inside .colX; should have no .colX inside
 please overwrite with your own choice of padding*/
.pad{padding:9px 10px}
.padh{padding:0 10px}
.padv{padding:9px 0}
.padborder, .padvborder, .padhborder{border:1px solid #aaa}
.padborder{padding:8px 9px; border-width:1px}
.padvborder{padding:9px 9px; border-width:0 1px}
.padhborder{padding:8px 10px; border-width:1px 0}

/*to avoid an extra div for .padh, use padded columns, but they should have no .colX inside
if no vertical padding desired, add .padh style
*/
.colp,.col1p,.col2p,.col3p,.col4p,.col5p,.col6p,.col7p,.col8p,.col9p,.col10p,.col11p,
.col12p,.col13p,.col14p,.col15p,.col16p,.col17p,.col18p,.col19p,.col20p,.col21p,
.col22p,.col23p,.col24p{float:left; padding:0 10px}
.colp, .col1p{width:20px}
.col2p{width:60px}
.col3p{width:100px}
.col4p{width:140px}
.col5p{width:180px}
.col6p{width:220px}
.col7p{width:260px}
.col8p{width:300px}
.col9p{width:340px}
.col10p{width:380px}
.col11p{width:420px}
.col12p{width:460px}
.col13p{width:500px}
.col14p{width:540px}
.col15p{width:580px}
.col16p{width:620px}
.col17p{width:660px}
.col18p{width:700px}
.col19p{width:740px}
.col20p{width:780px}
.col21p{width:820px}
.col22p{width:860px}
.col23p{width:900px}
.col24p{width:940px}

/*pad right (to position columns)*/
.padr, .padr1{padding-right:40px}
.padr2{padding-right:80px}
.padr3{padding-right:120px}
.padr4{padding-right:160px}
.padr5{padding-right:200px}
.padr6{padding-right:240px}
.padr7{padding-right:280px}
.padr8{padding-right:320px}
.padr9{padding-right:360px}
.padr10{padding-right:400px}
.padr11{padding-right:440px}
.padr12{padding-right:480px}
.padr13{padding-right:520px}
.padr14{padding-right:560px}
.padr15{padding-right:600px}
.padr16{padding-right:640px}
.padr17{padding-right:680px}
.padr18{padding-right:720px}
.padr19{padding-right:760px}
.padr20{padding-right:800px}
.padr21{padding-right:840px}
.padr22{padding-right:880px}
.padr23{padding-right:920px}
/*END padding modifications*/

/*pad left (to position columns)*/
.padl, .padl1{padding-left:40px}
.padl2{padding-left:80px}
.padl3{padding-left:120px}
.padl4{padding-left:160px}
.padl5{padding-left:200px}
.padl6{padding-left:240px}
.padl7{padding-left:280px}
.padl8{padding-left:320px}
.padl9{padding-left:360px}
.padl10{padding-left:400px}
.padl11{padding-left:440px}
.padl12{padding-left:480px}
.padl13{padding-left:520px}
.padl14{padding-left:560px}
.padl15{padding-left:600px}
.padl16{padding-left:640px}
.padl17{padding-left:680px}
.padl18{padding-left:720px}
.padl19{padding-left:760px}
.padl20{padding-left:800px}
.padl21{padding-left:840px}
.padl22{padding-left:880px}
.padl23{padding-left:920px}


/*forms 
dl-based layout (use fieldset dl): dt - labels, dd - fields - for simplest layouts
&& table based layout (use table.form): th - labels, td - fields - use it for more complicated layouts*/
fieldset{padding:17px 8px; border:1px solid #aaa; margin-bottom:18px} /*in html add .noborder if desired*/
legend{font-size:18px}
* html legend { margin:-18px -8px 16px 0; padding:0}/* Fixes incorrect styling of legend in IE6. */
fieldset dt, fieldset dd{display:block; float:left; margin:0; padding:4px}
table.form{border:none}
table.form th, table.form td {padding:4px}
table.form th {vertical-align:top}
fieldset dt{clear:left; width:30%; text-align:right; overflow:hidden}
table.form th{text-align:right}
fieldset dt, table.form th, .label{font-size:11px; font-weight:bold; color:#333} /*use .label for explicit formatting*/
fieldset dd .label, table.form .label  {margin-left:8px}
fieldset dd{width:65%}
fieldset.vertical dt{text-align:left; padding-bottom:0; width:auto}
fieldset.vertical dd{clear:left; padding-top:0; width:auto}
input[type="text"], input[type="password"], input.normal{width:200px} /*will fit in col6; use .normal for explicit formatting*/
textarea{width:200px; height:72px}
select{width:204px} /*a bit wider*/
input.narrow, textarea.narrow, .narrow textarea{width:86px} /*not ".narrow input"*/
select.narrow, .narrow select{width:90px}
input.wide, textarea.wide, input[type="file"], .wide textarea{width:360px} 
select.wide, .wide select {width:364px}
fieldset label span, fieldset dt span, table.form th span{color:#f00; font-weight:normal} /*To indicate a "Required" field*/
fieldset dl .comment, table.form .comment{display:block; font-style:italic; font-size:10px; line-height:12px; margin-bottom:2px}
fieldset dl .inline{display:inline}
fieldset dt .comment, table.form th .comment{text-align:right}
fieldset.vertical dt .comment{text-align:left}
textarea{font-size:12px}

/*Use .clearfix on parent containers to autoclear floats*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}/*set CSS 2.1 to validate*/
/* Hide from IE-mac \*/* html .clearfix{height:1%}.clearfix{display:block}/* End hide */
.clear {clear:both}
.clearleft{clear:left}
.clearright{clear:right}

/*messageboxes*/
/*padding-top: 8 icon v-padding + (54 icon height - 18 line-height)/2 = 26px  
padding-left: 17 icon h-position + 54 icon width + 18 margin left = 89px*/
.boxsuccess, .boxerror, .boxwarning, .boxinfo, .boxquestion{display:block; border:1px solid; padding:26px 26px 26px 89px; min-width:90px} 
.boxsuccess{color:#075600; background:#E1F7DF url(images/iconSuccess.png) no-repeat 17px 50%; border-color:#C3EEBF}
.boxerror{color:#800000; background:#FFE6E6 url(images/iconError.png) no-repeat 17px 50%; border-color:#FFCCCC}
.boxwarning{color:#4C4C00; background:#FFFFCC url(images/iconWarning.png) no-repeat 17px 50%; border-color:#FAFA64}
.boxinfo{color:#003059; background:#DFECF7 url(images/iconInfo.png) no-repeat 17px 50%; border-color:#C0D9F0}
.boxquestion{background:#EEEEFF url(images/iconQuestion.png) no-repeat 17px 50%; border-color:#CCCCFF}

/*link icons*/
a.external{background:transparent url(images/external.gif) no-repeat right top; padding-right:12px}
a.mail{background:transparent url(images/mail.gif) no-repeat right top; padding-right:17px}
a.pdf{background:transparent url(images/pdf.gif) no-repeat right top; padding-right:15px}
a.msword{background:transparent url(images/msword.gif) no-repeat right top; padding-right:17px}

/*nice table*/
table.nice{border-top:1px solid #999; border-left:1px solid #999}
table.nice th, table.nice td{padding:0.2em 0.6em; border-right:1px solid #999; border-bottom:1px solid #999}
table.nice th{border-bottom: 1px solid #999; padding:1em 0.6em; font-size:1.2em}

/*dl used for simple 2 col list*/
dl.list {float:left}
dl.list dt {font-weight:normal; float:left; clear:both}
dl.list dd {float:right; text-align:right;clear:right} /*clear:right is for IE6*/

/*simple 2 col list*/
table.twocol {width:100%}
table.twocol th {font-weight:normal; text-align:left}
table.twocol td {text-align:right}

/*simple 2 col list*/
table.twocol th, table.twocol td{ border-bottom:1px dotted #eee; padding:4px 2px 2px} 
table.twocol th {font-weight:normal; text-align:left}
table.twocol td {text-align:right;}
table.twocol thead th {font-weight:bold}

table.normal th, table.normal td {border:1px solid #aaa; padding:2px 4px; text-align:right} 
table.normal th {font-weight:bold; color:#666; padding-top:6px; padding-bottom:6px}


/* common */
.small{font-size:.8em}
.smaller{font-size:.9em}
.larger{font-size:1.2em}
.large{font-size:1.4em}
html body .first{margin-top:0; margin-left:0; padding-top:0; padding-left:0}
html body .last{margin-bottom:0; margin-right:0; padding-bottom:0; padding-right:0}
html body .top{margin-top:0; padding-top:0}
html body .bottom{margin-bottom:0; padding-bottom:0}
html body .left{margin-left:0; padding-left:0}
html body .right{margin-right:0; padding-right:0}
html body .floatleft{float:left; margin:0 18px 18px 0} 
html body .floatright{float:right; margin:0 0 18px 18px}
html body .marginleft{margin-left:10px} 
html body .marginright{margin-right:10px} 
html body .margintop{margin-top:10px} 
html body .marginbottom{margin-bottom:10px} 
html body .nomargin{margin:0} 
html body .noborder, .noborder td, .noborder th{border:none}
html body .tight dt, html body .tight dd {padding-top:2px;padding-bottom:2px}
html body .sparse li, html body .sparse dt, html body .sparse dd{padding-top:4px;padding-bottom:4px}
.sidenote{border:1px solid #aaa; padding:8px 10px; margin-bottom:18px}/*combine with .left, .right*/
.comment{font-size:10px;font-weight:normal}
.hide, .hidden{display:none}
.replace{position:absolute; left:-2000px}/*text for images*/
/*surround img with .shadow to get a simple shadow*/
.shadow {float:left; background: url(images/shadowAlpha.png) no-repeat bottom right; margin: 6px 0 0 6px}
.shadow img { position: relative; margin: -6px 6px 6px -6px;border: 1px solid #ccc}
.nowrap{white-space:nowrap}
.auto{width:auto}
.inline{display:inline}
.block{display:block}
.alignleft {text-align:left}
.alignright {text-align:right}

/*Some fixes*/
/* make gecko always show vertical scrollbar (disables page jumping while loading)*/
html { overflow: -moz-scrollbars-vertical !important}


/*
	cssframesnippets.css
	Copy the blocks of code from this file to your main stylesheet file. 
	It is assumemed that a link to cssframe.css would precede this code.
	Make sure to start your CSS with "Starter CSS" block from below 
	 - this is the only block you are supposed to copy, the rest is optional.
	Feel free to modify any of the code below according to your needs. 
	Remove comments to save space.
	Code blocks:
	- Starter CSS (required to be copied): sets colors, fonts and some other initial stuff
	- Forms CSS: nicely formatted forms
	- Table CSS: in case you need nice tables  
*/


/*
 
Move (or copy) the block below to the start of your style sheet (for customization)
The rest of this file is supposed to stay unchanged
 
*/
 
/*for dev only*/
.bgcolor, .bgcolor0 {background-color:#efe}
.bgcolor1 {background-color:#fee}
.bgcolor2 {background-color:#eef}
.bgcolor3 {background-color:#ded}
.bgcolor4 {background-color:#dde}

/* customize colors */
body{color:#000; background:#fff}
fieldset, .padborder, .padvborder, .padhborder, .sidenote, table{border:1px solid #aaa}
a{text-decoration:underline}
a:link{color:#008}
a:visited{color:#3D3D88}
a:hover,a:active{color:#00d}
fieldset dt{color:#333}
.highlight{background-color:#ffa}
.quiet, .comment{color:#666}
table.nice tr:hover{background-color:#ffc}
label span{color:#f00}

/* font-family (sizes are set earlier) */
body,legend{font-family:Georgia,"Times New Roman",Times,serif}
select,input,textarea{font-family:Tahoma,Verdana,Arial,sans-serif}
.comment {font-family:Arial,helvetica,sans-serif}
pre,code{font-family:"Courier New",Courier,mono}

/*-- Starter CSS end -- */