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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {	margin: 0; padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}
:focus {outline: 0;}															/* remember to define focus styles! */
body {line-height: 1;color: black;background: white;}
/*ol, ul {list-style: none;}*/
table {border-collapse: separate;border-spacing: 0;} 							/* tables still need 'cellspacing="0"' in the markup */
caption, th, td {text-align: left;font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
/******************************************************/
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}

body{
background: #26313c;
color: #fff;
font-family: Tahoma, Arial, sans-serif;
font-size: 90%;
}

.title{
font-family: 'Cuprum', Tahoma, Arial, sans-serif;
color: #fff;
text-decoration: none;
}
.smalltext{
text-transform: lowercase!important;
font-size: 100%!important;
color: #c2c7ca;
}


.link{
text-transform: uppercase;
}
.link-index{
font-size: 150%;
margin: 0.2em 0;
}
.link-page{
font-size: 125%;
margin: 0.2em 0;
}

/* http://www.xs4all.nl/~peterned/examples/csslayout1.html */

div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:698px;
background:#374552;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

div#content {
padding:140px 0 30px 0; /* bottom padding for footer */
}

div#content p {
}

div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}

div#footer p.copy {
padding:1em;
margin:0;
color: #5e6973;
font-size: 80%;
text-align: center
}
div#footer p.follow {
padding: 0 1em;
margin:0;
/*color: #5e6973;*/
font-size: 100%;
text-align: left;
float: right;
position: relative;
top: 3px;
}

.invisible{
display: none;
}

.start_left{
width: 402px;
height: 474px;
border-right: 2px solid white;
background: url('../images/hammerware_logo_large.png') top right no-repeat;
float: left;
}

.start_right{
margin-left: 402px;
}

.textreplacer{
margin:0; padding:0;
position:relative;
margin:0; padding:0;
overflow:hidden;
}

.textreplacer span{
display:block;
position:absolute; left:0; top:0; z-index:1;
margin:0; padding:0;
}

.nav .link a{
display: block;
cursor: pointer;
}
.nav .link a:hover{
color: #fff;
text-decoration: none;
}

.start_right .nav .link{
background:url('../images/nav_arrows.png') top left no-repeat;
background-position: 1px 0;
height: 20px;
width: 200px;
padding-left: 53px;
}

.start_right .nav .larger{
	font-size: 180%;
}

.start_right .nav .link:hover{
background-position: 0 -20px;
font-weight: bold;
}

.page_left{
width: 140px;
float: left;
}

.page_right{
margin-left: 211px;
border-left: 2px solid white;
width: 427px;
min-height: 250px;

}

.page_right .marg{
margin-left: 50px;
}

.page_left .nav{
margin-left: 71px;
}

.page_left .nav .link{
height: 20px;
width: 140px;
background: url('../images/nav_arrows.png') top no-repeat;
background-position: 87px -40px;
}
.page_left .nav .link a{
	width: 88px;
	text-align: right;
}

.page_left .nav .link:hover,
.page_left .nav .link.actual{
background-position: 87px -60px;
}

.page_left .linkindex{
margin-bottom: 40px;
}

.page_left .linkindex, .page_left .linkindex span{
width: 91px;
height: 146px;
}
.page_left .linkindex a{
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}
.page_left .linkindex a span{
background:url('../images/hammerware_loog_small.png') top left no-repeat;
}

h1{
font-size: 230%;
text-transform: uppercase;
margin-bottom: 20px;
}


h2{
font-size: 150%;
text-transform: uppercase;
}

h2, h2 span{
/*height: 20px;*/
/*width: 333px;*/
}

h2.spacebefore{
margin-top: 50px;
}

.spacebefore{
margin-top: 20px;
}

.spaceafter{
margin-bottom: 20px;
}

.par{
line-height: 140%;
font-size: 110%;
}

.contact_left{
display: block;
float: left;
width: 140px;
}

blockquote{
background:url('../images/icon_download.png') top left no-repeat;
margin-top: 10px;
margin-left: 20px;
padding-left: 30px;
}

a{
color: #e7d6be;
text-decoration: none;
}
a:hover{
color: #d7a45d;
text-decoration: underline;
}

a.external span{
position: absolute;
left: -5000px;
width: 4000px;
}
a.external{
background: url('../images/external_link.gif') no-repeat 100% 0;
padding: 0 15px 0 0;
}
a.external:hover{
background: url('../images/external_link.gif') no-repeat 100% -30px;
padding: 0 15px 0 0;
}

.screenshots{
margin: 30px 1px 45px 1px;
padding: 4px 1px;
background: #26313c;
text-align: center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.screenshots img{
border: 1px solid #ddd;
padding: 0;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

}
.screenshots img:hover{
border: 1px solid #fff;
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

#fspacer{
height: 60px;
}

.latest{
height: 366px;
}

.latest p{
margin-top: 15px;
font-size: 140%;
padding: 0 53px;
color: #c2c7ca;
}

.start_bottom{
margin: 70px 50px 0 75px;
border-top: 2px solid #fff;
padding-top: 40px;
}

.start_bottom img{
float: right;
border: 5px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
margin: 5px 0 20px 78px;
}
.clear{
clear: both;
}
.start_bottom .info{
text-align: right;
font-size: 175%;
}
.start_bottom .small{
text-align: left;
font-size: 135%;
}
.start_bottom p{
color: #c2c7ca;
margin-bottom: 50px;
}
ul{
margin-bottom: 70px;
}
li{
margin-left: 50px;
}
ul h2{
display: inline;
}
.divider{
border-top: 2px solid #fff;
margin: 20px 0;
}
.index-screen{
display: block;
border: 5px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 186px;
height: 134px;
}
.index-screen img{
border: 3px solid #25303b;
}


#tweet{
	position: absolute;
	display: none;
	top: 10px;
	left: 73px;
	font-size: 90%;
	color: #e2f4f4;
	width: 274px;
	height: 184px;
	background: url('../images/twitter_bg.png');
}

.tweet-header{
	height: 20px;
	opacity: 0.4;
	filter: alpha(opacity=40);
	position: relative;
	top: 20px;
	left: 50px;
	width: 190px;
	font-size: 90%;
}

.tweet-name{
	float: left;
	font-weight: bold;
}
.tweet-time{
	float: right
}

.tweet-text{
	position: relative;
	top: 20px;
	left: 10px;
	width: 255px;
	height: 70px;
	text-align: center;
	
}
.tweet-text span{
	vertical-align: middle;
}

#tweet a{
	text-decoration: none;
	color: #fff;
}