/* cssframe.css (CSSFrame.com v.2007-11-01); no need to modify; accompany with cssframeStarter.css*/

/* reset */
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,th,td,.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;}
table{border-collapse:separate; border-spacing:0;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}

/* set defaults */
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*/
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;}
option{padding-left:0.4em;}
img{display:block;} /* for strict mode */

/* font size x18px */
body{font-size:12px; line-height:18px;}
h3,p,ol,ul{margin-bottom:18px;}
h1,h2,h3,h4,h5{font-weight:normal;}
div p:last-child{margin-bottom:0;} /*valid in CSS 3*/
h1{font-size:24px; line-height:36px; margin-bottom:9px;}
h2{font-size:20px; line-height:36px; margin-bottom:9px;}
h3{font-size:16px; line-height:18px}
h4{font-size:14px; line-height:18px}
h5{font-size:12px; line-height:18px}
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*/

/* grid*/
body{text-align:center;}
.container{text-align:left; margin:0 auto; width:960px;} /*feel free to overwrite*/
#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*/

/*.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 .pad, 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:9px 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}

/*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: dt - labels, dd - fields)*/
fieldset{padding:8px; border:1px solid #aaa; margin-bottom:18px;} /*in html add .noborder if desired*/
legend{font-size:18px;}
fieldset dt, fieldset dd{display:block; float:left; margin:0; padding:4px;}
fieldset dt{clear:left; width:25%; text-align:right; overflow:hidden;}
fieldset dt, .label, .lbl{font-size:11px; font-weight:bold; color:#333;} /*use .label for explicit formatting, use .lbl outside of form*/
.label {padding:4px; margin-left:4px;}
fieldset dd{width:70%;}
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.normal{width:220px;} /*will fit in col3; use .normal for explicit formatting*/
textarea{width:220px; height:100px;}
select{width:224px;} /*a bit wider*/
input.narrow, textarea.narrow, .narrow textarea{width:86px;} /*not ".narrow input"*/
select.narrow, .narrow select{width:90px;}
input.wide, textarea.wide, .wide textarea{width:360px;} 
select.wide, .wide select {width:364px;}
label span{color:#f00; font-weight:normal;} /*To indicate a "Required" field*/
.formcomment, dl .comment{display:block; font-style:italic; font-size:10px; line-height:12px; margin-bottom:2px;}
dt .comment{text-align:right;}

/*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*/
.boxsuccess, .boxerror, .boxwarning, .boxinfo{display:block; border:1px solid; padding:26px 26px 26px 89px; min-width:90px;} /*border+pad = 1+8+(54-18oneLine)/2=27  left:1+17+54+18=90*/
.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;}

/*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;}

/* 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{border:none;}
.sidenote{border:1px solid #aaa; padding:8px 10px; margin-bottom:18px;}/*combine with .left, .right*/
.formcomment, .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 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;}

/*
	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  
*/


/*-- Starter CSS - start your style sheet by copying this block --*/
/*for dev only*/
.bgcolor, .bgcolor0 {background-color:#efe;}
.bgcolor1 {background-color:#fee;}
.bgcolor2 {background-color:#eef;}
.bgcolor3 {background-color:#ded;}
.bgcolor4 {background-color:#dde;}
/* .container{background:url(images/grid.png);} */

/* customize colors */
body{color:#000; background:#fff;}
fieldset, .padBorder, .padVBorder, .padHBorder, .sidenote{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, .formcomment{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,fieldset,.input{font-family:Tahoma,Verdana,Arial,sans-serif;}
.formcomment, .comment {font-family:Arial,Helvetica,sans-serif;}
pre,code{font-family:"Courier New",Courier,mono;}
textarea {font-size: 12px;}

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

/*-- Starter CSS end -- */