/* @override 
	http://www.jan.dev/_themes/default/css/screen.css
*/

/* @group reset */

/* -- override browser default values -- */

:link, :visited {
  text-decoration: none;
}

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

a img, :link img, :visited img {
  border: none;
}

abbr, acronym, dfn {
  cursor: help; 
}


ul,ol {
  list-style: none;
}

h1,h2,h3,h4,h5,h6,pre,code,p {
  font-weight: normal;
  font-size: 100%;
}

ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
  margin: 0; padding: 0;
}

address {
  font-style: normal;
}

input {
  font-family: inherit;
}


/* @end */

/* @group grid */
#outer-wrapper {
	background: white url(../graphics/outer-wrapper-bg.gif) repeat-x;
	padding-left: 20px;
	margin-bottom: 20px;
}

#wrapper {
  width: 960px;
  margin: auto;
}


#content {
	padding-top: 20px;
	width: 960px;
}

#footer {
	width: 960px;
    clear: both;
    padding-top: 60px;
}

#footer a {
	text-decoration: none;
}

.b_100, .b_100_headline, b_50_50, .b_30_30_30, .b_30_38_22, .b_26_62, .b_28_62 {
  clear: both;
  width: 940px; 
  padding: 20px 0 0 0;
}

.b_100_headline {
	border-bottom: 1px solid #F0ECE3;
	/*margin-bottom: 20px;*/
}

.b_110_thumbnails {
	padding-top: 20px;
}

.b_50_50 .left {
  width: 460px;
  float: left;
}

.b_50_50 .right {
  width: 460px;
  float: right;
}


.b_30_30_30 .left, .b_30_38_22 .left {
  width: 300px;
  float: left;
}


.b_30_30_30 .right {
  width: 300px;
  float: right;
}


.b_30_30_30 .center {
  width: 300px;  
  float: left;
  padding-left: 20px;
}


.b_30_38_22 .center {
  width: 380px;
  float: left;
  padding-left: 20px;
}


.b_30_38_22 .right {
  width: 220px;
  float: right;
}

.b_28_62 .left {
  width: 280px;
  float: left;
}

.b_26_62 .left {
  width: 260px;
  float: left;
}



.b_26_62 .gallery a, .b_26_62 .gallery a:hover {
	float: left;
	margin: 0 17px 18px 0;
	line-height: 1;
}

.lastrow {
	margin: 0 0 0 0 !important;
}



.b_28_62 .right, .b_26_62 .right {
  width: 620px;
  float: right;
}


img.floatleft {
  float: left;
  padding-right: 20px;
}


.img_caption {
	clear: both;
	font-size: 10px;
	color: #888;
}


p.video {
	padding: 0;
	border-top: 1px solid #c7c7c7;
	border-bottom: 1px solid #c7c7c7;
}


.seperator {
	height: 10px;
	margin-bottom: 10px;
	display:block;
	clear: both;
	border-bottom: 1px solid #F0ECE3;
}

/* @end */

/* @group type */

html, body {
	background-color: #4f432b;
    font: 12px/20px Verdana, Arial, sans-serif;
   	color: #6C5F4D;
}

a:link, a:visited {
  color: #5b8b95;
  text-decoration: underline;
}

a:hover {
  color: #ce7d42;
}

p {
  padding-bottom: 9px;
}

p.description {
	text-indent: 13px;
    background: url(../graphics/bullet_arrow_top.gif) no-repeat 0 4px;

}

small {
  font-size: 10px;
}

.caps {
  font-size: 10px;
}

.clear {
	clear: both;
}

h2 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 26px;
  color: #CE7D42;
  line-height: 30px;
}

h2 span {
	color: #e5ca94;
}

h3 {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
  font-size: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #787878;
}

h4 {
	font-weight: bold;
}

/* @group SiFR */

/*=:project
    scalable Inman Flash Replacement (sIFR) version 3.

  =:file
    Copyright: 2006 Mark Wubben.
    Author: Mark Wubben, <http://novemberborn.net/>

  =:history
    * IFR: Shaun Inman
    * sIFR 1: Mike Davidson, Shaun Inman and Tomas Jogin
    * sIFR 2: Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben

  =:license
    This software is licensed and provided under the CC-GNU LGPL.
    See <http://creativecommons.org/licenses/LGPL/2.1/>    
*/

.sIFR-flash {
  visibility: visible !important;
  margin: 0;
  padding: 0;
}

.sIFR-replaced, .sIFR-ignore {
  visibility: visible !important;
}

.sIFR-alternate {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  display: block;
  overflow: hidden;
}

.sIFR-replaced div.sIFR-fixfocus {
  margin: 0pt; 
  padding: 0pt; 
  overflow: auto; 
  letter-spacing: 0px; 
  float: none;
}




/* @end */



/* @end */

/* @group header */

#header {
  height: 160px !important; /* important needed by IE*/
	width: 940px;
}


#header a {
  color: #77A3AC;
  padding-bottom: 0;
  border: none;
}


#header #logo h1 a {
  margin-top: 0;
  margin-left: 0;
  background: url(../graphics/janfromm_logo.gif) top left no-repeat;
  display: block;
  float: left;
  width: 216px;
  height: 90px;
}

#header #logo h1 a:hover {
  background: transparent url(../graphics/janfromm_logo.gif) 0 -90px no-repeat;
}

#header #logo h1 a span {
  display: none;
}

/* @group navigation */

/* NAVIGATION */


#nav_main {
  line-height: 1;
  clear: both;
  position: absolute;
  top: 120px;
  width: 940px;
}

#nav_main ul li,
#nav_main ul a  {
	float: left;
	display: block;
	background-image: url(../graphics/nav_main.gif);
	background-repeat: no-repeat;
	height: 36px;
	width: 433px;
	text-indent: -5000px;
	overflow: hidden; 
}

#nav_main ul li#typefaces-drop,
#nav_main ul li#typefaces-drop a,
#nav_main ul li#design-drop,
#nav_main ul li#design-drop a 
 { 
	width: 35px;
	background-position: -433px 0;
}



/*normal state: */
#nav_main ul li#typefaces a {  background-position: 0 0;  }
#nav_main ul li#design a {  background-position: -468px 0; }

/* highlighted: */
#nav_main.typefaces ul li#typefaces a {  background-position: 0 -36px; }
#nav_main.design ul li#design a {  background-position: -468px -36px; }

#nav_main.typefaces ul li#typefaces-drop a,
#nav_main.design ul li#design-drop a
{
	background-position: -433px -36px;
}


/* hovered: */
#nav_main ul li#typefaces a:hover {  background-position: 0 -72px; }
#nav_main ul li#design a:hover {  background-position: -468px -72px; }

#nav_main ul li#typefaces-drop a:hover,
#nav_main ul li#design-drop a:hover
{
	background-position: -433px -72px;
}



#nav_main_2 ul {
	float: right;
	margin-top: 20px;
}

#nav_main_2 ul li {
	display: inline;
	padding: 0 0 0 20px;

}

#nav_main_2 ul li a {
  text-decoration: none;
  background: url(../graphics/nav_main_2_bullet.gif) no-repeat 0 4px;
  padding-left: 12px;
  background-position: 0 2px;
  text-decoration: none;
}

#nav_main_2 ul li a:hover, 
#nav_main_2.about ul li#about a,
#nav_main_2.contact ul li#contact a {
  color: white;
  background: url(../graphics/nav_main_2_bullet_h.gif) no-repeat 0 4px;
  padding-left: 12px;
  background-position: 0 2px;
}


/* @group droplist */



li#typefaces-drop ul,
li#design-drop ul {
  z-index: 150;
  display: none;
  position: absolute; 
  left: 0;
}

li#typefaces-drop > ul
{
	top: 35px;
	left: 166px;
}  

li#design-drop > ul
{
	top: 35px;
	left: 634px;
}  


li#typefaces-drop:hover ul,
li#design-drop:hover ul {
	display: block;
	clear: left;
	font-size: 12px;
	line-height: 20px;

}

li#typefaces-drop ul li, li#typefaces-drop ul li a,
li#design-drop ul li, li#design-drop ul li a {
	  z-index: 150;
	display: block;
	float: none;
	text-indent: 0;
	background-image: none;

	/*width: auto !important;*/
	width: 300px !important;
	height: auto !important;
}


li#typefaces-drop ul li, 
li#design-drop ul li {
	border-left: 1px solid #77a3ac;
	border-right: 1px solid #77a3ac;
}

li#typefaces-drop:hover ul li a,
li#design-drop:hover ul li a {
  text-indent: 0 !important;
  text-decoration: none;
  padding: 6px 18px;
}

li#typefaces-drop ul li a,
li#design-drop ul li a {
	color: white;
	background-color: #81afb4;
	border-bottom: 1px solid #77a3ac;
}

li#typefaces-drop ul li span a,
li#design-drop ul li span a {
	color: #888;
}

li#typefaces-drop ul li a:hover,
li#design-drop ul li a:hover
 {

	background-color: #CE7D42;
	color: white;
    cursor: pointer;

}


/* @end */



/* @end */


/* @end */

/* @group lists */

/* @group nav_sidebar */

ul#nav_sidebar li{
	display: inline;
	float: left;
	clear: both;
}

ul#nav_sidebar a{
  background: url(../graphics/bullet_link.gif) no-repeat 0 4px;
  padding-left: 14px;
  background-position: 0 2px;
  text-decoration: none;
}

ul#nav_sidebar a:hover {
  background: url(../graphics/bullet_link_h.gif) no-repeat 0 4px;
    padding-left: 14px;
  background-position: 0 2px;
  text-decoration: none;
}

ul#nav_sidebar.default #preview,
ul#nav_sidebar.design-info #design-info,
ul#nav_sidebar.features #features,
ul#nav_sidebar.character-set #character-set,
ul#nav_sidebar.in-use #in-use,
ul#nav_sidebar.order-info #order-info
{
	background: #CE7D42 url(../graphics/nav_sidebar_selected.gif) no-repeat top right;
}



ul#nav_sidebar.default #preview a,
ul#nav_sidebar.design-info #design-info a,
ul#nav_sidebar.features #features a,
ul#nav_sidebar.character-set #character-set a,
ul#nav_sidebar.in-use #in-use a,
ul#nav_sidebar.order-info #order-info a
{
	color: white;
	background:none;
	padding-right: 40px;

}

/* @end */

ul.sidebarlist {
	padding-bottom: 10px;
	border-bottom: 1px solid #E9E3D6;
}

#content ul {
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 10px;
}


ul.link a, ul.link a:hover,
a.link, a.link:hover,
ul.pdf a, ul.pdf a:hover,
a.pdf, a.pdf:hover,
ul.link_external a, ul.link_external a:hover,
a.link_external, a.link_external:hover,
ul.typeshow a, ul.typeshow a:hover,
a.typeshow, a.typeshow:hover
{
  padding-left: 14px;
  background-position: 0 2px;
  text-decoration: none;
}


#content ul.bulletlist li {
	background: url(../graphics/bullet.gif) no-repeat 0 4px;
	padding-left: 14px;
}

ul.link li, ul.link a, a.link {
  background: url(../graphics/bullet_link.gif) no-repeat 0 2px;
}

a.link:hover, ul.link a:hover {
  background: url(../graphics/bullet_link_h.gif) no-repeat 0 2px;
}


ul.pdf a, a.pdf {
  background: url(../graphics/bullet_pdf.gif) no-repeat 0 2px;
}

ul.pdf a:hover, a.pdf:hover {
  background: url(../graphics/bullet_pdf_h.gif) no-repeat 0 2px;
}


ul.link_external a, a.link_external {
  background: url(../graphics/bullet_link_external.gif) no-repeat 0 2px;
}

ul.link_external a:hover, a.link_external:hover {
  background: url(../graphics/bullet_link_external_h.gif) no-repeat 0 2px;
}


ul.typeshow a, a.typeshow {
  background: url(../graphics/typeshow_link.gif) no-repeat 0 1px;
}

ul.typeshow a:hover, a.typeshow:hover {
  background: url(../graphics/typeshow_link_h.gif) no-repeat 0 1px;
}





/* @end */

/* @group forms */





/* form stuff */

#frm_contact
{
  background-color: #F3F1E0;
  margin: 0;
  padding: 18px 20px;
}

form#contactform {
  padding: 0;
  margin: 0;
  
}

form#contactform label { 
  float: left;
  clear:both;
  font-weight: bold;
}

fieldset {
  border: none;
}

form#contactform textarea {
height:24em;
}

form#contactform input, form#contactform textarea, #s
{
	width: 570px; 
  float: left;
  clear: both;
  padding: 2px;
  margin-bottom: 20px;
  font-family: Verdana, Arial, sans-serif;
  line-height: 20px;
  font-size: 12px;  
  border:1px solid #E9E3D6;
	background: white url(../graphics/input_bg.gif) repeat-x top left;
	color: #604100;
}

#s {
    border:1px solid #b2b2b2;
}

form#contactform button {
  padding: 0;
  width: 101px;
  height: 24px;
  text-indent: -5000px;
  background: transparent url(../graphics/button_send_bg.gif) 0 0 no-repeat;
  border: none;
  float: left;
  clear: both !important;
}

form#contactform button:hover {
  background-position: 0 -28px;
  cursor: pointer;
}



form#contactform input:hover, form#contactform textarea:hover { border: 1px solid #CE7D42; }
form#contactform input:focus, form#contactform textarea:focus { border: 1px solid #CE7D42; }


.form_error {
  float: left;
  color: white;
  margin-bottom: 9px;
  background-color: #CE7D42;
  padding: 4px 8px;
  clear:  both;
}


/* @end */

/* @group teasers */

img.border {
	border: 1px solid #E9E3D6;
}

a:hover img.border {
	border: 1px solid #ce7d42;
}


a:hover img {
	filter: alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: .80;
}

div.thumbnail_30 {
	width: 300px;
	margin-right: 20px;
	margin-bottom: 20px;
	float: left;
}

div.thumbnail_100 {
	margin-bottom: 20px;
}

div.thumbnail a {
	float: left;
}


.teaser_text {
	color: white;
	background-color: #77A3AC;
	padding: 20px;
}



/* @end */