﻿* { box-sizing: border-box; -moz-box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-width: 300px; }
a { text-decoration: none; }
h1 { font-size: 1.8em; padding: 5px; margin: 5px 5px 10px 5px; border-radius: 5px; }
h2 { font-size: 1.2em; padding: 5px; margin: 10px 5px; border-radius: 5px; }
h3 { font-size: 1.1em; padding: 5px; }
input[type=text], select, textarea { border-radius: 5px; padding: 2px 5px; border: 1px solid #CCC; }
select, option { text-overflow: ellipsis; }
input[type=button], input[type=submit] { border-radius: 5px; padding: 2px 5px; }
input[type=button]:hover, input[type=submit]:hover { cursor: pointer; }
a img { border: none; } /* IE still does this */

/* CSS spec requires these be separate selectors */
input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; }
::-webkit-input-placeholder { text-overflow: ellipsis; }
:-ms-input-placeholder { text-overflow: ellipsis; }

/* Used in many things on IOER, useful here */
.grayBox { background-color: #EEE; border-radius: 5px; padding: 5px; margin-bottom: 5px; }
.grayBox .header { padding: 2px 10px; font-weight: bold; }
.grayBox .header.top { background-color: #333; color: #FFF; margin: -5px -5px 5px -5px; }
.grayBox .header.mid { background-color: #C5C6C8; color: #000; margin: 5px -5px 5px -5px; }
