Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>style guide: emerald</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:400,600" rel="stylesheet">
  <link rel="stylesheet" 
</head>
<body>
	<header class="banner">
    <div class="logo"></div>
    <div class="text_group">
		  <h2 class="title_menu">style guide:</h2>
   	  <h1 class="theme_name">emerald</h1>
    </div>
    <div class="watermark"></div>
  </header><!--/.main-header-->  
  <div class="content top">
    <h2 class="title sec1">palette</h2>
    <div class="cntr palette">
      <div class="swtch bkgnd1">
        <span class="name">Background 1</span>
        <span class="hex">#07b57a</span>           
      </div>
      <div class="swtch bkgnd2">
        <span class="name">Background 2</span>
        <span class="hex">#129f6f</span>           
      </div>
      <div class="swtch bkgnd3">
        <span class="name">Background 3</span>
        <span class="hex">#10885c</span>           
      </div>
      <div class="swtch bkgnd4">
        <span class="name">Background 4</span>
        <span class="hex">#f8f8f8</span>         
      </div>
      <div class="swtch sc1">
        <span class="name">State Color 1</span>
        <span class="hex">#aff6cf</span>         
      </div>
      <div class="swtch sc2">
        <span class="name">State Color 2</span>
        <span class="hex">#39c495</span>         
      </div>
      <div class="swtch sc3">
        <span class="name">State Color 3</span>
        <span class="hex">#9db9ad</span>         
      </div>
      <div class="swtch sc4">
        <span class="name">State Color 4</span>
        <span class="hex">#efefef</span>         
      </div>
    </div> <!------Palette End  ------->

    <h2 class="title sec2">series colors</h2>
    <div class="cntr series_colors">
      <div class="swtch series1">
        <span class="name">Series 1</span>
        <span class="hex">#648bab</span>           
      </div>
      <div class="swtch series2">
        <span class="name">Series 2</span>
        <span class="hex">#41c5d4</span>           
      </div>
      <div class="swtch series3">
        <span class="name">Series 3</span>
        <span class="hex">#56c69e</span>           
      </div>
      <div class="swtch series4">
        <span class="name">Series 4</span>
        <span class="hex">#fbcb42</span>         
      </div>
      <div class="swtch series5">
        <span class="name">Series 5</span>
        <span class="hex">#f2a05e</span>         
      </div>
      <div class="swtch series6">
        <span class="name">Series 6</span>
        <span class="hex">#f2655e</span>         
      </div>
      <div class="swtch series7">
        <span class="name">Series 7</span>
        <span class="hex">#6c5898</span>         
      </div>
    </div> <!-------- Series End  --------->
    </div> <!------Content Top End  ------->
    <div class="cntr content bottom">
    <div class="cntr left">    
      <div class="cntr fonts"> 
       <h2 class="title sec3">fonts</h2>
        <div class="text">
          <h3 class="subtitle">text</h3>
             <ul class="txtlist">
               <li>
                 <span class="col1">Primary Text</span>  
                 <span class="col2">1.2 REM Lato medium #212121</span>  
               </li>
               <li>
                 <span class="col1">Secondary Text</span>  
                 <span class="col2">1.2 REM Lato medium #757575</span>  
               </li> 
               <li>
                 <span class="col1">Empty Text</span>  
                 <span class="col2">1.2 REM Lato italic medium #757575</span>  
               </li>  
               <li>
                 <span class="col1">Disabled Text</span>  
                 <span class="col2">1.2 REM Lato medium #b8b8b8</span>  
               </li>                 
               <li>
                 <span class="col1">Dropdown Text</span>  
                 <span class="col2">1.2 REM Lato medium #07b57a</span>  
               </li>  
               <li class="clrback">
                 <span class="col1">Header Subtext</span>  
                 <span class="col2">1.2 REM Lato medium #AFF6CF</span>  
               </li>  
               <li class="allcaps">
                 <span class="col1">BUTTON 1 NORMAL</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #07b57a</span>  
               </li>  
               <li class="clrback allcaps">
                 <span class="col1">BUTTON 2 NORMAL</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #ffffff</span>  
               </li>  
               <li class="clrback allcaps">
                 <span class="col1">BUTTON HOVER</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #aff6cf</span>  
               </li>  
               <li class="clrback allcaps">
                 <span class="col1">BUTTON SELECTED</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #ffffff</span>  
               </li>  
               <li class="allcaps">
                 <span class="col1">BUTTON 1 DISABLED</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #99b2a7</span>  
               </li>  
               <li class="clrback allcaps">
                 <span class="col1">BUTTON 2 DISABLED</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #0f7f56</span>  
               </li>  
               <li class="allcaps">
                 <span class="col1">COLUMN HEADER</span>  
                 <span class="col2">1.2 REM Lato medium ALL CAPS #779589</span>  
               </li>  
               <li class="bold">
                 <span class="col1">Tab Normal</span>  
                 <span class="col2">1.2 REM Lato Bold #07B57A</span>  
               </li>  
               <li class="clrback bold">
                 <span class="col1">Tab Selected/Hover</span>  
                 <span class="col2">1.2 REM Lato Bold #ffffff</span>  
               </li>  
               <li class="bold">
                 <span class="col1">Tab Disabled</span>  
                 <span class="col2">1.2 REM Lato Bold #99b2a7</span>  
               </li>  
               <li class="bold">
                 <span class="col1">Chart Label 1</span>  
                 <span class="col2">1.2 REM Lato Bold #212121</span>  
               </li>  
               <li class="bold">
                 <span class="col1">Chart Label 2</span>  
                 <span class="col2">1.2 REM Lato Bold #757575</span>  
               </li>  
               <li class="clrback">
                 <span class="col1">Header</span>  
                 <span class="col2">1.4 REM Lato Medium #ffffff</span>  
               </li>       
               <li>
                 <span class="col1">List Footer</span>  
                 <span class="col2">1.4 REM Lato Medium #1c8964</span>  
               </li>
              </ul>
            </div><!------Text End  ------->
          <div class="hyperlinks">
            <h3 class="subtitle">hyperlinks</h3>
              <ul class="hyplist">
                <li>
                  <span class="col1">Hyperlink 1 Normal</span>  
                  <span class="col2">1.2 REM Lato medium #2196f3</span>  
                </li>
                <li>
                  <span class="col1">Hyperlink 1 Hover</span>  
                  <span class="col2">1.2 REM Lato medium #21baf3</span>  
                </li> 
                <li>
                  <span class="col1">Hyperlink 1 Focus</span>  
                  <span class="col2">1.2 REM Lato medium #2196f3</span>  
                </li>     
                <li class="clrback undrln">  
                  <span class="col1">Hyperlink 2 Normal</span>  
                  <span class="col2">1.2 REM Lato medium #aff6cf</span>  
                </li>
                <li class="clrback undrln">
                  <span class="col1">Hyperlink 2 Hover</span>  
                  <span class="col2">1.2 REM Lato medium #fffff</span>  
                </li> 
                <li class="clrback undrln">
                  <span class="col1">Hyperlink 2 Focus</span>  
                  <span class="col2">1.2 REM Lato medium #aff6cf</span>  
                </li>  
            </ul>
          </div><!------Hyperlink End  ------->
        </div><!------Fonts End  ------->
        <div class="cntr inputs">       
          <h2 class="title sec4">inputs</h2>
            <div class="cntr rad_check">        
              <h3 class="radnchk subtitle">radios and checkboxes</h3>
                <ul class="ulstates">
                  <li class="li_states">unchecked</li>
                  <li class="li_states">checked</li>              
                  <li class="li_states">disabled unchecked</li>    
                  <li class="li_states">disabled checked</li>
                  <li class="li_states">hover unchecked</li>
                  <li class="li_states">hover checked</li>              
                 </ul>
                 <div class="svglist"></div>
            </div><!----- Radio/Checkbox End  ------->
            <div class="cntr btn">
              <h3 class="subtitle">buttons</h3>
              <div class="cta button1">PRIMARY</div>
              <div class="cta button2">PRIMARY HOVER</div>     
              <div class="cta button3">SECONDARY</div>
              <div class="cta button4">SECONDARY HOVER</div>    
              <div class="cta button5">DISABLED</div>       
              <div class="cta button6">FOCUS</div>              
            </div><!----- Buttons End  ------->
            <div class="cntr textbox">        
              <h3 class="subtitle">text boxes</h3>
              <ul class="tbstates">
                <li class="tb_li_states">normal</li>
                <li class="tb_li_states">disabled</li>              
                <li class="tb_li_states">focus</li>    
                <li class="tb_li_states">required</li>       
              </ul>
              <div class="tb_divs">
                <div class="tb input1"></div>      
                <div class="tb input2"></div>    
                <div class="tb input3"></div>    
                <div class="tb input4"></div> 
              </div>
            </div><!----- Textbox End  ------->
            <div class="cntr dropdown">        
              <h3 class="subtitle">dropdown menu</h3>
              <ul class="ddstates">
                <li class="dd_li_states">Dropdown Menu <div class="arrow"></div></li>
                <li class="dd_li_states">Normal State</li>              
                <li class="dd_li_states">Hover State</li>    
                <li class="dd_li_states">Disabled State</li>       
              </ul>               
            </div><!----- Dropdown End  ------->          
          </div><!----- Inputs End  ------->     
       </div><!----- Left End  ------->           
      <div class="cntr right">   
        <div class="cntr icons">
          <h2 class="title sec5">icons</h2>
            <div class="cntr lgt_drk"> 
              <h3 class="subtitle">light on dark</h3>
              <div class="cntr icon_samples">       
                <div class="group1">
                  <span class="group1text">NORMAL</span>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>                  
                </div><!----- Group 1 End  ------->    
                <div class="group2">
                  <span class="group2text">HOVER</span>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>                  
                </div><!----- Group 2 End  ------->                    
                <div class="group3">
                  <span class="group3text">SELECTED</span>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>                  
                </div><!----- Group 3 End  ------->   
                <div class="group4">
                  <span class="group4text">DISABLED</span>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>
                  <div class="samp_icn"></div>                  
                </div><!----- Group 4 End  ------->                   
              </div><!----- Icon Samples End  ------->  
            </div><!----- Light on Dark End  ------->    
            <div class="cntr drk_lgt"> 
            <h3 class="subtitle">dark on light</h3>
            <div class="cntr icon_samples">   
              <div class="group5">
                <span class="group5text">NORMAL</span>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>                  
              </div><!----- Group 5 End  ------->    
              <div class="group6">
                <span class="group5text">HOVER</span>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>                  
              </div><!----- Group 6 End  ------->   
              <div class="group7">
                <span class="group5text">SELECTED</span>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>                  
              </div><!----- Group 7 End  ------->   
              <div class="group8">
                <span class="group5text">DISABLED</span>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>
                <div class="samp_icn"></div>                  
              </div><!----- Group 8 End  ------->                 
            </div><!----- Icon Samples End  ------->  
          </div><!----- Dark on Light End  ------->   
        </div><!----- Icons End  ------->                
        <div class="cntr examples">  
          <h2 class="title sec6">examples</h2>  
            <div class="cntr tabs">        
              <h3 class="tabshdr subtitle">tabs</h3>
                <ul class="tabscntr">
                  <li class="li_tab_states">Selected</li>
                  <li class="li_tab_states">Hover</li>              
                  <li class="li_tab_states">Normal</li>    
                  <li class="li_tab_states">Focus</li>
                  <li class="li_tab_states">Disabled</li>       
                </ul>
			</div><!----- Tabs End  -------> 				
            <div class="cntr lists">        
              <h3 class="listshdr subtitle">lists</h3>
                <div class="list_wpr">
                  <ul class="list_hdr">
                    <li class="li_hdr">My Employees</li> 
                    <li class="li_hdr"><div class="list_arrow"></div></li>
                  </ul>			  
                  <ul class="list_menu">
                    <li class="li_menu"><div class="add_icn"></div>Add</li>
                    <li class="li_menu"><div class="ed_icn"></div>Edit</li>              
                    <li class="li_menu"><div class="del_icn"></div>Delete</li>        
                  </ul>
                  <ul class="col_hdr">
                    <li class="li_col_hdr">Id</li>
                    <li class="li_col_hdr">First Name</li>              
                    <li class="li_col_hdr">Last Name</li> 
                    <li class="li_col_hdr">Email</li>      				  
                  </ul>			
                  <ul class="list_row1">
                    <li class="li_row1">001</li>
                    <li class="li_row1">Mike</li>              
                    <li class="li_row1">Talley</li> 
                    <li class="li_row1">miket@k2.com</li>      				  
                  </ul>	
                  <ul class="list_row2">
                    <li class="li_row2">002</li>
                    <li class="li_row2">Olaf</li>              
                    <li class="li_row2">Wagner</li> 
                    <li class="li_row2">olaf@k2.com</li>      				  
                  </ul>
                  <ul class="list_row3">
                    <li class="li_row3">003</li>
                    <li class="li_row3">Chet</li>              
                    <li class="li_row3">Brutvin</li> 
                    <li class="li_row3">chet@k2.com</li>      				  
                  </ul>	
                  <ul class="list_row4">
                    <li class="li_row4">004</li>
                    <li class="li_row4">Phil</li>              
                    <li class="li_row4">Jackson</li> 
                    <li class="li_row4">phil@k2.com</li>      				  
                  </ul>	
                  <ul class="list_ftr">		
                    <li class="li_row5"></li>
                  </ul>					
              </div><!----- List_wpr End  -------> 	
            </div><!----- Lists End  -------> 	
           <div class="cntr editor">        
              <h3 class="editor_hdr subtitle">editor</h3>
                <div class="editor_wpr">
                  <div class="editor_tlbr">
                    <div class="edit_tlbr icn1"></div>
                    <div class="edit_tlbr icn2"></div>
                    <div class="edit_tlbr icn3"></div>
                    <div class="edit_input box1">
                      <span>Lato Medium</span>
                      <div class="dd_arrow"></div>                     
                    </div>  
                    <div class="edit_input box2">
                      <span>12px</span>
                      <div class="dd_arrow"></div>                     
                    </div>  
                    <div class="edit_tlbr icn4"></div>
                    <div class="edit_tlbr icn5"></div>
                    <div class="edit_tlbr icn6"></div>     
                    <div class="edit_tlbr icn7"></div>    
                    <div class="edit_tlbr icn8"></div>   
                    <div class="edit_tlbr icn9"></div>    
                    <div class="edit_tlbr icn10"></div> 
                  </div><!----- Editor Hdr End  -------> 
                  <div class="edit_text_area">Type a value</div>                      
                  <ul class="ftr_menu">
                    <li class="ftr_li_menu"><div class="dsgn_icn"></div>Design</li>
                    <li class="ftr_li_menu"><div class="html_icn"></div>HTML</li>              
                    <li class="ftr_li_menu"><div class="pre_icn"></div>PREVIEW</li>        
                  </ul>
                  </div><!----- Editor Wpr End  -------> 
              </div><!----- Cntr Editor End  -------> 	
          </div><!----- Examples End  ------->             
       </div><!----- Right End  ------->  
    </div><!----- Content Bottom End  ------->  
</body>
              
            
!

CSS

              
                /*! .css v6.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main {
  /* 1 */
  display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
  margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
  font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
  font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

mark {
  background-color: #ff0;
  color: #000;
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
   ========================================================================== */

/**
 * Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

button,
html [type="button"],
/* 1 */ [type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details,
/* 1 */ menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* Hidden
   ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/*! End normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */

/*! Start Main.css */

/* ================================= 
  Base Element Styles
==================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font: normal 500 0.8125rem Lato;
  color: #212121;
}

h1 {
  font-size: 3.75rem;
  margin-top: 3rem;
  margin-left: 0.25rem;
}

h2 {
  font-size: 1.875rem;
}

h3 {
  font-size: 1.125rem;
}

h1,
h2,
h3 {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
}

ul {
  padding: 0;
  margin: 0;
}

/* ================================= 
       Icons and Backgrounds
==================================== */
/* ---------background--------- */
.arrow,
.list_arrow {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Dropdown16.png) center/1rem no-repeat;
}

.group1 div:nth-child(2),
.group3 div:nth-child(2),
.group6 div:nth-child(2),
.group7 div:nth-child(2) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_NormalDB.svg) no-repeat center;
}
.group1 div:nth-child(3),
.group3 div:nth-child(3),
.group6 div:nth-child(3),
.group7 div:nth-child(3) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_NormalDB.svg) no-repeat center;
}
.group1 div:nth-child(4),
.group3 div:nth-child(4),
.group6 div:nth-child(4),
.group7 div:nth-child(4) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_NormalDB.svg) no-repeat center;
}
.group1 div:nth-child(5),
.group3 div:nth-child(5),
.group6 div:nth-child(5),
.group7 div:nth-child(5) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_NormalDB.svg) no-repeat center;
}
.group1 div:nth-child(6),
.group3 div:nth-child(6),
.group6 div:nth-child(6),
.group7 div:nth-child(6) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_NormalDB.svg) no-repeat center;
}
.group1 div:nth-child(7),
.group3 div:nth-child(7),
.group6 div:nth-child(7),
.group7 div:nth-child(7) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_NormalDB.svg) no-repeat center;
}

.group2 div:nth-child(2),
.group2 div:nth-child(5) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_HoverDB.svg) no-repeat center;
}
.group2 div:nth-child(3),
.group2 div:nth-child(6) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_HoverDB.svg) no-repeat center;
}
.group2 div:nth-child(4),
.group2 div:nth-child(7) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_HoverDB.svg) no-repeat center;
}
.group4 div:nth-child(2),
.group4 div:nth-child(5) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_DisabledDB.svg) no-repeat center;
}
.group4 div:nth-child(3),
.group4 div:nth-child(6) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_DisabledDB.svg) no-repeat center;
}
.group4 div:nth-child(4),
.group4 div:nth-child(7) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_DisabledDB.svg) no-repeat center;
}
.group5 div:nth-child(2) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_NormalLB.svg) no-repeat center;
}
.group5 div:nth-child(3) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_NormalLB.svg) no-repeat center;
}
.group5 div:nth-child(4) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_NormalLB.svg) no-repeat center;
}
.group5 div:nth-child(5) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_NormalLB.svg) no-repeat center;
}
.group5 div:nth-child(6) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_NormalLB.svg) no-repeat center;
}
.group5 div:nth-child(7) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_NormalLB.svg) no-repeat center;
}
.group8 div:nth-child(2) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_DisabledLB.svg) no-repeat center;
}
.group8 div:nth-child(3) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_DisabledLB.svg) no-repeat center;
}
.group8 div:nth-child(4) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_DisabledLB.svg) no-repeat center;
}
.group8 div:nth-child(5) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SaveAs_DisabledLB.svg) no-repeat center;
}
.group8 div:nth-child(6) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_DisabledLB.svg) no-repeat center;
}
.group8 div:nth-child(7) {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Cut_DisabledLB.svg) no-repeat center;
}
.add_icn {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Add_NormalDB.svg) no-repeat center;
}
.ed_icn {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Edit_HoverDB.svg) no-repeat center;
}
.del_icn {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Delete_NormalDB.svg) no-repeat center;
}
.dd_arrow {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/DropdownLB16.png) center/1rem no-repeat;
}
.icn1 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Bold_NormalDB.svg) center/1.125rem no-repeat;
}
.icn2 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Italic_NormalDB.svg) no-repeat center;
}
.icn3 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Underline_NormalDB.svg) no-repeat center;
}
.icn4 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/JustifyLeft_NormalDB.svg) no-repeat center;
}
.icn5 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/JustifyCenter_NormalDB.svg) no-repeat center;
}
.icn6 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/JustifyRight_NormalDB.svg) no-repeat center;
}
.icn7 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/DecreaseIndent_NormalDB.svg) no-repeat center;
}
.icn8 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/IncreaseIndent_NormalDB.svg) no-repeat center;
}
.icn9 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/BulletList_NormalDB.svg) no-repeat center;
}
.icn10 {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/NumberList_NormalDB.svg) no-repeat center;
}
.dsgn_icn {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Edit_NormalDB.svg) no-repeat center;
}
.html_icn {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/Code_NormalLB.svg) no-repeat center;
}
.pre_icn {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/SearchDB16.png) center/1rem no-repeat;
}
.logo {
  background: url(http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/StyleGuideLogo.png) center/4.6875rem no-repeat;
}

.watermark {
  background: url('http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/StyleGuideLogo.svg') center/15.625rem no-repeat;
}

.svglist {
  background: url('http://peterzahn.com/wordpress_tools/wp-content/uploads/2018/05/RadiosAndChecks.svg') center/2.875rem 9.875rem no-repeat;
}

/* ---------background-size--------- */

.group1 div:nth-child(2),
.group3 div:nth-child(2),
.group6 div:nth-child(2),
.group7 div:nth-child(2),
.group1 div:nth-child(3),
.group3 div:nth-child(3),
.group6 div:nth-child(3),
.group7 div:nth-child(3),
.group1 div:nth-child(4),
.group3 div:nth-child(4),
.group6 div:nth-child(4),
.group7 div:nth-child(4),
.group2 div:nth-child(2),
.group2 div:nth-child(3),
.group2 div:nth-child(4),
.group4 div:nth-child(2),
.group4 div:nth-child(3),
.group4 div:nth-child(4),
.group5 div:nth-child(2),
.group5 div:nth-child(3),
.group5 div:nth-child(4),
.group8 div:nth-child(2),
.group8 div:nth-child(3),
.group8 div:nth-child(4),
.edit_tlbr,
.dd_arrow,
.icn2,
.icn3,
.icn4,
.icn5,
.icn6,
.icn7,
.icn8,
.icn9,
.icn10,
.dsgn_icn,
.html_icn,
.pre_icn {
  background-size: 1rem 1rem;
}

.group1 div:nth-child(5),
.group3 div:nth-child(5),
.group6 div:nth-child(5),
.group7 div:nth-child(5),
.group1 div:nth-child(6),
.group3 div:nth-child(6),
.group6 div:nth-child(6),
.group7 div:nth-child(6),
.group1 div:nth-child(7),
.group3 div:nth-child(7),
.group6 div:nth-child(7),
.group7 div:nth-child(7),
.group2 div:nth-child(5),
.group2 div:nth-child(6),
.group2 div:nth-child(7),
.group4 div:nth-child(5),
.group4 div:nth-child(6),
.group4 div:nth-child(7),
.group5 div:nth-child(5),
.group5 div:nth-child(6),
.group5 div:nth-child(7),
.group8 div:nth-child(5),
.group8 div:nth-child(6),
.group8 div:nth-child(7) {
  background-size: 1.8rem 1.8rem;
}

/* ================================= 
  Shared Styles
==================================== */

/* ---- margin / padding ---- */
.li_states,
.tb_li_states {
  padding-right: 0.3125rem;
}

.box2,
.dsgn_icn,
.html_icn,
.pre_icn {
  margin-right: 0.3125rem;
}

.title_menu,
.main-footer {
  margin-top: 1.875rem;
}

.clrback,
.hyplist li:nth-child(1):before,
.hyplist li:nth-child(6):before {
  margin-left: -0.625rem;
}

.cta,
.tb {
  margin-bottom: 0.625rem;
}

.dd_li_states,
.clrback,
.li_col_hdr:nth-child(-n + 3),
.li_row1:nth-child(-n + 3),
.li_row2:nth-child(-n + 3),
.li_row3:nth-child(-n + 3),
.li_row4:nth-child(-n + 3),
.li_col_hdr:nth-child(2),
.li_row1:nth-child(2),
.li_row2:nth-child(2),
.li_row3:nth-child(2),
.li_row4:nth-child(2) {
  padding-left: 0.625rem;
}

.li_col_hdr:nth-child(4),
.li_row1:nth-child(4),
.li_row2:nth-child(4),
.li_row3:nth-child(4),
.li_row4:nth-child(4) {
  padding-right: 0.625rem;
}

.swtch,
.group1,
.group2,
.group3,
.group4,
.group5,
.group6,
.group7,
.group8,
.list_hdr,
.list_wpr ul li.li_menu,
.ftr_li_menu {
  padding: 0.625rem;
}
/* ---------- background color ---------- */
.top,
.tb,
.group5,
.group8,
.tabscntr,
.li_row1,
.li_row2,
.li_row3,
.li_row4,
.edit_input,
.edit_text_area {
  background-color: #fff;
}

.button3,
.bkgnd4,
.bottom {
  background-color: #f8f8f8;
}

.sc1,
.li_row2 {
  background-color: #aff6cf;
}

.dd_li_states:nth-child(3),
.bkgnd1,
.clrback,
.button1,
.button4,
.button6,
.group1,
.group4,
.group6,
.li_tab_states:nth-child(2),
.list_hdr,
.editor_tlbr,
.list_menu,
.ftr_li_menu:nth-child(3) {
  background-color: #07b57a;
}

.bkgnd2,
.button2,
.group2,
li.li_menu:nth-child(2),
.icn6 {
  background-color: #129f6f;
}

.arrow,
.icn4,
.group3,
.group7,
.txtlist li:nth-child(10),
.bkgnd3,
.li_tab_states:nth-child(1),
.ftr_li_menu:nth-child(1) {
  background-color: #10885c;
}

/* ---------- border ---------- */

.button5,
.tb {
  border: 1px solid #ddd;
}

/*focus*/
.dd_li_states:nth-child(1),
.button6,
.input3,
.li_tab_states:nth-child(4) {
  border: 1px solid #10885c;
  box-shadow: 0 0 5px rgba(7, 181, 122, 0.7);
}

.li_col_hdr:nth-child(2),
.li_col_hdr:nth-child(3) {
  border-left: 1px solid #ececec;
}

/* ---------- color ---------- */

h1,
.dd_li_states:nth-child(3),
.swtch,
.txtlist li:nth-child(8),
.txtlist li:nth-child(10),
.txtlist li:nth-child(15),
.txtlist li:nth-child(19),
.hyplist li:nth-child(5),
.button1,
.button2,
.button4,
.button6,
.group1,
.group3,
.group6,
.group7,
.li_tab_states:nth-child(1),
.li_tab_states:nth-child(2),
.list_hdr,
.editor_tlbr,
.list_menu,
.li_row3,
.ftr_li_menu:nth-child(1),
.ftr_li_menu:nth-child(3) {
  color: #fff;
}

.hyplist li:nth-child(4),
.hyplist li:nth-child(6),
.txtlist li:nth-child(6),
.txtlist li:nth-child(9),
.hyplist li:nth-child(6):before,
.group2,
li.li_menu:nth-child(2) {
  color: #aff6cf;
}

.dd_li_states:nth-child(2),
.title,
.subtitle,
.txtlist li:nth-child(5),
.txtlist li:nth-child(7),
.txtlist li:nth-child(14),
.hyplist li:nth-child(1):before,
.li_states,
.tb_li_states,
.button3,
.input4:before,
.group5,
.li_tab_states:nth-child(3),
.li_tab_states:nth-child(4),
.edit_input,
.ftr_li_menu:nth-child(2) {
  color: #07b57a;
}

.bkgnd4,
.sc1,
.sc3,
.sc4,
.series4,
.series5 {
  color: #212121;
}

.txtlist li:nth-child(2),
.txtlist li:nth-child(3),
.txtlist li:nth-child(18) {
  color: #757575;
}

.txtlist li:nth-child(11),
.txtlist li:nth-child(16) {
  color: #99b2a7;
}

/* -------position------- */
h1,
.hex {
  position: absolute;
}

.swtch,
.icon_samples span,
.edit_input {
  position: relative;
}
/* -------line-height ------- */
li,
.ftr_li_menu {
  line-height: 1.5rem;
}

.dd_li_states,
.li_col_hdr,
.li_row1,
.li_row2,
.li_row3,
.li_row4,
.li_row5,
.edit_input span {
  line-height: 2.125rem;
}

/* -------height / width ------- */

.arrow,
.tb,
.li_row5,
.edit_input,
.dd_arrow {
  height: 2.125rem;
}

.banner,
.content,
.subtitle,
.sec3,
.sec4,
.sec5,
.sec6,
.radnchk,
.tabshdr,
.tabscntr,
.icon_samples span,
.tabs,
.lists,
.list_wpr,
.list_hdr,
.editor_tlbr,
.editor,
.editor_hdr {
  width: 100%;
}

.left,
.right {
  min-width: 30rem;
}

.dd_arrow,
.arrow {
  width: 2.125rem;
}

.group1,
.group2,
.group3,
.group4,
.group5,
.group6,
.group7,
.group8 {
  width: 11rem;
  height: 8rem;
}

.list_arrow,
.dsgn_icn,
.html_icn,
.pre_icn {
  height: 1.5rem;
  width: 1.5rem;
}

/* ----------font----------- */
.swtch,
.allcaps,
.ftr_li_menu {
  text-transform: uppercase;
}

/* ----------glyphs----------- */
.hyplist li:nth-child(1):before,
.hyplist li:nth-child(6):before {
  content: "\2022\00a0";
}

/* ================================= 
  Non-Shared Styles
==================================== */
/* ---- global ---- */

.content {
  padding: 1.875rem;
}

.title {
  line-height: 2rem;
  margin: 0;
}

.left {
  padding: 0.625rem 2.5rem 0.625rem 0.625rem;
  border-right: 1px solid #ddd;
}

.right {
  padding: 0.625rem 0.625rem 0.625rem 2.5rem;
}

.fonts,
.icons {
  border-bottom: 1px solid #ddd;
  padding-bottom: 2.5rem;
}

.inputs,
.examples {
  padding-top: 2rem;
}

/* ---- banner ---- */

.banner {
  height: 9.375rem;
  background-image: linear-gradient(130deg, #0ba771 0%, #0b7a52 70%);
  overflow: hidden;
}

.title_menu {
  color: #b8f0dd;
  margin-left: 0.5rem;
}

.watermark {
  height: 15.625rem;
  width: 15.625rem;
  transform: rotate(-15deg);
  opacity: 0.07;
  margin-left: auto;
  margin-right: 1.5rem;
}

.logo {
  height: 4.6875rem;
  width: 4.6875rem;
  margin-left: 2.5rem;
}

/* ---- colors section ---- */
.hex {
  bottom: 0.625rem;
  left: 0.625rem;
}

.sec1,
.sec2 {
  margin: 0 0 0.625rem 0.5rem;
}

.swtch {
  height: 9rem;
  width: 9rem;
  margin: 0.625rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.sc2 {
  background-color: #39c495;
}
.sc3 {
  background-color: #9db9ad;
}
.sc4 {
  background-color: #efefef;
}

.series1 {
  background-color: #648bab;
}
.series2 {
  background-color: #41c5d4;
}
.series3 {
  background-color: #56c69e;
}
.series4 {
  background-color: #fbcb42;
}
.series5 {
  background-color: #f2a05e;
}
.series6 {
  background-color: #f2655e;
}
.series7 {
  background-color: #6c5898;
}

.palette {
  margin-bottom: 2rem;
}

/* ---- fonts section ---- */

.col1 {
  min-width: 10rem;
}

.bold {
  font-weight: bold;
}
.undrln {
  text-decoration: underline;
}

.txtlist li:nth-child(3) {
  font-style: italic;
}
.txtlist li:nth-child(4) {
  color: #b8b8b8;
}
.txtlist li:nth-child(9) {
  background-color: #129f70;
}
.txtlist li:nth-child(12) {
  color: #0f7f56;
}
.txtlist li:nth-child(13) {
  color: #779589;
}
.txtlist li:nth-child(19) {
  font-size: 0.9375rem;
}
.txtlist li:nth-child(20) {
  color: #1c8964;
  font-size: 0.9375rem;
}
.hyplist li:nth-child(1),
.hyplist li:nth-child(3) {
  color: #2196f3;
}
.hyplist li:nth-child(2) {
  color: #21baf3;
}

/* ---- input section ---- */

.rad_check {
  width: 14.375rem;
}

.btn,
.textbox,
.dropdown {
  width: 16rem;
}

.li_states {
  line-height: 1.7rem;
}
.tb_li_states {
  line-height: 2.8rem;
}
span {
  padding-right: 1rem;
}

.svglist {
  width: 4.875rem;
  height: 10rem;
}

.cta {
  width: 7.25rem;
  height: 2.75rem;
  border-radius: 0.125rem;
  text-align: center;
  margin-right: 0.625rem;
  padding: 0 0.625rem;
  display: inline;
  line-height: 2.75rem;
}

.button2 {
  line-height: 1rem;
  padding-top: 0.4rem;
}
.button3 {
  border: 1px solid #07b57a;
}
.button4 {
  line-height: 1rem;
  padding-top: 0.4rem;
}
.button5 {
  background-color: #ececec;
  color: #85bca9;
}

.tb {
  width: 5.375rem;
}

.tbstates {
  width: 3rem;
  margin-top: -0.3rem;
}

.input2 {
  background-color: #f3f3f3;
}
.input4:before {
  content: "\002a\00a0";
  margin-left: -1.2rem;
  font-size: 2rem;
  line-height: 2.9rem;
}

.ddstates {
  width: 15.3125rem;
  height: 8.5rem;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  margin-top: 0;
  margin-bottom: 2.5rem;
}

.dd_li_states:nth-child(4) {
  color: #99b2a7;
}

.arrow {
  margin-left: 6.375rem;
}
/* ---- icons section ---- */
.samp_icn {
  height: 2rem;
  width: 2rem;
  margin: 0.3125rem 0.625rem;
}

.group4 {
  color: #0f7f56;
}
.group8 {
  color: #99b2a7;
}

/* ---- examples section ---- */

.list_wpr ul li.li_hdr:nth-child(n + 1) {
  margin-right: 0;
}

.tabscntr {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

.li_tab_states {
  padding: 0.625rem 1.25rem;
  font-weight: bold;
}
.li_tab_states:nth-child(5) {
  color: #99b2a7;
}

.list_wpr {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.list_wpr ul li:nth-child(4) {
  margin-right: 0;
}
.list_wpr ul li.li_menu {
  margin-right: 0;
}

.list_hdr {
  font-size: 0.9375rem;
  border-bottom: 1px solid #3ac093;
  border-radius: 0.125rem 0.125rem 0 0;
}

.list_menu {
  border-bottom: 1px solid #3ac093;
}
.list_menu div {
  background-size: 1rem 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
}

.li_col_hdr {
  color: #779589;
}
.li_col_hdr,
.li_row5 {
  background-color: #f5f5f5;
}
.li_row3 {
  background-color: #39c495;
}

.editor_wpr {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

.editor_tlbr {
  padding-left: 0.3125rem;
  font-size: 0.9375rem;
  border-radius: 0.125rem 0.125rem 0 0;
}

.edit_tlbr {
  height: 2.75rem;
  width: 2rem;
  padding: 0.625rem 0.3125rem 0.625rem 0.3125rem;
}

.edit_input {
  top: 0.3125rem;
  margin-right: 0.3125rem;
}
.edit_input span {
  font-size: 0.8125rem;
  padding: 0 0 0 0.625rem;
}

.box1 {
  margin-left: 0.3125rem;
}

.edit_text_area {
  padding: 0.95rem;
  height: 7rem;
}

.ftr_menu {
  background-color: #f5f5f5;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  .main-header,
  .row,
  .footer-inner {
    width: 80%;
    margin: 0 auto;
    max-width: 1150px;
  }
  .tagline {
    font-size: 1.4em;
  }
}

/*------@2ximages----*/
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 144dpi) {
  .arrow {
    background: #10885c url(../img/Dropdown16@2x.png) center/1rem no-repeat;
  }
  .list_arrow {
    background: url(../img/Dropdown16@2x.png) center/1rem no-repeat;
  }
  .dd_arrow {
    background: url(../img/DropdownLB16@2x.png) center/1rem no-repeat;
  }
}

/*------@3ximages----*/
@media (-webkit-min-device-pixel-ratio: 2.25), (min-resolution: 192dpi) {
  .arrow {
    background: #10885c url(../img/Dropdown16@3x.png) center/1rem no-repeat;
  }
  .list_arrow {
    background: url(../img/Dropdown16@3x.png) center/1rem no-repeat;
  }
  .dd_arrow {
    background: url(../img/DropdownLB16@3x.png) center/1rem no-repeat;
  }
}

/*! End Main.css */

/*! Start Flexbox.css */

/* ================================= 
  Base Flex Styles
==================================== */
.banner,
.text_group,
.cntr,
.bottom,
li,
.group1,
.group2,
.group3,
.group4,
.group5,
.group6,
.group7,
.group8,
.tabscntr,
.list_wpr,
.editor_wpr,
.editor,
.editor_wpr,
.editor_tlbr,
.edit_input,
.list_wpr ul,
.ftr_menu {
  display: flex;
}

.logo,
.watermark {
  align-self: center;
}

.text_group,
.left,
.right,
.lgt_drk,
.drk_lgt,
.icons,
.list_wpr,
.editor_wpr,
.editor {
  flex-direction: column;
}

.series_colors,
.palette,
.fonts,
.icons,
.inputs,
.icon_samples,
.examples,
.tabs,
.lists,
.lgt_drk,
.drk_lgt,
.rad_check,
.btn,
.textbox,
.dropdown,
.group1,
.group2,
.group3,
.group4,
.group5,
.group6,
.group7,
.group8,
.tabscntr,
.editor_tlbr {
  flex-wrap: wrap;
}

.col1,
.list_wpr ul.list_menu li.li_menu,
.list_wpr ul li:nth-child(4) {
  flex: 0;
}

.left,
.right,
.rad_check_wpr,
.col2 {
  flex: 1;
}

.text,
.hyperlinks,
.tbstates,
.editor_tlbr,
.list_wpr ul li {
  flex-grow: 1;
}

.tb_divs {
  flex-grow: 2;
}

.text,
.hyperlinks {
  flex-basis: 26rem;
}

.list_wpr ul li,
.list_wpr ul li:nth-child(4) {
  flex-basis: 25%;
}

.list_wpr ul li:nth-child(4) {
  justify-content: flex-end;
  flex-grow: 0;
}

.list_wpr ul li.li_hdr:nth-child(n + 1) {
  flex-basis: 50%;
}

.list_wpr ul li.li_hdr:nth-child(2) {
  justify-content: flex-end;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {
  .main-header,
  .main-nav {
    display: flex;
  }
  .main-header {
    flex-direction: column;
    align-items: center;
  }
}

@media (min-width: 1025px) {
  .main-header {
    flex-direction: row;
    justify-content: space-between;
  }
}

/*! End Flexbox.css */

              
            
!

JS

              
                
              
            
!
999px

Console