/*doc
---
title: Download
name: 3-0_download
category: Unit Signature
---

<a class="button download" href="downloads/unit-sig-art.zip">unit-sig-art.zip</a> &nbsp; <a class="button download" href="downloads/unit-sig.css">unit-sig.css</a>  

MU logo and wordmark art files are included in `unit-sig-art.zip`. Download and extract to your `images` folder.
You will need create your own [unit art] [2-1_download] to replace the gold box in the examples below.
 
Download `unit-sig.css` and extract to your `css` folder. Edit this file to add rules for your custom unit art, 
include print options and IE8 fallback options. When using the reversed version, you still need to make a black 
text unit art graphic for printing.

**Note:** MU logo assets aren’t meant to be used at a different size than what they are marked. They have been [pixel hinted](http://www.webdesignerdepot.com/2014/03/the-designers-guide-to-pixel-hinting/) 
to be as sharp as possible. Any enlarging will distort the logo. 

*/
/*doc
---
title: 32px size
name: 3-1_unit_32
category: Unit Signature
---

The class `unit-sig-32` will style a signature with a 32px wide MU logo. 

```html_example 
<div class="unit-sig-32">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```
## Centered

For the centered version, add the `center` class.

```html_example 
<div class="unit-sig-32 center">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```

## Reversed 

For the white text version, add the `reverse` class.

```html_example 
<div class="unit-sig-32 reverse">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```

*/
.unit-sig-32 .logo,
.unit-sig-32 .wordmark,
.unit-sig-32 .unit {
  margin: 0;
}
.unit-sig-32 .logo a,
.unit-sig-32 .wordmark a,
.unit-sig-32 .unit a {
  display: block;
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  background-position: left 0;
  background-repeat: no-repeat;
}
.unit-sig-32.center .logo a,
.unit-sig-32.center .wordmark a,
.unit-sig-32.center .unit a {
  margin-left: auto;
  margin-right: auto;
}
.unit-sig-32 .wordmark,
.unit-sig-32 .unit {
  margin-left: 42px;
}
.unit-sig-32.center .wordmark,
.unit-sig-32.center .unit {
  margin-left: 0;
}
.unit-sig-32 .logo a {
  width: 34px;
  height: 38px;
  background-image: url('//law.missouri.edu/images/mu-logo-32-stroked.svg');
  /* Neagative margin for 1px rule alignment */
  margin-left: -1px;
  float: left;
  margin-bottom: 10px;
}
.unit-sig-32.center .logo a {
  float: none;
}
.unit-sig-32 .wordmark a {
  width: 149px;
  height: 17px;
  background-image: url('//law.missouri.edu/images/unit-wordmark-32.svg');
  margin-bottom: 10px;
}
.unit-sig-32.reverse .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-32-white.svg');
}
.unit-sig-32 .wordmark a:hover,
.unit-sig-32 .wordmark a:focus,
.unit-sig-32 .wordmark a:active {
  background-position: left -17px;
}
.unit-sig-32 .unit {
  /* Adjust the space between unit name and wordmark as needed */
  margin-bottom: 4px;
}
.unit-sig-32 .unit a {
  background-color: rgba(241, 184, 45, 0.5);
  /* Link to your 32px unit art file and set with and height */
  width: 300px;
  height: 27px;
  background-image: url('//law.missouri.edu/images/your-file-32.svg');
}
.unit-sig-32 .unit a:hover,
.unit-sig-32 .unit a:focus,
.unit-sig-32 .unit a:active {
  /* Set the height to match your unit art file */
  background-position: left -27px;
}
/* If you want this size to print out, include this */
@media print {
  .unit-sig-32 .logo a,
  .unit-sig-32 .wordmark a,
  .unit-sig-32 .unit a {
    position: relative;
    background: none;
  }
  .unit-sig-32 .logo a:after,
  .unit-sig-32 .wordmark a:after,
  .unit-sig-32 .unit a:after {
    text-indent: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .unit-sig-32 .logo a:after {
    content: url('//law.missouri.edu/images/mu-logo-32.svg');
  }
  .unit-sig-32 .wordmark a:after {
    content: url('//law.missouri.edu/images/unit-wordmark-32.svg');
  }
  /* Link to your 32px unit art file, black text version */
  .unit-sig-32 .unit a:after {
    content: url('//law.missouri.edu/images/your-file-32.svg');
  }
}
/* IE8 PNG fallback. Target with an ie8 class or place in your ie8 only stylesheet */
.ie8 .unit-sig-32 .logo a {
  background-image: url('//law.missouri.edu/images/mu-logo-32-stroked.png');
}
.ie8 .unit-sig-32 .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-32.png');
}
.ie8 .unit-sig-32.reverse .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-32-white.png');
}
.ie8 .unit-sig-32 .unit a {
  /* Link to your 32px unit art file */
  background-image: url('//law.missouri.edu/images/your-file-32.png');
}
/* If you want this size to print out in ie8, include this */
@media print {
  .ie8 .unit-sig-32 .logo a {
    background-image: url('//law.missouri.edu/images/mu-logo-32-stroked.png');
  }
  .ie8 .unit-sig-32 .wordmark a,
  .ie8 .unit-sig-32.reverse .wordmark a {
    background-image: url('//law.missouri.edu/images/unit-wordmark-32.png');
  }
  /* Link to your 32px unit art file, black text version */
  .ie8 .unit-sig-32 .unit a:after {
    content: url('//law.missouri.edu/images/your-file-32.png');
  }
}
/*doc
---
title: 48px size
name: 3-2_unit_48
category: Unit Signature
---

The class `unit-sig-48` will style a signature with a 48px wide MU logo. 

```html_example 
<div class="unit-sig-48">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```
## Centered

For the centered version, add the `center` class.

```html_example 
<div class="unit-sig-48 center">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```

## Reversed

For the white text version, add the `reverse` class.

```html_example 
<div class="unit-sig-48 center reverse">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```


*/
.unit-sig-48 .logo,
.unit-sig-48 .wordmark,
.unit-sig-48 .unit {
  margin: 0;
}
.unit-sig-48 .logo a,
.unit-sig-48 .wordmark a,
.unit-sig-48 .unit a {
  display: block;
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  background-position: left 0;
  background-repeat: no-repeat;
}
.unit-sig-48.center .logo a,
.unit-sig-48.center .wordmark a,
.unit-sig-48.center .unit a {
  margin-left: auto;
  margin-right: auto;
}
.unit-sig-48 .wordmark,
.unit-sig-48 .unit {
  margin-left: 63px;
}
.unit-sig-48.center .wordmark,
.unit-sig-48.center .unit {
  margin-left: 0;
}
.unit-sig-48 .logo a {
  width: 50px;
  height: 56px;
  background-image: url('//law.missouri.edu/images/mu-logo-48-stroked.svg');
  /* Neagative margin for 1px rule alignment */
  margin-left: -1px;
  float: left;
  margin-bottom: 15px;
}
.unit-sig-48.center .logo a {
  float: none;
}
.unit-sig-48 .wordmark a {
  width: 183px;
  height: 20px;
  background-image: url('//law.missouri.edu/images/unit-wordmark-48.svg');
  margin-bottom: 15px;
}
.unit-sig-48.reverse .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-48-white.svg');
}
.unit-sig-48 .wordmark a:hover,
.unit-sig-48 .wordmark a:focus,
.unit-sig-48 .wordmark a:active {
  background-position: left -20px;
}
.unit-sig-48 .unit {
  /* Adjust the space between unit name and wordmark as needed */
  margin-bottom: 5px;
}
.unit-sig-48 .unit a {
  /* Link to your 48px unit art file and set with and height */
  width: 320px;
  height: 32px;
  background-image: url('//law.missouri.edu/images/schooloflaw-48.svg');
}
.unit-sig-48 .unit a:hover,
.unit-sig-48 .unit a:focus,
.unit-sig-48 .unit a:active {
  /* Set the height to match your unit art file */
  background-position: left -32px;
}
/* If you want this size to print out, include this */
@media print {
  .unit-sig-48 .logo a,
  .unit-sig-48 .wordmark a,
  .unit-sig-48 .unit a {
    position: relative;
    background: none;
  }
  .unit-sig-48 .logo a:after,
  .unit-sig-48 .wordmark a:after,
  .unit-sig-48 .unit a:after {
    text-indent: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .unit-sig-48 .logo a:after {
    content: url('//law.missouri.edu/images/mu-logo-48.svg');
  }
  .unit-sig-48 .wordmark a:after {
    content: url('//law.missouri.edu/images/unit-wordmark-48.svg');
  }
  /* Link to your 48px unit art file, black text version */
  .unit-sig-48 .unit a:after {
    content: url('//law.missouri.edu/images/your-file-48.svg');
  }
}
/* IE8 PNG fallback. Target with an ie8 class or place in your ie8 only stylesheet */
.ie8 .unit-sig-48 .logo a {
  background-image: url('//law.missouri.edu/images/mu-logo-48-stroked.png');
}
.ie8 .unit-sig-48 .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-48.png');
}
.ie8 .unit-sig-48.reverse .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-48-white.png');
}
.ie8 .unit-sig-48 .unit a {
  /* Link to your 32px unit art file */
  background-image: url('//law.missouri.edu/images/your-file-48.png');
}
/* If you want this size to print out in ie8, include this */
@media print {
  .ie8 .unit-sig-48 .logo a {
    background-image: url('//law.missouri.edu/images/mu-logo-48-stroked.png');
  }
  .ie8 .unit-sig-48 .wordmark a,
  .ie8 .unit-sig-48.reverse .wordmark a {
    background-image: url('//law.missouri.edu/images/unit-wordmark-48.png');
  }
  /* Link to your 48px unit art file, black text version */
  .ie8 .unit-sig-48 .unit a:after {
    content: url('//law.missouri.edu/images/your-file-48.png');
  }
}
/*doc
---
title: 64px size
name: 3-3_unit_64
category: Unit Signature
---

The class `unit-sig-64` will style a signature with a 64px wide MU logo. 

```html_example 
<div class="unit-sig-64">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```
## Centered

For the centered version, add the `center` class.

```html_example 
<div class="unit-sig-64 center">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```

## Reversed

For the white text version, add the `reverse` class.

```html_example 
<div class="unit-sig-64 reverse">
    <p class="logo"><a href="http://missouri.edu">Mizzou Logo</a></p>
    <h1 class="unit"><a href="http://missouri.edu">Office of Programs</a></h1>
    <h2 class="wordmark"><a href="http://missouri.edu">University of Missouri</a></h2>
</div>
```


*/
.unit-sig-48 { margin-top:10px}

.unit-sig-64 .logo,
.unit-sig-64 .wordmark,
.unit-sig-64 .unit {
  margin: 0;
}
.unit-sig-64 .logo a,
.unit-sig-64 .wordmark a,
.unit-sig-64 .unit a {
  display: block;
  text-indent: 120%;
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  background-position: left 0;
  background-repeat: no-repeat;
}
.unit-sig-64.center .logo a,
.unit-sig-64.center .wordmark a,
.unit-sig-64.center .unit a {
  margin-left: auto;
  margin-right: auto;
}
.unit-sig-64 .wordmark,
.unit-sig-64 .unit {
  margin-left: 84px;
}
.unit-sig-64.center .wordmark,
.unit-sig-64.center .unit {
  margin-left: 0;
}
.unit-sig-64 .logo a {
  width: 66px;
  height: 74px;
  background-image: url('//law.missouri.edu/images/mu-logo-64-stroked.svg');
  /* Neagative margin for 1px rule alignment */
  margin-left: -1px;
  float: left;
  margin-bottom: 20px;
}
.unit-sig-64.center .logo a {
  float: none;
}
.unit-sig-64 .wordmark a {
  width: 243px;
  height: 26px;
  background-image: url('//law.missouri.edu/images/unit-wordmark-64.svg');
  margin-bottom: 20px;
}
.unit-sig-64.reverse .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-64-white.svg');
}
.unit-sig-64 .wordmark a:hover,
.unit-sig-64 .wordmark a:focus,
.unit-sig-64 .wordmark a:active {
  background-position: left -26px;
}
.unit-sig-64 .unit {
  /* Adjust the space between unit name and wordmark as needed */
  margin-bottom: 6px;
}
.unit-sig-64 .unit a {
  /* Link to your 64px unit art file and set with and height */
  width: 340px;
  height: 48px;
  background-image: url('//law.missouri.edu/images/schooloflaw-64.svg');
}
.unit-sig-64 .unit a:hover,
.unit-sig-64 .unit a:focus,
.unit-sig-64 .unit a:active {
  /* Set the height to match your unit art file */
  background-position: left -48px;
}
/* If you want this size to print out, include this */
@media print {
  .unit-sig-64 .logo a,
  .unit-sig-64 .wordmark a,
  .unit-sig-64 .unit a {
    position: relative;
    background: none;
  }
  .unit-sig-64 .logo a:after,
  .unit-sig-64 .wordmark a:after,
  .unit-sig-64 .unit a:after {
    text-indent: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .unit-sig-64 .logo a:after {
    content: url('//law.missouri.edu/images/mu-logo-64.svg');
  }
  .unit-sig-64 .wordmark a:after {
    content: url('//law.missouri.edu/images/unit-wordmark-64.svg');
  }
  /* Link to your 64px unit art file, black text version */
  .unit-sig-64 .unit a:after {
    content: url('//law.missouri.edu/images/your-file-64.svg');
  }
}
/* IE8 PNG fallback. Target with an ie8 class or place in your ie8 only stylesheet */
.ie8 .unit-sig-64 .logo a {
  background-image: url('//law.missouri.edu/images/mu-logo-64-stroked.png');
}
.ie8 .unit-sig-64 .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-64.png');
}
.ie8 .unit-sig-64.reverse .wordmark a {
  background-image: url('//law.missouri.edu/images/unit-wordmark-64-white.png');
}
.ie8 .unit-sig-64 .unit a {
  /* Link to your 32px unit art file */
  background-image: url('//law.missouri.edu/images/your-file-64.png');
}
/* If you want this size to print out in ie8, include this */
@media print {
  .ie8 .unit-sig-64 .logo a {
    background-image: url('//law.missouri.edu/images/mu-logo-64-stroked.png');
  }
  .ie8 .unit-sig-64 .wordmark a,
  .ie8 .unit-sig-64.reverse .wordmark a {
    background-image: url('//law.missouri.edu/images/unit-wordmark-64.png');
  }
  /* Link to your 64px unit art file, black text version */
  .ie8 .unit-sig-64 .unit a:after {
    content: url('//law.missouri.edu/images/your-file-64.png');
  }
}