/* @group reset */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b2 | 201101
   NOTE: THIS IS A BETA VERSION (see previous line)
   USE WITH CAUTION AND TEST WITH ABANDON */

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;
}

a {
  outline: none; /* remove dotted line*/
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

ul {
	list-style-type: none;
}

/* @end */

/* @group grid */

#header {
	height: 76px;
	background: #3C4146;
}

#content {
	padding-top: 30px;
	background: white;
	min-height: 300px; /* Delete later */
}

#footer {
	clear: both;
	height: 80px;
	padding: 70px 0 0 0;
	background: url(../graphics/footer-bg.png) repeat-x;
}

.inside {
	width: 962px;
	margin: 0 auto 0 auto;
}

.headline {
	height: 46px;
	border-bottom: 1px solid #DCDCD7;
}

.box-100,
.box-50-50,
.box-25-75,
.box-25-50-25,
.box-25-25-25-25 {
	clear: both;
	width: 962px;
	padding: 30px 0 0 0;
}

.box-50-50 .left {
	width: 466px;
	float: left;
}

.box-50-50 .right {
	width: 466px;
	float: right;
}

.box-25-75 .left {
	width: 218px;
	float: left;
}

.box-25-75 .right {
	width: 714px;
	float: right;
}

.box-25-50-25 .left {
	width: 218px;
	float: left;
}

.box-25-50-25 .center {
	width: 466px;
	float: left;
	margin-left: 30px;
}

.box-25-50-25 .right {
	width: 218px;
	float: right;
}

.box-25-25-50 .left {
	width: 218px;
	float: left;
	margin-right: 30px;
}

.box-25-25-50 .right {
	width: 466px;
	float: right;
}

.box-25-25-25-25 .left {
	width: 218px;
	float: left;
	margin-right: 30px;
}

.box-25-25-25-25 .right {
	width: 218px;
	float: right;
}

p.text-50 {
	width: 466px;
	float: left;
	margin-right: 30px;
}

/* @end */

/* @group type */

body {
	background: #2D3237;
    font-family: "rooney-web-1","rooney-web-2", Georgia, sans-serif;
    font-size: 14px;
    line-height: 20px;
   	color: #2D3237;
   	padding: 0 0 10px 0;
}

p {
	padding-bottom: 10px;
}

a:link, a:visited {
	color: #2493A5;
	text-decoration: none;
}

a:hover {
   	color: #2D3237;
	border-bottom: 1px solid #2493A5;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

h2 {
	font-size: 34px;
	line-height: 38px;
	font-weight: bold;
	padding: 0 0 10px 0;
}

h2.h2-camingodos {
	display: block;
	float: left;
	width: 714px;
	height: 36px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../graphics/h2-camingodos.png) no-repeat;
}

h2.h2-camingodos-scd {
	display: block;
	float: left;
	width: 714px;
	height: 36px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../graphics/h2-camingodos-scd.png) no-repeat;
}

h2.h2-camingodos-cd {
	display: block;
	float: left;
	width: 714px;
	height: 36px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../graphics/h2-camingodos-cd.png) no-repeat;
}

h2.h2-rooney {
	display: block;
	float: left;
	width: 714px;
	height: 36px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../graphics/h2-rooney.png) no-repeat;
}

body.home h2 {
	display: block;
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #2D3237;
	padding: 0;
}

h3 {
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	font-size: 20px;
	line-height: 24px;
	color: #2D3237;
	margin: 0 0 15px 0;
}

h4 {
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #96989B;
	margin: 6px 0 20px 0;
}

a.arrow-link {
	padding-left: 16px;
	text-decoration: none;
	background: url(../graphics/links-bullets.png) -200px -45px no-repeat;
}

a.arrow-link:hover,
a.arrow-link:active {
	border: none;
   	color: #2D3237;
	background-position: -200px 5px;
}

a.pdf-link {
	padding-left: 16px;
	text-decoration: none;
	background: url(../graphics/links-bullets.png) 0 -246px no-repeat;
}

a.pdf-link:hover,
a.pdf-link:active {
	border: none;
   	color: #2D3237;
	background-position: 0 -196px;
}

a.zoom-link {
	padding-left: 16px;
	text-decoration: none;
	background: url(../graphics/links-bullets.png) -199px -246px no-repeat;
}

a.zoom-link:hover,
a.zoom-link:active {
	border: none;
   	color: #2D3237;
	background-position: -199px -196px;
}

a.button-try,
a.button-buy {
	display: block;
	float: right;
	width: 64px;
	height: 24px;
	margin: 8px 0 0 13px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	color: white;
	line-height: 24px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;	
}

a.button-try {
	background: #3C4146;
}

a.button-buy {
	background: #2493A5;
}

a.button-try:hover {
	border: none;
	background: #64696E;
}

a.button-buy:hover {
	border: none;
	background: #1A707E;
}

a.button-try:active,
a.button-buy:active {
	margin-top: 9px;
}

a.gallery-thumb {
	display: none;
}

#footer p {
	padding-bottom: 0;
	font-size: 12px;
	line-height: 18px;
}

#footer p.logo-footer {
	width: 126px;
	height: 36px;
	background: url(../graphics/janfromm-logos.png) 0 -80px no-repeat;
	text-indent: -9000px;
	overflow: hidden;
}

::selection {
	background: #2493A5;
	color: white;
}

::-moz-selection {
	background: #2493A5;
	color: white;
}


/* @end */

/* @group header */

/* @group nav top level */

#nav-main {
	width: 962px;
	height: 76px;
	background: #505459;
}

#nav-main ul {
	list-style-type: none;
}

#nav-main ul li.toplevel {
	float: left;
	position: relative;
}

#nav-main ul li a#home {
	display: block;
	width: 232px;
	height: 76px;
	margin: 0 1px 0 1px;
	text-indent: -9000px;
	overflow: hidden;
	background: url(../graphics/janfromm-logos.png) no-repeat;	
}

#nav-main ul li a#typefaces,
#nav-main ul li a#projects,
#nav-main ul li a#about {
	display: block;
	height: 59px;
	padding: 17px 0 0 14px;
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	font-size: 17px;
	background: #3C4146;
	color: #A5A7A6;
	text-decoration: none;
}

#nav-main ul li a#typefaces,
#nav-main ul li a#projects {
	width: 233px;
	margin: 0 1px 0 0;
}

#nav-main ul li a#about {
	width: 217px;
}

#nav-main ul li a#home:hover,
#nav-main ul li a#home:active,
#nav-main.home ul li a#home {
	border: none;
	background-position: -232px 0;
}

#nav-main ul li a#typefaces:hover,
#nav-main ul li a#typefaces:active,
#nav-main ul li a#projects:hover,
#nav-main ul li a#projects:active,
#nav-main ul li a#about:hover,
#nav-main ul li a#about:active,
#nav-main.typefaces ul li a#typefaces,
#nav-main.design ul li a#projects,
#nav-main.about ul li a#about {
	border: none;
	color: #EBEBE6;
	background-color: #2D3237;
}

a.highlighted {
	color: #EBEBE6 !important;
	background-color: #2D3237 !important;
}


/* @end */

/* @group nav sub level */

#nav-main a:hover {
	border: none;
}

#nav-main li ul {
	display: none;
	position: absolute;
	left: 0;
	top: 76px;
	z-index: 3;
	width: 247px;
	background: url(../graphics/dropnav-bg.png);
	padding-bottom: 16px;
}

#nav-main li:hover ul {
	display: block;
}

#nav-main li ul a {
	display: block;
	margin: 0 0 0 14px;
	font-family: "rooney-web-1","rooney-web-2", Georgia, sans-serif;
	font-size: 14px;
	line-height: 24px;
	font-weight: bold;
	color: #A5A7A6;
	text-decoration: none;
	padding-left: 18px;
	background: url(../graphics/links-bullets.png) -200px -92px no-repeat;
}

#nav-main li ul a:hover {
	background-position: -200px -142px;
	color: #27A6BB;
}

#nav-main li ul a#type-rooney,
#nav-main li ul a#type-camingodos,
#nav-main li ul a#type-camingodos-scd,
#nav-main li ul a#type-camingodos-cd {
	display: block;
	width: 218px;
	height: 46px;
	padding: 0;
	text-indent: -9000px;
	overflow: hidden;
	margin: 0 0 0 14px;
	background: url(../graphics/typefaces-nav-bg.png) no-repeat;
}

#nav-main li ul a#type-camingodos {
	background-position: 0 -46px;
}

#nav-main li ul a#type-camingodos-scd {
	background-position: 0 -92px;
}

#nav-main li ul a#type-camingodos-cd {
	background-position: 0 -138px;
	margin-bottom: 10px;
}

/* HOVERED: */

#nav-main li ul a#type-rooney:hover {
	background-position: -247px 0;
}

#nav-main li ul a#type-camingodos:hover {
	background-position: -247px -46px;
}
#nav-main li ul a#type-camingodos-scd:hover {
	background-position: -247px -92px;
}
#nav-main li ul a#type-camingodos-cd:hover {
	background-position: -247px -138px;
}

/* @end */

/* @end */

/* @group lists */

ul#nav-sidebar li {
	width: 188px;
	border-bottom: 1px solid #DCDCD7;
	margin-bottom: 10px;
	padding-bottom: 10px;
}

ul#nav-sidebar a {
	display: block;
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	font-size: 16px;
	padding-left: 14px;
	background: url(../graphics/links-bullets.png) 0 -95px no-repeat;
	text-decoration: none;
}

ul#nav-sidebar a span {
	display: block;
	margin: 4px 0 0 0;
    font-family: "rooney-web-1","rooney-web-2", Georgia, sans-serif;
    font-size: 13px;
    line-height: 18px;
    font-style: italic;
	color: #6C6F73;
}

ul#nav-sidebar a:hover,
ul#nav-sidebar a:active,
ul#nav-sidebar.overview li#overview a,
ul#nav-sidebar.std li#std a,
ul#nav-sidebar.pro li#pro a,
ul#nav-sidebar.office li#office a,
ul#nav-sidebar.web li#web a {
	border: none;
   	color: #2D3237;
	background-position: 0 5px;
}

ul#nav-sidebar a:hover span,
ul#nav-sidebar a:active span {
   	color: #2D3237;
}

ul.link-list {
	width: 94px;
	float: left;
	margin: 0 30px 20px 0;
}

ul.link-list-25 {
	width: 218px;
	float: left;
}

ul.bullet-list {
	padding-bottom: 10px;
}

ul.bullet-list li {
	padding-left: 12px;
	background: url(../graphics/links-bullets.png) 0 -292px no-repeat;
}

/* @end */

/* @group teasers */

#home-about {
	width: 182px;
	height: 194px;
	padding: 18px 18px 0 18px;
	background: url(../graphics/home-about-bg.jpg) no-repeat;
}

#home-about strong {
	display: block;
	font-family: "camingodos-web-1","camingodos-web-2", Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #2D3237;
}

a.img-link {
	text-decoration: none;
}

a.img-link:hover,
a.img-link:active {
	border: none;
	text-decoration: none;
}

a.img-link p {
	color: #2493A5;
	line-height: 18px;
	-webkit-transition: color 0.2s ease;
	-moz-transition: color 0.2s ease;
	-o-transition: color 0.2s ease;
	transition: color 0.2s ease;

}

a.img-link img {
	border: 1px solid white;
	opacity: 1;
	-webkit-transition: opacity .2s ease;
	-moz-transition: opacity .2s ease;
	-o-transition: opacity .2s ease;
	transition: opacity .2s ease;
}

a.img-link:hover p,
a.img-link:active p {
   	color: #2D3237;
}

a.img-link:hover img,
a.img-link:active img {
	border: 1px solid #96989B;
	opacity: 0.8;
}

body.home .box-100 a.img-link:hover,
body.home .box-100 a.img-link:active {
	opacity: 0.99;
}

/* @end */

.seperator {
	height: 20px;
	display:block;
	clear: both;
	border-bottom: 1px solid #DCDCD7;
}

.clear {
	clear: both;
}