cr bjork crd co css (pro-standard)

---TOP WINDOW---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="title-bar">
<div class="title-bar-text">www.dollcrds.com</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>

---PROGRESS BAR 1---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div role="progressbar" class="marquee"></div>

---VOLUME---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="field-row" style="max-width: 300px">
<label>Volume:</label>
<label>Low</label>
<input type="range" min="1" max="11" value="5" />
<label>High</label>
</div>

---PROGRESS BAR 2---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div role="progressbar" class="animate">
<div style="width: 50%"></div>
</div>

---TABS WINDOW THINGIE (in separate container)---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<ul role="menu" class="can-hover" style="width: 200px">
<li role="menuitem" tabindex="0" aria-haspopup="true">View</li>
<li role="menuitem" tabindex="0" aria-haspopup="true">
Sort by
<ul role="menu">
<li role="menuitem"><a href="#menu">Name</a></li>
<li role="menuitem"><a href="#menu">Size</a></li>
<li role="menuitem"><a href="#menu">Item type</a></li>
<li role="menuitem"><a href="#menu">Date modified</a></li>
</ul>
</li>
<li role="menuitem" class="has-divider"><a href="#menu">Refresh</a></li>
<li role="menuitem" aria-disabled="true"><a href="#menu">Paste</a></li>
<li role="menuitem" aria-disabled="true" class="has-divider">
<a href="#menu">Paste shortcut</a>
</li>
<li role="menuitem">
<img src="https://img.icons8.com/color/18/000000/monitor--v1.png"/>
<a href="#menu">Screen resolution</a>
</li>
<li role="menuitem">
<img src="https://img.icons8.com/color/18/000000/virtual-machine2.png"/>
<a href="#menu">Gadgets</a>
</li>
<li role="menuitem">
<img src="https://img.icons8.com/color/18/000000/remote-desktop.png"/>
<a href="#menu">Personalize</a>
</li>
</ul>

---LIST BUTTONS 1---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="field-row">
<input id="radio19" type="radio" name="second-example">
<label for="radio19">text goes here</label>
</div>
<div class="field-row">
<input checked disabled id="radio20" type="radio" name="second-example">
<label for="radio20">text goes here</label>
</div>
<div class="field-row">
<input disabled id="radio21" type="radio" name="second-example">
<label for="radio21">text goes here</label>
</div>

---CHAT MESSAGE BUBBLE---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div role="tooltip">info info info info info</div>

---PROGESS BAR 3---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80">
<div style="width: 80%"></div>
</div>

---LIST BUTTONS 2---
<link rel="stylesheet" href="https://unpkg.com/7.css">
<div class="field-row">
<input id="radio17" type="radio" name="first-example">
<label for="radio17">blah blah</label>
</div>
<div class="field-row">
<input id="radio18" type="radio" name="first-example">
<label for="radio18">blah blah</label>
</div>