home *** CD-ROM | disk | FTP | other *** search
/ ftp.windowware.com / 2014.06.ftp.windowware.com.tar / ftp.windowware.com / _WWWPageTemplate.css < prev    next >
Cascading Style Sheet File  |  2014-04-01  |  42KB  |  829 lines
  1.         /* 
  2.         Wilson WindowWare PageTemplate
  3.         (CSS level 3) 
  4.         Product Highlighted Navigation
  5.         Deana Falk 2014.03.11
  6.         */
  7.  
  8.           /* COPY THIS CSS TO COMMERCE AND HEMLOCK */
  9.  
  10.  
  11.        
  12.        /* SIZING NOTES
  13.           1em = 12pt = 16px = 100%
  14.           To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels. The em size unit is recommended by the W3C.
  15.           1em is equal to the current font size. The default text size in browsers is 16px/12pt. So, the default size of 1em is 16px/12pt.
  16.           The size can be calculated from pixels to em using this formula: pixels/16=em
  17.           50px/16=3.1em 
  18.           30px/16=1.875em 
  19.           20px/16=1.25em
  20.           11px/16=0.68em
  21.         */
  22.         
  23.         /* COLOR NOTES
  24.         
  25.         White = FFFFFF           ; Body background
  26.         Black = 000000           ; H1
  27.         PaleYellow = FAF2CE      ; HTML main background
  28.         DarkRed = 800000         ; Selected tab H2 title
  29.         BlackBlue = 0F2A41       ; Anchors, H2
  30.         Blue = 286090            ; H3
  31.         MediumBlue = 7EB3E0      ; Unselected Tabs
  32.         LightBlue = 9CD6F3       ; Selected tab and borders.
  33.         
  34.         
  35.         bckup_BlackBlue = 0F2A41
  36.         bckup_Mustard = FBCD75
  37.         bckup_DarkBlue = 286090
  38.         bckup_LightBlue = 5F9BCF
  39.         bckup_ExtraLightBlue = 84BBEB
  40.         bckup_DarkRed = 800000
  41.  
  42.         OrigDarkRed = 800000
  43.         OrigDarkBlue = 004080
  44.         OrigLightBlue = 8080FF
  45.         OrigExtraLightBlue = ABB7FF
  46.         
  47.         */
  48.                 
  49.         /* TAB IDS
  50.         #ProdTab
  51.         #TechTab
  52.         #OrdTab
  53.         #ProdInfoTab
  54.         #MoreTab
  55.         <div id="ProdTab" class="hilighttab">  USED TO HIGHTLIGHT A TAB 
  56.         */
  57.         
  58.         /* border-radius:top left, top right, bottom right, bottom left */
  59.         /* margin: 0em 1.25em 0em 1.25em;  top, right, bottom, left */
  60.  
  61.  
  62.        @import "_normalize.css";
  63.         
  64. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  65. /* General Style, Positioning and Size                                                       */
  66. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  67.         html            {  
  68.         
  69.                           background-color: #FFE49F;/* #FAF2CE; *#FBCD75;#0F2A41;*/
  70.                           font-family: sans-serif;
  71.                           font-size: 1em;   
  72.                           /*Gradient Background http://www.css3factory.com/linear-gradients/ 
  73.                           background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.16, #286090),color-stop(1, #9CD6F3));
  74.                           background-image: -o-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  75.                           background-image: -moz-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  76.                           background-image: -webkit-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  77.                           background-image: -ms-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  78.                           background-image: linear-gradient(to top, #286090 16%, #9CD6F3 100%); 
  79.                           */
  80.                         }   
  81.         
  82.         
  83.         body             { 
  84.                           color: #000000; 
  85.                           margin: 0em; 
  86.                           font-family: Verdana, Arial, Helvetica, sans-serif; 
  87.                           font-size: 1.0em; 
  88.                           alignment-adjust: auto;  
  89.                         } 
  90.         a                { color: #0F2A41; }  
  91.         h1              { font-size: 3.1em; color: #FFFFFF; text-align: center; } 
  92.         h2              { font-size: 1.875em; color: #0F2A41; } 
  93.         h3              { font-size: 1.56em; color: #286090; text-align: left; }
  94.         /*h3 a            { color:#0F2A41; }*/ 
  95.         h4, legend              { font-weight: bolder; }
  96.         
  97.         /*a:hover,a:active{ background-color:none;}*/ /*#9CD6F3;*/
  98.         p                { padding-left: 1.25em; }
  99.               
  100.         hr              { 
  101.                           border: 0em;  
  102.                           background-color: #286090; 
  103.                           height: 0.2em; 
  104.                           margin: 2em 2em 2em 2em; 
  105.                         }  
  106.         pre             {  
  107.                           margin-left: 2.5em;
  108.                           white-space: pre;
  109.                           white-space: pre-line;      /*  css-3 */
  110.                           white-space: -moz-pre-line;  /* Mozilla, since 1999 */
  111.                           white-space: -pre-line;      /* Opera 4-6 */
  112.                           white-space: -o-pre-line;    /* Opera 7 */
  113.                           word-wrap: break-word;       /* Internet Explorer 5.5+ */
  114.                         }
  115.          sup            { font-size: 0.68em; } 
  116.          
  117.          img.autoresize { max-width: 100%; height: auto; width: auto } /* autoresize image trick */        
  118.          img.centered   { display: block; margin-left: auto; margin-right: auto } /* center an image trick */ 
  119.          /*img.centered { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}*/
  120.                   
  121.          .floatright    { margin-top: 1%; margin-right: 2%; margin-bottom: 1%; margin-left: 2%; float: right; } /* mostly used for images */
  122.          .floatleft     { margin-top: 1%; margin-right: 2%; margin-bottom: 1%; margin-left: 2%; float: left; }  /* mostly used for images */
  123.          
  124.    
  125.          
  126.          .left          { text-align: left; }
  127.          .center        { text-align: center; }
  128.          .right         { text-align: right; }
  129.          /*.small         { font-size: 0.68em;  }*/
  130.          .small         { margin-left: 1em; font-size: 0.68em;  }
  131.          .medium        { font-size: 0.8em; }
  132.  
  133.          .indent        { margin-left: 1.875em; margin-right: auto; }   
  134.  
  135.          .preformatted  { font-family: monospace; white-space: pre; }
  136.  
  137.           /*.rounded-corners{ width:15.625em; 
  138.           height:15.625em; 
  139.           padding:0.625em; 
  140.           border-radius: 0.625em 0.625em 0.625em 0.625em; 
  141.           -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  142.           -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  143.           -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em;
  144.           -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em; }
  145.           */
  146.           
  147.           
  148. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  149. /* CONTAINER - General Style, Positioning and Size                                           */
  150. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  151.  
  152.         #container        { 
  153.                           width: 100%;
  154.                           min-width: 65em; 
  155.                           /*left:1%;
  156.                           right:1%;*/
  157.                           height: 100%;                           
  158.                           margin-left: 0em; 
  159.                           padding: 0em 0em 0em 0em;
  160.                         }
  161.                         
  162.              
  163.  
  164.          
  165. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  166. /* HEADER - Organizational Style, Positioning and Size                                       */
  167. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
  168.  
  169.         #header            { 
  170.  
  171.                           background: inherit; 
  172.                           text-align: center;
  173.                           /*min-width: 56.25em;*/ 
  174.                           /*border-style:solid;*/
  175.                           /*Gradient Background http://www.css3factory.com/linear-gradients/ 
  176.                           background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.16, #286090),color-stop(1, #9CD6F3));
  177.                           background-image: -o-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  178.                           background-image: -moz-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  179.                           background-image: -webkit-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  180.                           background-image: -ms-linear-gradient(top, #286090 16%, #9CD6F3 100%);
  181.                           background-image: linear-gradient(to top, #286090 16%, #9CD6F3 100%);
  182.                           */ 
  183.                           
  184.                         } 
  185.                         
  186.         #headerimage      { padding: 0em; 
  187.                           height: 7.1875em; /* 115px / 7.1875em banner image size */ 
  188.                           margin:0em;  
  189.                           float:left; }
  190.         #headertabs      { 
  191.                           padding-top: 5.02375em;/* 80.38px / 5.02375em offset based on banner image height in headerimage */
  192.                           float:right; }
  193.                         
  194.         /*#header h1      { color: #FFFFFF; padding: 0em 1.125em 0em; }*/
  195.         /*#header p        { color: #7EB3E0; font-size: 1.25em; font-weight: bold; text-align:center; } */
  196.              
  197.         
  198.         /*  HEADER TABS - These are the tabs on the top right of the page.   */       
  199.         #header ul      {     
  200.                             min-width: 25em; 
  201.                             margin: 0em;
  202.                             padding-right: 0.3125em;
  203.                             list-style-type: none;                                      
  204.                          }
  205.         #header ul li    {  
  206.                              
  207.                              display: inline-block;  
  208.                              *display: inline;
  209.                              *zoom: 1;
  210.                              background-color: #286090;
  211.                              font-size: 0.8em;  
  212.                              padding-top: 0.625em;
  213.                              padding-right: 0.625em;
  214.                              padding-left: 0.625em;
  215.                              padding-bottom: 0.75em;
  216.                              margin: 0.125em;
  217.                              margin-bottom: 0em;
  218.                              
  219.                              border-radius: 0.625em 0.625em 0em 0em;
  220.                              -ms-border-radius: 0.625em 0.625em 0em 0em;
  221.                              -moz-border-radius: 0.625em 0.625em 0em 0em;
  222.                              -webkit-border-radius: 0.625em 0.625em 0em 0em;
  223.                              -khtml-border-radius: 0.625em 0.625em 0em 0em;
  224.                           }
  225.         #header ul li a   {  
  226.                              text-decoration: none;  
  227.                              color: #FFFFFF;
  228.                              padding-top: 0.625em; 
  229.                              padding-right: 0.625em;
  230.                              padding-left: 0.625em;
  231.                              padding-bottom: 0.25em;                          
  232.                            }
  233.         #header ul li:hover,#header ul li a:hover
  234.                            { 
  235.                              background-color: #9CD6F3;
  236.                              border-radius: 0.625em 0.625em 0em 0em;
  237.                              -ms-border-radius: 0.625em 0.625em 0em 0em;
  238.                              -moz-border-radius: 0.625em 0.625em 0em 0em;
  239.                              -webkit-border-radius: 0.625em 0.625em 0em 0em;
  240.                              -khtml-border-radius: 0.625em 0.625em 0em 0em; 
  241.                              }
  242.        
  243.                        
  244.  
  245.       
  246.         
  247. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  248. /* WRAPPER - Organizational Style, Positioning and Size                                      */
  249. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/                     
  250.  
  251.         #wrapper        { 
  252.                           /*border-style:solid;*/  
  253.                           clear:both;
  254.                           width: 100%;
  255.                           height:100%;
  256.                           /*min-width: 56.25em;*/
  257.                           min-height: 62.5em;
  258.                           /*margin:0 0 0em;*/ 
  259.                           /*padding:0 0 0em;*/ 
  260.                           padding-bottom:1.25em; 
  261.                           border-bottom: 0.18753m solid #9CD6F3;
  262.  
  263.                         }/* margin:0 20 0 1.25em; padding: 0 0 0 1.25em; border-style:solid; }*/   
  264.                         
  265. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  266. /* NAVIGATION  Organizational Style, Positioning and Size                                    */
  267. /* (navigation elements used in raw web pages)                                               */
  268. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/                              
  269.  
  270.         #navigation      {
  271.                            float: left;
  272.                            width: 13.125em; /* You must also change #content margin-left to match this value*/
  273.                            min-width: 12.5em; 
  274.                            margin-left: 0em;
  275.                            margin-right: 0em;  
  276.                            text-justify: auto; 
  277.                            /*margin-bottom:1%;*/
  278.                            /*padding-left:1%*/  
  279.                            } 
  280.                            
  281.         #navigation ul     { list-style-type: none; }
  282.         #navigation li     { padding-bottom:0.3125em; font-size: 0.8em; } /*padding:0.3125em 1.125em 0em;*/
  283.         #navigation h2     { color: #0F2A41; font-size: 1em; padding-top:0em; padding-bottom:0em; padding-left:1.125em; text-align:left; margin-bottom:0.5625em;}
  284.         #navigation a    { text-decoration:none;  } /*Removes underline from links in left navigation tabs*/
  285.         #navigation a:hover { background-color:#9CD6F3; text-decoration:underline; }
  286.         #navigation li a:hover:after{ content: " \00BB"; } /* adds an arrow to left naviagtion links*/
  287.         
  288.  
  289.  
  290.        /* #navigation a:link, #navigation a:visited,#navigation a:hover
  291.         {
  292.         
  293.         background-color: #9CD6F3;
  294.         color: #005596; 
  295.         font-weight:bold;
  296.         background: transparent url(images/down_arrow2.png) no-repeat center bottom;
  297.             margin: 0;
  298.         }
  299.         */
  300.  
  301.         
  302.         #navigation .hilighttab     
  303.                          { 
  304.                           background: #9CD6F3; 
  305.                           text-justify: auto;
  306.  
  307.                           border-top: 0.1875em solid #9CD6F3;
  308.                           border-right: 0.1875em solid #9CD6F3;
  309.                           border-bottom: 0.0625em solid #5F9BCF;
  310.                           border-left: 0.1875em solid #9CD6F3;
  311.                          }
  312.         
  313.         #navigation .hilighttab h2 { color:#800000;  }  /*#286090;*/
  314.         #navigation .hilighttab h2:after{ content: " \00BB"; }
  315.         #navigation .hilighttab a:hover{ background-color:#7EB3E0; }  
  316.                                                  
  317.         .nav_header a    { color: #0F2A41; text-align:left; }
  318.         .nav_header p     { margin:1% ; padding: 0em 0.5625em 0.5625em; } 
  319.         .nav_header img     { margin:1% ; padding: 0em 0.5625em 0.5625em; } 
  320.         
  321.  
  322.              
  323.         #HomeTab,#ProdTab,#TechTab,#OrdTab,#ProdInfoTab
  324.                         { 
  325.                           /*border-style:solid;*/
  326.                           margin: 0 0 0em;
  327.                           padding-top:1%;
  328.                           background: #7EB3E0;
  329.                           text-justify: auto;
  330.                                                
  331.                           border-top: 0.1875em solid #9CD6F3;
  332.                           border-right: 0.1875em solid #9CD6F3;
  333.                           border-bottom: 0.0625em solid #286090;
  334.                           border-left: 0.1875em solid #7EB3E0; 
  335.                                                                            
  336.                           
  337.                           /* I liked this look
  338.                           border-top: 0.1875em solid #9CD6F3;
  339.                           border-bottom: 0.0625em solid #286090;
  340.                           border-right: 0.1875em solid #286090;
  341.                           */
  342.  
  343.                           
  344.                           
  345.                           /*border-radius: 0.625em 0em 0em 0.625em;*/
  346.                           /*http://css-tricks.com/almanac/properties/b/border-radius/*/  
  347.                           -webkit-border-top-left-radius: 0.625em;
  348.                           -webkit-border-top-right-radius: 0em;
  349.                           -webkit-border-bottom-right-radius: 0em;
  350.                           -webkit-border-bottom-left-radius: 0.625em;
  351.                           
  352.                           -moz-border-radius-topleft: 0.625em;
  353.                           -moz-border-radius-topright: 0em;
  354.                           -moz-border-radius-bottomright: 0em;
  355.                           -moz-border-radius-bottomleft: 0.625em;
  356.                           
  357.                           border-top-left-radius: 0.625em;
  358.                           border-top-right-radius: 0em;
  359.                           border-bottom-right-radius: 0em;
  360.                           border-bottom-left-radius: 0.625em;                       
  361.                          }
  362.         #MoreTab
  363.                         { 
  364.                           /*border-style:solid;*/
  365.                           padding-top:1%;
  366.                           background: #7EB3E0; 
  367.                           text-justify: auto;
  368.                           
  369.                           border-top: 0.1875em solid #9CD6F3;
  370.                           border-right: 0.1875em solid #9CD6F3;
  371.                           border-bottom: 0.0625em solid #286090;
  372.                           border-left: 0.1875em solid #7EB3E0;
  373.                           
  374.                           /*border-radius: 0.625em 0em 0em 0.625em;*/
  375.                           /*http://css-tricks.com/almanac/properties/b/border-radius/*/  
  376.                           -webkit-border-top-left-radius: 0.625em;
  377.                           -webkit-border-top-right-radius: 0em;
  378.                           -webkit-border-bottom-right-radius: 0.625em;
  379.                           -webkit-border-bottom-left-radius: 0.625em;
  380.                           
  381.                           -moz-border-radius-topleft: 0.625em;
  382.                           -moz-border-radius-topright: 0em;
  383.                           -moz-border-radius-bottomright: 0.625em;
  384.                           -moz-border-radius-bottomleft: 0.625em;
  385.                           
  386.                           border-top-left-radius: 0.625em;
  387.                           border-top-right-radius: 0em;
  388.                           border-bottom-right-radius: 0.625em;
  389.                           border-bottom-left-radius: 0.625em;                       
  390.                          } 
  391.                                                           
  392.  
  393.         
  394. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  395. /* CONTENT - Organizational Style, Positioning and Size                                      */
  396. /* (raw web page content goes here)                                                          */
  397. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/      
  398.  
  399.         #content         { 
  400.                           height: 100%;
  401.                            /*max-width: 82%;*/
  402.                            min-width: 34.375em;
  403.                            /*min-height: 60em;*/
  404.                            margin-left: 13.125em; /*this must match the navigation width*/
  405.                            margin-right: 0em; 
  406.                            margin-bottom: 1%;                         
  407.                            padding-top: 1.0625em;
  408.                            padding-right: 1.0625em;
  409.                            padding-bottom: 1.0625em;
  410.                            padding-left: 1.0625em;  
  411.                            background: #FFFFFF; 
  412.                            border: 0.1875em solid #286090;
  413.                            /*border-left:hidden;*/
  414.                            border-radius: 0em 0.625em 0.625em 0.625em;
  415.                            -ms-border-radius: 0em 0.625em 0.625em 0.625em; 
  416.                            -moz-border-radius: 0em 0.625em 0.625em 0.625em; 
  417.                            -webkit-border-radius: 0em 0.625em 0.625em 0.625em; 
  418.                            -khtml-border-radius: 0em 0.625em 0.625em 0.625em;                                                   
  419.                          }  
  420.         #content p       { padding-left: 1.25em; padding-right: 1.25em;  text-justify: auto; }
  421.         .contentindent     { padding-left: 2.5em; padding-right: 1.25em;}
  422.         /*#content a:hover{ background-color:#FFFFFF; }*/   
  423.  
  424. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  425. /* WB_NEWS - Organizational Style, Positioning and Size                                      */
  426. /* ( Contains WinBatch News Items )                                                          */
  427. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
  428.                                                    
  429.         #wb_news         { 
  430.                            float: right; 
  431.                            width: 10%;
  432.                            height: 10%;
  433.                            min-width: 20em; 
  434.                            background: #9CD6F3;  
  435.                            border-radius: 0.625em 0.625em 0.625em 0.625em;
  436.                            -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  437.                            -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  438.                            -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  439.                            -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em;  
  440.                            padding: 0.625em; 
  441.                            margin-left: 1.25em; 
  442.                          } 
  443.         #wb_news small     { font-size: 0.68em;  } 
  444.         #wb_news p       { text-justify: auto; }
  445.         #wb_news h3      { text-align: center; }
  446.         
  447.         #wb_news img     { padding:0em 0em 0em 0em; margin-top:-1em; margin-bottom:0em;}
  448.         
  449.         #wb_news button  { 
  450.                            background: #9CD6F3;
  451.                            margin-right: auto; 
  452.                            margin-left: auto; 
  453.                            padding: 0.5em;
  454.                            width: 100%;
  455.                            color:#FFFFFF;
  456.                            font-size: 1.875em;
  457.                            border-style:hidden;
  458.                            border-radius: 0.625em 0.625em 0.625em 0.625em;
  459.                            -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  460.                            -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  461.                            -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  462.                            -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em;  
  463.                           }
  464.        #wb_news button:hover { background-color:#7EB3E0; }
  465.        /*#wb_news button:after { content: "\00BB"; }*/
  466.   
  467.  
  468.  
  469.  
  470. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  471. /* FOOTER - Organizational Style, Positioning and Size                                       */
  472. /* ( Contains WinBatch News Items )                                                          */
  473. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/        
  474.  
  475.         #footer            { color:#286090; background: inherit;  clear: both; width: 100%; } 
  476.         #footer a        { text-decoration:none; }
  477.         #footer a:hover    { text-decoration:underline; }
  478.         /*#footer    p        { color: #7EB3E0; }/*{ color: #7EB3E0; margin: 0; padding: 0 1.125em 0.625em; }*/
  479.         #footer ul        { list-style: none; margin: 0 1.125em 0.375em; padding: 0.625em 0em 0.375em; }
  480.         #footer li        { display: inline; padding-right: 0.3125em; } 
  481.  
  482.  
  483.         
  484. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  485. /* IN PAGE Elements ( Elements, Style, Positioning and Size used in raw web pages)           */
  486. /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/       
  487.         
  488.     /* -----------------------------------------------------------------------------------*/
  489.     /* LISTS - Styles, Positioning and Size                                               */
  490.     /* -----------------------------------------------------------------------------------*/ 
  491.         
  492.         /*  inpagelinks                                                                       */
  493.         /*  (used in hints.htm and filenotfound.htm)                                          */
  494.         /*  bulleted list using arrows ( arrow image is 20x20 pixels )                        */ 
  495.         #inpagelinks ul    {
  496.                               margin: 1.25em; padding: 0em;
  497.                               list-style-type: none;
  498.                            }
  499.         #inpagelinks ul li {
  500.                               margin: 0em; padding: 0em;
  501.                               background: url('Images/tn_BluBlk-arrow01_right.jpg') no-repeat 0 0;
  502.                               padding-left:1.875em; /*calculate in size of bullet image*/
  503.                               padding-bottom:0.3125em;  
  504.                               min-height:1.25em;   /*calculate in size of bullet image*/
  505.                            }
  506.                
  507.  
  508.         /*  navilinks                                                                       */
  509.         /*  (used in download.htm,  products.htm and resellers.htm)                         */
  510.         /*  inline list                                                                     */ 
  511.         #navilinks         { 
  512.                               list-style-type: none; 
  513.                               text-align: center; 
  514.                               width:100%;
  515.                               min-width: 31.25em;
  516.                            }                
  517.         #navilinks ul li   { 
  518.                                
  519.                               display:inline-block;/*inline-block; Nicely wraps the data*/ 
  520.                               *display: inline;
  521.                               *zoom: 1;
  522.                               padding:0.3125em;  /*spaces around each element*/
  523.                               margin-top:0.3125em;
  524.                               white-space: nowrap; 
  525.                            }
  526.         #navilinks ul li a { 
  527.                              text-decoration: none; 
  528.                              color: #fff; 
  529.                              background-color: #286090; 
  530.                              padding:0.3125em;
  531.                              border-radius: 0.625em 0.625em 0.625em 0.625em; 
  532.                              -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  533.                              -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  534.                              -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  535.                              -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  536.                            }
  537.         #navilinks ul li a:hover { color: #fff; background-color: #7EB3E0; } 
  538.         
  539.    
  540.         
  541.        
  542.    /* -----------------------------------------------------------------------------------*/
  543.    /* TABLES - Styles, Positioning and Size                                               */
  544.    /* -----------------------------------------------------------------------------------*/
  545.         
  546.         /*  wwwtable                                                                          */
  547.         /*  (used in hints.htm, minrequirements.htm and quickstart.htm)                                  */
  548.         .wwwtable
  549.                     {
  550.                     width:85%;
  551.                     border-collapse:collapse;
  552.                     margin-left:auto;
  553.                     margin-right:auto;                       
  554.                     }
  555.         .wwwtable td
  556.                     {
  557.                     font-size:1em;
  558.                     border:0.0625em solid #286090;
  559.                     padding:0.1875em 0.4375em 0.1875em 0.4375em;
  560.                     }
  561.         .wwwtable th 
  562.                     {
  563.                     font-size:1.1em;
  564.                     text-align:center;
  565.                     padding-top:0.3125em;
  566.                     padding-bottom:0.25em;
  567.                     padding-left:0.25em;
  568.                     border:0.0625em solid #ffffff;
  569.                     background-color:#286090;
  570.                     color:#ffffff;
  571.                     }
  572.         .wwwtable tr.alt td 
  573.                     {
  574.                     color:#000000;
  575.                     background-color:#9CD6F3;
  576.                     }
  577.  
  578.         /*  downloadtable                                                                          */
  579.         /*  ( used in download.htm )                                                               */           
  580.                           
  581.         .downloadtable      { width:100%; padding-left:0.625em;  }
  582.         .downloadtable .zipinfo { font-family:Courier; color:#0F2A41 }
  583.         
  584.         .downloadtable td   
  585.                             {   
  586.                               font-size:1em; 
  587.                               border:0;
  588.                               border-radius: 0.625em 0.625em 0.625em 0.625em; 
  589.                              -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  590.                              -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  591.                              -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  592.                              -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  593.                             }
  594.         .downloadtable td.title       
  595.                             {  width:15%; min-width:15%; color:#0F2A41; background-color:#ffffff; text-align:center; font-weight:bold;}
  596.         .downloadtable td.description 
  597.                             { background-color:#7EB3E0; padding: 0.3125em 0.625em 0.3125em 0.625em;}
  598.         .downloadtable td.protocol    
  599.                             { width: 3.125em; text-align:right; color:#000000; background-color:#9CD6F3; padding: 0.3125em 0.625em 0.3125em 0.625em;                                       
  600.                             -webkit-border-top-right-radius: 0em;
  601.                             -webkit-border-bottom-right-radius: 0em;
  602.                             -moz-border-radius-topright: 0em;
  603.                             -moz-border-radius-bottomright: 0em;
  604.                             border-top-right-radius: 0em;
  605.                             border-bottom-right-radius: 0em;
  606.                             }
  607.         .downloadtable td.url         
  608.                             { font-family: Courier; color:#000000; background-color:#9CD6F3; padding: 0.3125em 0.625em 0.3125em 0.625em;
  609.                             -webkit-border-top-left-radius: 0em;
  610.                             -webkit-border-bottom-left-radius: 0em;
  611.                             -moz-border-radius-topleft: 0em;
  612.                             -moz-border-radius-bottomleft: 0em;
  613.                             border-top-left-radius: 0em;
  614.                             border-bottom-left-radius: 0em;
  615.                             }
  616.                             
  617.         .downloadtable td.blank       
  618.                             {  background-color:#ffffff; padding-top:0.625em;padding-bottom:0.625em;}
  619.                             
  620.         /*  resellertable                                                                          */
  621.         /*  ( used in functions.htm, resellers.htm and userlinks.htm )                                                               */ 
  622.         
  623.         .resellertable {
  624.                             margin:0em;
  625.                             padding:0em;
  626.                             width:100%;
  627.                             }
  628.        .resellertable table{
  629.                             border-collapse: collapse;
  630.                             border-spacing: 0;
  631.                             width:100%;
  632.                             height:100%;
  633.                             margin:0em;padding:0em;
  634.                             }
  635.        .resellertable tr:nth-child(odd){ background-color:#9CD6F3; }
  636.        .resellertable tr:nth-child(even) { background-color:#7EB3E0; }
  637.        .resellertable td{
  638.        
  639.                            vertical-align:text-top; /*necessary for functions.html */
  640.                             /*border:0.0625em solid #000000;*/
  641.                             text-align:left;
  642.                             padding:0.625em;
  643.                             color:#000000;
  644.                             border-radius: 0.625em 0.625em 0.625em 0.625em; 
  645.                            -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  646.                            -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  647.                            -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  648.                            -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em;
  649.                         }
  650.         .resellertable td.country { text-align:right; font-weight:bold; width:9.375em;  }
  651.         
  652.                                      
  653.  
  654.                           
  655.         /*  commerceformtable                                                                      */
  656.         /*  (used in commerce webpages: baddress)                                                  */
  657.         .commerceformtable   {
  658.                             /*font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;*/
  659.                             width:70%;
  660.                             min-width:18.75em;
  661.                             margin-left:1.25em;
  662.                             margin-right:1.25em; 
  663.                             text-align:left;
  664.                             border-collapse:collapse;    
  665.                         }
  666.         .commerceformtable th
  667.                         {
  668.                           text-align:center;
  669.                           vertical-align:text-top;  
  670.                         }
  671.         .commerceformtable td
  672.                         {  border:0.0625em solid #286090; padding:0.3125em 0.625em 0.3125em 0.625em;  }
  673.                   
  674.         .commerceformtable td.qty       
  675.                             { text-align:center; font-weight:bold; width:15%; min-width:4.6875em; }
  676.         .commerceformtable td.description 
  677.                             { text-align:left; font-weight:bold; width:75%; min-width:9.375em; }
  678.         .commerceformtable td.price    
  679.                             { text-align:right; font-family: monospace; white-space: pre; width:15%; min-width:4.6875em; }
  680.         .commerceformtable td.priceleft    
  681.                             { text-align:left; font-family: monospace; white-space: pre; width:15%; min-width:4.6875em; }
  682.  
  683.  
  684.         /*  commerceaddrtable                                                                      */
  685.         /*  (used in commerce webpages: baddress)                                                  */
  686.         .commerceaddrtable   {
  687.                                   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  688.                                   width:40em;
  689.                                   min-width:30em;
  690.                                   margin-left:1.25em;
  691.                                   margin-right:1.25em; 
  692.                                   
  693.                                   vertical-align: text-top;                      
  694.                               }
  695.         .commerceaddrtable th {   width:160px; text-align: left;  }
  696.         .commerceaddrtable th.required { color:#800000; }
  697.  
  698.         .commerceaddrtable input, textarea {
  699.                                   width : 100%;
  700.                                   margin: 0;
  701.                                   -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
  702.                                   -moz-box-sizing: border-box; /* For all Gecko based browsers */
  703.                                    box-sizing: border-box;
  704.          }
  705.  
  706.  
  707.  
  708.         /*  commerceaddrtableold                                                                      */
  709.         /*  (used in commerce webpages: baddress)                                                  */
  710.         .commerceaddrtable    {
  711.                                   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  712.                                   width:70%;
  713.                                   min-width:18.75em;
  714.                                   margin-left:1.25em;
  715.                                   margin-right:1.25em; 
  716.                                   text-align:left;                      
  717.                               }
  718.         .commerceaddrtable th
  719.                               {
  720.                                   text-align:left;
  721.                                   vertical-align:text-top;  
  722.                               }
  723.         .commerceaddrtable th.required
  724.                               { 
  725.                                   color:#800000;
  726.                                   text-align:left;
  727.                                   vertical-align:text-top;  
  728.                               }                              
  729.         .commerceaddrtable td {  }
  730.  
  731.  
  732.         
  733.  
  734.  
  735.         /*  commerceCCtable                                                                      */
  736.         /*  (used in commerce webpages: ccreditcard)                                                  */
  737.         .commerceCCtable    {
  738.                                   /*font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;*/
  739.                                   width:18.75em;
  740.                                   min-width:18.75em;
  741.                                   margin-left:auto;
  742.                                   margin-right:auto; 
  743.                                   text-align:left;                      
  744.                               }
  745.         .commerceCCtable th
  746.                               {
  747.                                   text-align:left;
  748.                                   vertical-align:text-top;  
  749.                               }
  750.         .commerceCCtable td {  }
  751.                   
  752.  
  753.          /*  commercedownloadtable                                                                      */
  754.         /*  (used in commerce webpages: compilers\afrontpage.htm )                                      */
  755.         .commercedownloadtable    {
  756.                                   font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  757.                                   /*width:70%;
  758.                                   min-width:18.75em;
  759.                                   margin-left:1.25em;
  760.                                   margin-right:1.25em; 
  761.                                   text-align:left;
  762.                                        */
  763.                               }
  764.         .commercedownloadtable th
  765.                               {
  766.                                   text-align:left;
  767.                                   vertical-align:text-top;  
  768.                               }
  769.         .commercedownloadtable th.required
  770.                               { 
  771.                                   color:#800000;
  772.                                   text-align:left;
  773.                                   vertical-align:text-top;  
  774.                               }                              
  775.         .commercedownloadtable td {  }
  776.      
  777.     /*  wwwForm                                                              */
  778.     /*  (used in commerce webpages: afrontpage)                               */ 
  779.         .wwwForm fieldset
  780.                              {
  781.                                       
  782.                                       width: 50%;
  783.                                       min-width:50em;
  784.                                       margin-left: auto;
  785.                                       margin-right: auto;
  786.                                       padding: 0.625em;
  787.                                       color:#7EB3E0;
  788.                              }
  789.  
  790.       .wwwForm legend
  791.                              {
  792.                                       font-weight:bold;         
  793.                                       color:#286090;
  794.                              }
  795.  
  796.       .wwwForm input { display: block; }
  797.   
  798.         /*  printablecontent                                                                              */
  799.         /*  (used in commerce webpages: purchaserequest)                                                  */  
  800.         #printablecontent { 
  801.                              height:50%;
  802.                              min-width:34.375em;
  803.                              margin:0.625em 0.625em 0.625em 0.625em;
  804.                              padding:1.25em 1.25em 1.25em 1.25em;
  805.                              background: #FFFFFF; 
  806.                              border: 0.1875em solid #9CD6F3;
  807.                              border-radius: 0.625em 0.625em 0.625em 0.625em;
  808.                              -ms-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  809.                              -moz-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  810.                              -webkit-border-radius: 0.625em 0.625em 0.625em 0.625em; 
  811.                              -khtml-border-radius: 0.625em 0.625em 0.625em 0.625em;                                                   
  812.                             }  
  813.                             
  814.                             
  815.        /* Hide email*/
  816.       e_addr::after {content: attr(data-domain);}
  817.       e_addr::before {content: attr(data-user) "\0040";}
  818.  
  819.  
  820.  
  821.                 
  822.  
  823.                 
  824.         
  825.   
  826.         
  827.    
  828.  
  829.