Ken and Jake,
Thank you so much for your repsonses. I'm finding them very useful.
Is there any danger in having a Style Sheet that is TOO big?
Attached is the style sheet for my site. Can you give me your opions
on it? Everything is pretty organized at the top but gets a little
hairy towards the bottom.
Ryan
On 4/13/05, Jake McKee <[EMAIL PROTECTED]> wrote:
> For me, I like to keep absolutely everything in one file... that way
> it's all in one place for when I got to start changing out the look and
> feel.
>
> I do two main things to organize to make it easy:
>
> - Ordering in the document... breaking the file into blocks of like
> types. So global stuff is always at the top, page specific stuff is at
> the bottom. And the more places something is used, the higher in the doc
> it's placed. (And if something minor usage gets increased, I'll actually
> move it in the document)
>
> - Commenting... sounds obvious, but easy to forget. I'll actually go in
> and add comments before and after each "block" of content, as well as
> commenting each CSS block. This makes it easy either ctrl-F while I'm
> working, or remember what the heck I was thinking 6 months later.
>
> Oh, and I guess the third thing - use descriptive names. So often I see
> people using things like "lf-col" rather than "left-column" or "ftr"
> rather than "footer".
>
> It's a few extra characters, but in 6 months or a year, you'll wish the
> creator had used a name that's logical...especially if it's not your code.
>
> FWIW
>
> Ryan Everhart wrote:
>
> >All,
> >I believe this is a very timely discussion since the meeting last
> >night had to do with CSS and I'm sure you all have hundred's of ideas
> >going through your head. Here my issue:
> >
> >I have designed an internal website for my company which my
> >organization of about 200 people use daily. In this website there
> >about 5 to 6 web based applications. For these applications I have a
> >style sheet set up defining font size, table styles, row styles,
> >button styles and other styles like forms. These are styles that I
> >use through out apply my applications on this site.
> >
> >After doing some research I came across a site that has some pretty
> >cool styles for <ul> and <li> tags [1]. So like any other CSS
> >information on my site I started putting these styles on my Style
> >sheet and it got me wondering. How do you all organize all the
> >hundreds of lines of styles you could have for your web sites? Do you
> >keep them all on one style sheet? What if you are using a particular
> >style only on one page on your entire web site, do you do inline css
> >for that style? Right now my style sheet is 350 lines long. Is that
> >too big? Should I have a style sheet for each application? These are
> >the questions that come to mind. How do you all organize your CSS?
> >
> >Anyone else going to the Netxel Cup race this weekend?
> >
> >Ryan
> >
> >[1] http://css.maxdesign.com.au/listamatic/
> >----------------------------------------------------------
> >To post, send email to [email protected]
> >To unsubscribe:
> > http://www.dfwcfug.org/form_MemberUnsubscribe.cfm
> >To subscribe:
> > http://www.dfwcfug.org/form_MemberRegistration.cfm
> >
> >
> >
> >
> >
> >
> >
> >
>
> ----------------------------------------------------------
> To post, send email to [email protected]
> To unsubscribe:
> http://www.dfwcfug.org/form_MemberUnsubscribe.cfm
> To subscribe:
> http://www.dfwcfug.org/form_MemberRegistration.cfm
>
>
span.normalhd {font-family:Verdana,Arial;font-size:8pt;color:darkblue;text-decoration:none;}
BODY {background:#FEFEE6; margin:5px 0;}
/****************Hyper links related spans****************/
A:{color:green;}
A:link{color:blue;text-decoration: none;}
A:visited{color:blue;text-decoration: none;}
A:active{text-decoration: none;}
A:hover {color:red;text-decoration : underline;}
.css_nav01 a:link {color: #000000;text-decoration: none;}
.css_nav01 a:active {color: #000000;text-decoration: underline;}
.css_nav01 a:visited {color: #000000;text-decoration: none;}
.css_nav01 a:hover {color: #A9A9A9;text-decoration: underline;}
.css_nav01 {font-family: Verdana,Arial; font-size: 12px; padding-right: 4px; padding-left: 4px;}
/** black outline white background **/
.css_layout_table1 {border-collapse: collapse;border: 4px solid #000000;background-color: #FFFFFF;}
.css_layout_table2 {border-collapse: collapse;border-top: 1px dashed #A9A9A9;background-color: #FFFFFF;}
/** a blue background with black font**/
.css_layout_r1{font-family: Verdana,Arial;font-weight: bold;font-size: 18px;color: #000000;padding-left: 3px;background-color: #6699FF;}
/** a blue background with black font**/
.css_layout_r2{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;padding: 3px;border-top: 1px solid #000000;background-color: #99CCFF;}
/** a blue background with black font**/
.css_layout_r21{font-family: Verdana,Arial;font-size: 12px;color: #000000;padding: 3px;border-right: 1px dashed #A9A9A9;background-color: #FFFFFF;}
/** a blue background with black font**/
.css_layout_r3{font-family: Verdana,Arial;font-size: 12px;color: #000000;padding: 3px;border-top: 1px solid #000000;background-color: #FFFFFF;}
/** dark grey background with black bottom line white bold font**/
.css_layout_loginmenu{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #FFFFFF;padding-left: 2px;border-bottom: 1px solid #000000;background-color: #A9A9A9;}
/** light grey background with black bold font**/
.css_layout_loginmenu_bck{background-color: #DCDCDC;border-left: 1px solid #000000;border-top: 1px solid #000000;}
/**********Table Class - Used for the dashboard applications *************************************************/
/** blue dashboards **/
.css_table100_db{border: 1px solid #A0B3DE;}
.css_h100_db{background-image: url(/cbs/images/dashboards/top-bck-100.gif);background-color: #A0B3DE;font-family: Verdana,Arial;font-size: 12px;color: #FF4500;font-weight: bold;padding: 2px;}
.css_r100_db{font-family:Verdana,Arial;font-size:12px;color:#000000;padding-bottom: 4px;padding-top: 4px;padding-left: 2px;padding-right: 2px;}
/** additinal headers and rows for blue dashboard **/
.css_h101_db_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;background-color: #A0B3DE;padding: 2px;}
.css_r101_db_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;background-color: #F1F2F7;padding: 2px;}
.css_r101_db_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #F1F2F7;padding: 2px;}
.css_r102_db_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;background-color: #E4E6F2;padding: 2px;}
.css_r102_db_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #E4E6F2;padding: 2px;}
/** orange dashboards **/
.css_table200_db{border: 1px solid #FEB469;}
.css_h200_db{background-image: url(/cbs/images/dashboards/top-bck-200.gif);background-color: #FEB469;font-family: Verdana,Arial;font-size: 12px;color: #000000;font-weight: bold;padding: 2px;}
.css_r200_db{font-family:Verdana,Arial;font-size:12px;color:#000000;padding-bottom: 4px;padding-top: 4px;padding-left: 2px;padding-right: 2px;}
/** additinal headers and rows for orange dashboard **/
.css_h201_db_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;background-color: #FEB469;padding: 2px;}
.css_h201_db_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;background-color: #FEB469;padding: 2px;}
.css_r201_db_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;background-color: #FEF2CC;padding: 2px;}
.css_r201_db_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #FEF2CC;padding: 2px;}
.css_r202_db_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;background-color: #FFECB9;padding: 2px;}
.css_r202_db_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #FFECB9;padding: 2px;}
/** red dashboards **/
.css_table300_db{border: 1px solid #FE2F3A;}
.css_h300_db{background-image: url(/cbs/images/dashboards/top-bck-300.gif);background-color: #FE2F3A;font-family: Verdana,Arial;font-size: 12px;color: #FFFFFF;font-weight: bold;padding: 2px;}
.css_r300_db{font-family:Verdana,Arial;font-size:12px;color:#000000;padding-bottom: 4px;padding-top: 4px;padding-left: 2px;padding-right: 2px;}
/**********Table Class - Used for the scorecard applications *************************************************/
.css_table100_sc{border: 1px solid #CCCCCC;}
/** scoreboard title header **/
.css_h100_sc_md{font-family: Verdana,Arial;font-size: 12px;color: #FFFFFF;font-weight: bold;background-color: #666666;padding: 2px;}
/** additional scoreboard header **/
.css_h101_sc_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;font-weight: bold;background-color: #C3C5B8;padding: 2px;}
.css_h102_sc_sm{font-family: Verdana,Arial;font-size: 10px;color: #666666;background-color: #E9EBDB;padding: 2px;}
/** rows for scorecard **/
.css_r100_sc_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #E4E6F2;padding: 4px;}
.css_r101_sc_sm{font-family: Verdana,Arial;font-size: 10px;color: ##000000;background-color: ##F1F2F7;padding: 4px;}
/**********Table Class- Used in all reports*************************************************/
/** black outline **/
.css_table100 {border-collapse: collapse;border-bottom: 1px solid #000000;border-left: 1px solid #000000;border-right: 1px solid #000000;border-top: 1px solid #000000;}
/** light blue outline **/
.css_table200 {border-collapse: collapse;border-bottom: 1px solid #A5C3FD;border-left: 1px solid #A5C3FD;border-right: 1px solid #A5C3FD;border-top: 1px solid #A5C3FD;}
/**************tableheadings************************/
/** different color backgrounds with black borders **/
/** light blueish grey background with black outline black font**/
.css_h101_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6FA}
.css_h101_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6FA}
.css_h101_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6FA}
/** blue background with black outline black font**/
.css_h102_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #A5C3FD}
.css_h102_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #A5C3FD}
.css_h102_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #A5C3FD}
/** yellow background with black outline black font**/
.css_h103_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0}
.css_h103_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0}
.css_h103_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0}
/** green background with black outline black font**/
.css_h104_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #FFFFFF;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #006600}
.css_h104_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #FFFFFF;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #006600}
.css_h104_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #FFFFFF;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #006600}
/** light red background with black outline black font**/
.css_h105_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD}
.css_h105_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD}
.css_h105_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD}
/** light grey background with black outline black font**/
.css_h106_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6}
.css_h106_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6}
.css_h106_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6}
/** different color backgrounds with light blue borders **/
/** blue background with blue outline black font**/
.css_h201_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #A5C3FD}
.css_h201_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #A5C3FD}
.css_h201_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #A5C3FD}
/** yellow background with blue outline black font**/
.css_h202_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0}
.css_h202_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0}
.css_h202_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0}
/** light red background with blue outline black font**/
.css_h203_bg{font-family: Verdana,Arial;font-weight: bold;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD}
.css_h203_md{font-family: Verdana,Arial;font-weight: bold;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD}
.css_h203_sm{font-family: Verdana,Arial;font-weight: bold;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD}
/*************row_classes******************************/
/** ivory background with black outline black font**/
.css_r101_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFF0;}
.css_r101_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFF0;}
.css_r101_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFF0;}
/** white background with black outline black font **/
.css_r102_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r102_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r102_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
/** light light blue background with black outline black font **/
.css_r103_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F2F9FF;}
.css_r103_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F2F9FF;}
.css_r103_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F2F9FF;}
/** white background with black outline red font **/
.css_r104_bg{font-family: Verdana,Arial;font-size: 14px;color: #FF0000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r104_md{font-family: Verdana,Arial;font-size: 12px;color: #FF0000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r104_sm{font-family: Verdana,Arial;font-size: 10px;color: #FF0000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
/** transparent background with black outline black font **/
.css_r105_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;}
.css_r105_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;}
.css_r105_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;}
.css_r105_xsm{font-family: Verdana,Arial;font-size: 9px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;}
/** light yellow background with black outline black font **/
.css_r106_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0;}
.css_r106_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0;}
.css_r106_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0;}
/** light red background with black outline black font **/
.css_r107_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD;}
.css_r107_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD;}
.css_r107_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD;}
/** light grey background with black outline black font **/
.css_r108_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6;}
.css_r108_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6;}
.css_r108_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6;}
.css_r108_xsm{font-family: Verdana,Arial;font-size: 9px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #E6E6E6;}
/** light light grey background with black outline black font **/
.css_r109_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F3F3F3;}
.css_r109_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F3F3F3;}
.css_r109_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F3F3F3;}
.css_r109_xsm{font-family: Verdana,Arial;font-size: 9px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #F3F3F3;}
/** light light green background with black outline black font **/
.css_r110_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #CCFFCC;}
.css_r110_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #CCFFCC;}
.css_r110_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #CCFFCC;}
.css_r110_xsm{font-family: Verdana,Arial;font-size: 9px;color: #000000;border-left: 1px solid #000000;border-left-width: 1px;border-bottom: 1px solid #000000;border-bottom-width: 1px;padding: 3px;background-color: #CCFFCC;}
/** light blue background with blue outline black font **/
.css_r201_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r201_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r201_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
/** light red background with blue outline black font **/
.css_r202_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD;}
.css_r202_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD;}
.css_r202_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #F5DCDD;}
/** light yellow background with blue outline black font **/
.css_r203_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0;}
.css_r203_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0;}
.css_r203_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFD0;}
/** white background with blue outline red font **/
.css_r204_bg{font-family: Verdana,Arial;font-size: 14px;color: #FF0000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r204_md{font-family: Verdana,Arial;font-size: 12px;color: #FF0000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
.css_r204_sm{font-family: Verdana,Arial;font-size: 10px;color: #FF0000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;background-color: #FFFFFF;}
/** transparent background with blue outline black font **/
.css_r205_bg{font-family: Verdana,Arial;font-size: 14px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;}
.css_r205_md{font-family: Verdana,Arial;font-size: 12px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;}
.css_r205_sm{font-family: Verdana,Arial;font-size: 10px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;}
.css_r205_xsm{font-family: Verdana,Arial;font-size: 9px;color: #000000;border-left: 1px solid #A5C3FD;border-left-width: 1px;border-bottom: 1px solid #A5C3FD;border-bottom-width: 1px;padding: 3px;}
/**********font classes*******************************/
/* Class used for Important Notices */
.notice {font-family:Verdana,Arial;font-weight: normal;elevation : above;font-variant : normal;text-transform : capitalize;}
/************black*************************************************************/
/*All non table headings have black bold font and text box labels have black fonts*/
.css_fblk_bg {font-family:Verdana,Arial;font-size:14px;color:#000000;}
.css_fblk_md {font-family:Verdana,Arial;font-size:12px;color:#000000;}
.css_fblk_sm {font-family:Verdana,Arial;font-size:10px;color:#000000;}
.css_fblk_xsm {font-family:Verdana,Arial;font-size:9px;color:#000000;}
.css_fblk_b_bg {font-family:Verdana,Arial;font-size:14px;color:#000000;font-weight:bold;}
.css_fblk_b_md {font-family:Verdana,Arial;font-size:12px;color:#000000;font-weight:bold;}
.css_fblk_b_sm {font-family:Verdana,Arial;font-size:10px;color:#000000;padding-left: 2px;font-weight:bold;}
.css_fblk_u_bg {font-family:Verdana,Arial;font-size:14px;color:#000000;text-decoration:underline;}
.css_fblk_u_md {font-family:Verdana,Arial;font-size:12px;color:#000000;text-decoration:underline;}
.css_fblk_u_sm {font-family:Verdana,Arial;font-size:10px;color:#000000;text-decoration:underline;}
/************white*************************************************************/
.css_fwht_bg {font-family:Verdana,Arial;font-size:14px;color:#FFFFFF;}
.css_fwht_md {font-family:Verdana,Arial;font-size:12px;color:#FFFFFF;}
.css_fwht_sm {font-family:Verdana,Arial;font-size:10px;color:#FFFFFF;}
.css_fwht_xsm {font-family:Verdana,Arial;font-size:9px;color:#FFFFFF;}
.css_fwht_b_bg {font-family:Verdana,Arial;font-size:14px;color:#FFFFFF;font-weight:bold;}
.css_fwht_b_md {font-family:Verdana,Arial;font-size:12px;color:#FFFFFF;font-weight:bold;}
.css_fwht_b_sm {font-family:Verdana,Arial;font-size:10px;color:#FFFFFF;padding-left: 2px;font-weight:bold;}
.css_fwht_u_bg {font-family:Verdana,Arial;font-size:14px;color:#FFFFFF;text-decoration:underline;}
.css_fwht_u_md {font-family:Verdana,Arial;font-size:12px;color:#FFFFFF;text-decoration:underline;}
.css_fwht_u_sm {font-family:Verdana,Arial;font-size:10px;color:#FFFFFF;text-decoration:underline;}
/*********************blue********************/
.css_fblu_bg {font-family:Verdana,Arial;font-size:14px;color:#000099;}
.css_fblu_md {font-family:Verdana,Arial;font-size:12px;color:#000099;}
.css_fblu_sm {font-family:Verdana,Arial;font-size:10px;color:#000099;}
.css_fblu_b_bg {font-family:Verdana,Arial;font-size:14px;color:#000099;font-weight:bold;}
.css_fblu_b_md {font-family:Verdana,Arial;font-size:12px;color:#000099;font-weight:bold;}
.css_fblu_b_sm {font-family:Verdana,Arial;font-size:10px;color:#000099;font-weight:bold;}
.css_fblu_u_bg {font-family:Verdana,Arial;font-size:14px;color:#000099;text-decoration:underline;}
.css_fblu_u_md {font-family:Verdana,Arial;font-size:12px;color:#000099;text-decoration:underline;}
.css_fblu_u_sm {font-family:Verdana,Arial;font-size:10px;color:#000099;text-decoration:underline;}
/*********************red********************/
.css_fred_bg {font-family:Verdana,Arial;font-size:14px;color:#FF0000;}
.css_fred_md {font-family:Verdana,Arial;font-size:12px;color:#FF0000;}
.css_fred_sm {font-family:Verdana,Arial;font-size:10px;color:#FF0000;}
.css_fred_b_xbg {font-family:Verdana,Arial;font-size:16px;color:#FF0000;font-weight:bold;}
.css_fred_b_bg {font-family:Verdana,Arial;font-size:14px;color:#FF0000;font-weight:bold;}
.css_fred_b_md {font-family:Verdana,Arial;font-size:12px;color:#FF0000;font-weight:bold;}
.css_fred_b_sm {font-family:Verdana,Arial;font-size:10px;color:#FF0000;font-weight:bold;}
.css_fred_u_bg {font-family:Verdana,Arial;font-size:14px;color:#FF0000;text-decoration:underline;}
.css_fred_u_md {font-family:Verdana,Arial;font-size:12px;color:#FF0000;text-decoration:underline;}
.css_fred_u_sm {font-family:Verdana,Arial;font-size:10px;color:#FF0000;text-decoration:underline;}
/*********************green********************/
.css_fgrn_bg {font-family:Verdana,Arial;font-size:14px;color:#006600;}
.css_fgrn_md {font-family:Verdana,Arial;font-size:12px;color:#006600;}
.css_fgrn_sm {font-family:Verdana,Arial;font-size:10px;color:#006600;}
.css_fgrn_b_bg {font-family:Verdana,Arial;font-size:14px;color:#006600;font-weight:bold;}
.css_fgrn_b_md {font-family:Verdana,Arial;font-size:12px;color:#006600;font-weight:bold;}
.css_fgrn_b_sm {font-family:Verdana,Arial;font-size:10px;color:#006600;font-weight:bold;}
.css_fgrn_u_bg {font-family:Verdana,Arial;font-size:14px;color:#006600;text-decoration:underline;}
.css_fgrn_u_md {font-family:Verdana,Arial;font-size:12px;color:#006600;text-decoration:underline;}
.css_fgrn_u_sm {font-family:Verdana,Arial;font-size:10px;color:#006600;text-decoration:underline;}
/*********************sliver********************/
.css_fslr_bg {font-family:Verdana,Arial;font-size:14px;color:#C0C0C0;}
.css_fslr_md {font-family:Verdana,Arial;font-size:12px;color:#C0C0C0;}
.css_fslr_sm {font-family:Verdana,Arial;font-size:10px;color:#C0C0C0;}
.css_fslr_b_bg {font-family:Verdana,Arial;font-size:14px;color:#C0C0C0;font-weight:bold;}
.css_fslr_b_md {font-family:Verdana,Arial;font-size:12px;color:#C0C0C0;font-weight:bold;}
.css_fslr_b_sm {font-family:Verdana,Arial;font-size:10px;color:#C0C0C0;font-weight:bold;}
.css_fslr_u_bg {font-family:Verdana,Arial;font-size:14px;color:#C0C0C0;text-decoration:underline;}
.css_fslr_u_md {font-family:Verdana,Arial;font-size:12px;color:#C0C0C0;text-decoration:underline;}
.css_fslr_u_sm {font-family:Verdana,Arial;font-size:10px;color:#C0C0C0;text-decoration:underline;}
/*********************orange red********************/
/* old color FF4500 */
.css_forg_bg {font-family:Verdana,Arial;font-size:14px;color:#FF6600;}
.css_forg_md {font-family:Verdana,Arial;font-size:12px;color:#FF6600;}
.css_forg_sm {font-family:Verdana,Arial;font-size:10px;color:#FF6600;}
.css_forg_b_bg {font-family:Verdana,Arial;font-size:14px;color:#FF6600;font-weight:bold;}
.css_forg_b_md {font-family:Verdana,Arial;font-size:12px;color:#FF6600;font-weight:bold;}
.css_forg_b_sm {font-family:Verdana,Arial;font-size:10px;color:#FF6600;font-weight:bold;}
.css_forg_u_bg {font-family:Verdana,Arial;font-size:14px;color:#FF6600;text-decoration:underline;}
.css_forg_u_md {font-family:Verdana,Arial;font-size:12px;color:#FF6600;text-decoration:underline;}
.css_forg_u_sm {font-family:Verdana,Arial;font-size:10px;color:#FF6600;text-decoration:underline;}
/***************buttons and form fields*************************/
.css_button01 {font-family: Verdana,Arial;font-size: 12px;color: #000000;font-weight: bold;background-color: #E6E6FA;border: 1px solid #000000;}
.css_input01 {font-family: Verdana,Arial;font-size: 12px;color: #000000;font-weight: bold;background-color: #F8F8FF;border: 1px solid #000000;}
.css_input02 {font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #F8F8FF;border: 1px solid #000000;width: 135px;}
.css_select02 {font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #F8F8FF;border: 1px solid #000000;width: 135px;}
.css_input03 {font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #F8F8FF;border: 1px solid #000000;width: 50px;}
.css_inputpopups {font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #F8F8FF;border: 1px solid #000000;}
.css_input04 {font-family: Verdana,Arial;font-size: 10px;color: #000000; font-weight: bold;background-color: #F8F8FF;border: 1px solid #000000;}
.css_input05 {font-family: Verdana,Arial;font-size: 10px;color: #000000;background-color: #F8F8FF;border: 1px solid #000000;}
/***************lists*************************/
/* list will not be indented and has a light grey line at the bottom or list */
.list_100{list-style-type: none;padding-left: 0;margin-left: 0;border-bottom: 1px solid gray;width: 98%;}
/* list will be indented 20px with 0 padding and no bullets */
.list_200{list-style-type: none;padding: 0;margin-left: 20px;}
/* list will be indented 30px with 0 padding and no bullets */
.list_300{list-style-type: none;padding: 0;margin-left: 30px;}
/* list will be indented 40px with 0 padding, small font and square bullets */
.list_400{list-style-type: square;font-size: 10px;padding: 0;margin-left: 40px;}
/* outer list item no indent no bullets, light greg line at top of list */
.listitem_101{list-style: none;margin: 0;padding: 2px;border-top: 1px solid gray;}
/* outer list item no indent no bullets, light greg line at top of list light red background color */
.listitem_102{list-style: none;margin: 0;padding: 2px;border-top: 1px solid gray;background-color: #F5DCDD;}
.listitem_102a{list-style: none;margin: 0;padding: 2px;border-top: 1px solid gray;background-color: #F5DCDD;text-align: right;}
