/*Order for margin, padding: U R D L
 Color: red green blue
 FLOAT DISPLAY FONT TEXT COLOR BG-COLOR IMAGE BORDER MARGIN PADDING WIDTH HEIGHT 
 Slate red: {color:#970A00;} 27 in. monitor: 772222
 Slate blue: {color:#000A97;} 27 in monitor: 222255
 Slate green: {color:#255045;}
 Smokestack grey {color:#B4BEC8;}
 Smokestack grey (lighter): {color:#DCE6E6;}
 */
  body {background-color:#FFFBF2; color:#663300; font-family:Arial, sans-serif; margin:5px 20px 0 20px;
  padding:0; min-width:1400px;}
  .all_cl_showcss {letter-spacing:normal;}
  .cl_inline {display:inline; margin:0 5px 0 5px;}
  h1.h1_cl_title {font-size: 1.5em; display:inline-block;}
  h3.cl_ref_info {color:#DD0000; margin:0; text-align:center;}
  p {margin:0 10px 0 10px;}
  a#a_id_back {display:inline-block; color:#553300; background-image:url('../images/b_blogger_back_btn.jpg');
 background-position:center; border:4px solid; width:80px; height:33px;margin: 0px 50px 5px 0px}
  a#a_id_back:hover {border:4px outset;}
  a#a_id_back:active {border:4px inset;}
  #div_id_header {background-image: url('../images/brwnpapr.gif'); margin-bottom:5px; text-align:center; border:5px solid;}
  #div_id_footer {clear:both;}
  
/*ARGS ORDER
 - - - - - - - - - - -NOTE: "margin:0 auto 3px auto" CENTERS the item in its container - - - - - - - - - - - PUT THIS SOMEWHERE*/
  #div_args_order {float:left; border:2px solid; width:500px; margin:3px 0 5px 50px;}
 /* table#tbl_id_args {margin:0 auto 3px auto; padding:3px;}
  .td_cl_args {padding:0 5px 0 5px; height:1px;} */
  /* For two columns of paragraphs: FIRST must be "inline-block", SECOND "inline"
  If the first one is "inline", the width is ignored. BUT: You have to use a <br> to get a "newline"*/
  p.p_cl_args_l {display:inline-block; width:25%;}
  p.p_cl_args_m {display:inline-block;}
  p.p_cl_args_r {display:inline;}
  p#id_red {color:red; font-weight:bold; display:inline;}
  p#id_green {color:green; font-weight:bold; display:inline;}
  p#id_blue {color:blue; font-weight:bold; display:inline;}
  span {font-family:Lucida Console; font-weight:bold; color:#970A00;}
  span.sp_cl_blue {font-family:Lucida Console; font-weight:bold; color:#000A97;}
  
/*BOX MODEL:
 you can't say "border:2px solid" The border disappears from some of the table
 outlines, apparently because it is dark brown.*/
  #div_id_box_model {float:right; border:2px solid; width:500px; margin:3px 50px 5px 5px;}
  table#id_margin {color:#EEDDAA; background-color:#663300;
  border-style:solid; border-width:3px; padding:1px 22px 22px 22px;
  margin:0 auto 5px auto;}
  table#id_border {color:#663300; background-color:#EEDDAA;
  border-style:solid; border-width:3px; padding:0px 15px 15px 15px;}
  table#id_padding {color:#EEDDAA; background-color:#663300;
  border-style:solid; border-width:3px; padding:1px 22px 22px 22px;}
  table#id_content {color:#663300; background-color:#EEDDAA;
  background-image:url('../images/brwnpapr.gif'); border-width:3px; border-style:solid;}
  p.p_cl_bmodel {text-align:center; margin:0 0 2px 0; padding:0;}
  p#id_box_border {text-align:center; margin:0; line-height:0.8em;}

/*MARGIN, PADDING SAMPLES*/
 #div_id_mp_samples {border:2px solid; clear:both; margin-bottom: 10px;}
 div.div_cl_outline_1st {border:1px solid; padding:1px; min-height:65px;}
 div.div_cl_outline {border:1px solid; padding:1px; min-height:90px;}
 div.div_cl_sampl1 {border:3px solid #000A97;}
 div.div_cl_sampl2 {border:3px solid #000A97; margin:8px;}
 div.div_cl_sampl3 {border:3px solid #000A97; margin:8px;padding:8px;}
 div.div_cl_sampl4 {border:3px solid #000A97; margin:25px 0 0 20px; max-width:200px;}
 div.div_cl_sampl5 {border:3px solid #000A97; margin:25px 0 0 20px; padding:10px 0 0 5px; max-width:200px;}
 div.div_cl_sampl6 {border:3px solid #000A97; margin:8px auto 0 auto; max-width:100px;}
 div.div_cl_outline_inl {border:1px solid; padding:1px; min-height:90px; max-width: 400px; display:table-cell;}
 table#table_id_samples {border-spacing:10px;}
 p.p_cl_sample {text-align:justify; margin:0;}
 p.p_cl_lr_mgn {margin:0 20px 0 20px;}
 td.td_cl_sample {max-width:400px; padding:0;}
 
/*BORDERS:*/
  #div_id_bwrap {float:right; width:470px;}
  .div_cl_borders {border:2px solid; margin-top:3px; margin-bottom:5px;}
  table.tbl_cl_borders {margin:0 auto 3px auto; padding:3px; border-spacing:15px;}
  td#td_id_solid {border:5px solid; background-image:url('../images/tanpapr.gif');}
  td#td_id_dashed {border:5px dashed; background-image:url('../images/tanpapr.gif');}
  td#td_id_dotted {border:5px dotted; background-image:url('../images/tanpapr.gif');}
  td#td_id_double {border:5px double; background-image:url('../images/tanpapr.gif');}
  td#td_id_groove {border:5px groove; background-image:url('../images/tanpapr.gif');}
  td#td_id_inset {border:5px inset; background-image:url('../images/tanpapr.gif');}
  td#td_id_outset {border:5px outset; background-image:url('../images/tanpapr.gif');}
  td#td_id_ridge {border:5px ridge; background-image:url('../images/tanpapr.gif');}
  p.p_cl_borders {padding:5px 2px 5px 2px;}
  td#td_id_bdr {width:60px;}
  
  td#td_id_double_o {border:5px double; outline:5px double;
  background-image:url('../images/tanpapr.gif');}
  td#td_id_groove_o {border:5px groove; outline:5px groove;
  background-image:url('../images/tanpapr.gif');}
  td#td_id_ridge_o {border:5px ridge; outline:5px ridge;
  background-image:url('../images/tanpapr.gif');}

/*TEXT AND PARAGRAPH FORMATTING*/
  .div_cl_misc {border:2px solid; padding:1px; margin:5px 0 15px 0;}
  tr {vertical-align:baseline;}
  td.td_cl_txt {border:1px solid; min-width:135px;}
  td.td_cl_para {border:1px solid;}
  p.p_cl_txt {text-align:center; font-weight:bold; margin:0 0 3px 0;}
  p#p_id_txt_l {text-align:left; margin:0}
  p#p_id_txt_c {text-align:center; margin:0}
  p#p_id_txt_r {text-align:right; margin:0}
  p#p_id_txt_u {text-decoration:underline; margin:1px 0 1px 20px;}
  p#p_id_txt_o {text-decoration:overline; margin:1px 0 1px 20px;}
  p#p_id_txt_t {text-decoration:line-through; margin:1px 0 1px 20px;}
  p#p_id_txt_cap {text-transform:capitalize; margin:1px;}
  p#p_id_txt_up {text-transform:uppercase; margin:1px;}
  p#p_id_lh90 {line-height:90%;}
  p#p_id_lh200 {line-height:200%;}
  p#p_id_tin_p {text-indent:1em; text-align:justify; margin:1px 15px 2px 15px;}
  p#p_id_tin_m {text-indent:-1em; text-align:justify; margin:2px 15px 1px 15px;}
  p#p_id_lsp {letter-spacing:5px; margin:2px 0 2px 20px;} 
  p#p_id_wsp {word-spacing:10px; margin:2px 0 2px 20px;}
  p#p_id_f_letter {text-align:justify; margin:0 2px 5px 2px;}
  p#p_id_f_line {text-align:justify; margin:0 2px 3px 2px;}
  p#p_id_f_letter:first-letter {color:red; font-size:xx-large;}
  p#p_id_f_line:first-line {color:red;}
  
/*LIST OPTIONS
 NOTE: Normally you would specify the list-stype-type for UL, not each LI*/
  #div_id_lists {float:left; border:2px solid; width:650px; margin:3px 0 5px 0;}
  td.td_cl_lists {border:1px solid; min-width:200px;}
  li#li_id_circle {list-style-type:circle;}
  li#li_id_square {list-style-type:square;}
  li#li_id_none {list-style-type:none;}
  li#li_id_decimal {list-style-type:decimal;}
  li#li_id_decimal_l {list-style-type:decimal-leading-zero;}
  li#li_id_george {list-style-type:georgian;}
  li#li_id_l_alpha {list-style-type:lower-alpha;}
  li#li_id_l_roman {list-style-type:lower-roman;}
  li#li_id_l_greek {list-style-type:lower-greek;}
  ul#ul_id_indent {list-style-position:inside; margin:1px 3px 1px 2px;}
  ul#ul_id_hang {list-style-position:outside; margin:1px 3px 1px 2px;}
  ul#ul_id_lists {margin:1px 3px 1px 2px;}
  ul#ul_id_inline {display:inline;}
  li#li_id_inline {display:inline;}
  p.p_cl_lists {font-weight:bold; text-align:left; margin-bottom:0;}
  
/*LINKY-DINKIES
 See Chapter 9 (CSS missing manual) for an example of tabbed linky-dinkys*/
  #div_id_link {clear:both; border:2px solid; margin:3px 0 5px 0;}
  td.td_cl_link {border:1px solid; padding:1px 5px 5px 5px; width:195px;}
  td.td_cl_b_link {border:1px solid; padding:1px 5px 5px 5px; width:120px;}
  td.td_cl_syntax {border:1px solid; padding:1px 5px 5px 5px; width:600px;}
  p.p_cl_ntarget {display:none;}
  p.p_cl_link {margin:0 0 4px 0;}
  p.p_cl_comment {margin:1px 0 3px 15px;}
  a.a_cl_def:link {color:#663300;}
  a.a_cl_def:visited {color:#336600;}
  a.a_cl_def:hover {color:#DD3333; font-style:oblique;}
  a.a_cl_def:active {color:#3333FF;}
  a.a_cl_no_ul:link {color:#663300; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_no_ul:visited {color:#336600; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_no_ul:hover {color:#DD3333; background-color:transparent; text-decoration:underline;}
  a.a_cl_no_ul:active {color:#3333FF; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_bb:link {color:#663300; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_bb:visited {color:#336600; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_bb:hover {color:#DD3333; background-color:transparent; text-decoration: none;
   border-bottom: solid 3px #663300;}
  a.a_cl_bb:active {color:#3333FF; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_fb:link {color:#663300; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_fb:visited {color:#336600; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_fb:hover {color:#DD3333; background-color:transparent; text-decoration: none;
   border:solid 1px #663300;}
  a.a_cl_fb:active {color:#3333FF; background-color:#EEDDAA; text-decoration:none;
   border:solid 1px #663300;}
  a.a_cl_fb_a:link {color:#663300; background-color:#EEDDAA; text-decoration:none;
   border:solid 3px #663300; padding:1px 3px 1px 3px;}
  a.a_cl_fb_a:visited {color:#336600; background-color:#EEDDAA; text-decoration:none;
   border:inset 3px #663300; padding:1px 3px 1px 3px;}
  a.a_cl_fb_a:hover {color:#663300; background-color:#EEDDAA; text-decoration: none;
   border:outset 3px #663300; padding:1px 3px 1px 3px;}
  a.a_cl_fb_a:active {color:#3333FF; background-color:#EEDDAA; text-decoration:none;
   border:inset 3px #663300; padding:1px 3px 1px 3px;}
  a.a_cl_bg_ul:link {color:#663300; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_bg_ul:visited {color:#336600; background-color:#EEDDAA; text-decoration:none;}
  a.a_cl_bg_ul:hover {color:#DD3333; background-color:transparent; text-decoration:none;
   background:url('../images/underline.gif') repeat-x left bottom; padding-bottom:5px;}
  a.a_cl_bg_ul:active {color:#3333FF; background-color:#EEDDAA; text-decoration:none;}
  /*Note that the "link" goes all across the width of the "td"*/
  a.a_cl_block:link {color:#663300; background-color:#EEDDAA; display:block;
  margin:3px; padding-left:35px;}
  a.a_cl_block:visited {color:#CCCCCC; background-color:#883333;}
  a.a_cl_block:hover {color:#DD3333; background-color:transparent;}
  a.a_cl_block:active {color:#FFD222; background-color:#9A9A9A;}
  a.a_sampl:link {display:inline-block;color:#443300; background-color:#EEDDAA; text-decoration:none; font-weight:bold;
  height:1.5em; width:150px; text-align:center; border:solid 4px; margin-left:225px;}
  a.a_sampl:visited {color:#CCCCCC; background-color:#883333; border:inset 4px;}
  a.a_sampl:hover {color:#224422; background-color:#EEDDAA; border:outset 4px;}
  a.a_sampl:active {color:#FFD222; background-color:#9A9A9A; border:inset 4px;}
  
/*FORMS*/
  img.img_bdr2p_15 {border:2px solid; margin-left:15px;}
  img.img_bdr2p_30 {border:2px solid; margin-left:30px;}
  td.td_cl_form {border:1px solid; min-width:95px; padding:3px;}
  td.td_cl_form_m {border:1px solid; min-width:260px; padding:3px;}
  td.td_cl_form_w {border:1px solid; min-width:300px; padding:3px;}
  td.td_cl_book_w {border:6px inset; min-width:330px; padding:3px 20px 3px 20px;}
  input {margin:3px;}
  textarea {width:250px;}
  input:hover {background-color:#EEDDAA;}
/*Here we are trying to suppress the background color change on hover,
 to demonstrate "focus". (Don't know the syntax to mean "background-color:no change"*/  
  input#inp_id_focus:hover {background-color:#FFFFFF;}
  input#inp_id_focus:focus {background-color:#EEDDAA;}
  textarea:hover {background-color:#EEDDAA;}
  select:hover {background-color:#EEDDAA; scrollbar-base-color:#EEDDAA;}