/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Custom */

html { overflow-y:scroll; height:100%; }

body {
	background: #fff;
	min-height:100%; overflow:hidden;
	font-family: Montserrat, sans-serif;
	font-size: 15px;
	padding: 0px;
	margin: 0px;
	letter-spacing: -0.04em;
}

.Container {
	width: 1000px;
	margin: 0 auto;
}

/* Header */

.HeaderBar {
	width: 100%;
	background: #252525;
}

.HeaderBar h1 {
	height: 42px;
	line-height: 42px;
	margin:12px 0 13px;
}
.HeaderBar h1 a {
	display:block;
	color: #fff;
	font-weight: normal;
	height: 42px;
	overflow:hidden;
	font-size: 42px;
	line-height: 42px;
	text-transform: lowercase;
	text-decoration: none;
	letter-spacing: -0.06em;
	background-image: url('../images/Iconator2x.png');
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-size: 42px;
	padding-left: 54px;
}

.HeaderBar h1 a:hover { color: #2cd2c1; }

.HeaderBar h1 a { background-image:url('../images/Iconator.png')\9 } /* IE6/7/8/9 don't support background-size */

.HeaderBar h2 {
	display:block;
	color: #eee;
	font-weight: normal;
	height: 20px;
	font-size: 20px;
	line-height: 20px;
	text-transform: lowercase;
	margin:26px 0 0 30px;
}


.HeaderBar .Float.Right {
	padding-top: 25px;
}
.HeaderBar .Float.Right a {
	color: #ddd;
	font-weight: bold;
	text-decoration: none;
}

.AddBarTop { background-color:#393939; padding:10px 0; text-align:center; }

/* Document */

.DocumentBar {
	color: #222;
	background: #fff;
	font-weight: normal;
	line-height: 18px;
	padding:30px 0 40px;
}

/* Footer */

.FooterBar {
	padding: 30px 0;
	color: #fff;
	background: #252525;
	text-align: center;
	padding-bottom: 10000px;
	margin-bottom: -10000px;
}
.FooterBar .Float.Right a {
	color: #ccc;
	font-weight: bold;
	text-decoration: none;
}

/* SideBar */

.Sidebar {
	float: left;
	width: 300px;
	border-right: 1px solid #aaa;
	padding-right: 10px;
	margin-left:-20px;
}
.Sidebar h2 {
	font-weight: normal;
	font-size: 28px;
	margin-bottom: 20px;
	margin-left:20px;
}
.Sidebar ul {
	list-style-type: none;
}
.Sidebar ul li {
	background-image: none;
	padding-left: 16px; 
	font-size: 18px;
	padding: 8px 0 8px 20px;
}
.Sidebar ul li a {
	color: #444;
	text-decoration: none;
}
.Sidebar ul li.Current {
	background-image: url('../images/Arrowhead.png');
	background-repeat: no-repeat;
	background-position: 0px 11px; 
	font-size: 20px;
	padding: 10px 0 10px 20px;
}
.Sidebar ul li.Current a {
	color: #2cd2c1;
	font-weight: bold;
	text-decoration: none;
}

.Sidebar .BrowseBox {
	height: 450px;	
	overflow-y: auto;
}

/* Browsing */

.Browse {
	float: left;
	width: 689px;
	margin-left: 20px;
}
.Browse h2 {
	font-weight: normal;
	font-size: 28px;
	margin-bottom: 20px;
}
.Browse .BrowseBox {
	height: 450px;
	overflow-y: auto;
}
.Browse .BrowseBox .Item {
	width: 90px;
	background: #fff;
	border: 2px solid #fff;
	padding: 8px;
	float: left;
}
.Browse .BrowseBox .Item:hover {
	border: 2px solid #999;
	background: #eee;
}
.Browse .BrowseBox .Item a {
	text-decoration: none;
}
.Browse .BrowseBox .Item .Thumbnail {
	width: 70px;
	height: 70px;
	background: #222;
}
.Browse .BrowseBox .Item .Thumbnail img {
	width: 30px;
	height: 30px;
	padding: 20px;
}
.Browse .BrowseBox .Item .Title {
	color: #444;
	font-size: 16px;
	padding-top: 10px;
}
.Browse .BrowseBox .Item .Options {
	padding-top: 7px;
	height: 32px;
}
.Browse .BrowseBox .Item .Options img {
	display: none;
}
.Browse .BrowseBox .Item:hover .Options img {
	display: inline-block;
}

.BgChoice {
	background: #888;
	cursor: pointer;
}
.BgChoice:hover {
	background: #666;
}
.BgChoice.Selected {
	background: #2cd2c1;
}

.Hidden { display: none; }

/* Floats */

.Float.Left { float: left; }
.Float.Right { float: right; }
.Float.Middle { float: middle; }
.Float.Clear { clear: both; }

/* Headers */

h2 {
	font-weight: normal;
	font-size: 28px;
	margin-bottom: 20px;
	line-height: 20px;
}

/* Links */

a {
	color: #2cd2c1;
	font-weight: normal;
	text-decoration: none;
}
a:hover {
	color: #32bcae;
}

/* input.select */

input, textarea, select { font-family:inherit; }

select {
	border: 1px solid #aaa;
	padding: 3px;
	margin-top: -5px;	
	width: 150px;
}

/* input .color */

input.color {
	padding: 7px 12px;
	margin: 0px;
	border: 1px solid #999;
}
input.capprove {
	padding: 7px 12px 7px 13px;
	margin: 0px;
	border: 1px solid #999;
	background: #ddd;
}
input.capprove:hover {
	background: #bbb;
}

/* call to action */

.callaction {
	display: block;
	background-color: #2cd2c1;	
	font-weight: bold;
	font-size: 26px;
	line-height: 36px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
	color: #fff;
	
	padding: 9px;
}
.callaction:hover {
	text-decoration: none;
	background-color: #32bcae;
	color: #fff;
}

.callaction.png {
	padding-left: 55px;	
	background-image: url('../images/Format-PNG.png');
	background-repeat: no-repeat;
	background-position: 14px 10px;
}

.callaction.gif {
	padding-left: 55px;	
	background-image: url('../images/Format-GIF.png');
	background-repeat: no-repeat;
	background-position: 14px 10px;
}


/* scroll bars

	Thanks to the following website for this Custom Scrollbar CSS code.
	http://www.joomlavision.com/customize-browser-scrollbars-css3/
	
	All credit goes to them.
	
*/

::-webkit-scrollbar {
	width: 8px;
}
::-webkit-scrollbar-button {
	width: 8px;
	height:5px;
}
::-webkit-scrollbar-track {
	background: #fff;
	border: skinny plain lightgray;
	box-shadow: 0px 0px 3px #dfdfdf inset;
}
::-webkit-scrollbar-thumb {
	background: #888;
	border: skinny plain gray;
}
::-webkit-scrollbar-thumb:hover {
	background: #aaa;
}