/*	hieper software site styles */

/**
 *	Description
 */
#product {
	position:relative;
	margin-left:0px;
	padding-right:165px;
	font-size:13px;
	}
#product ul {
	margin:0;
	padding:0 20px;
	}
#product a.screenshot { /* firefox 2.0 still no inline-block */
	display:block; width:120px; height:80px; float:left;
	margin:0 10px 5px 0;
	border:1px solid #ddd;
	padding:5px 5px 15px 5px;
	color:inherit; background:#eee;
	}
#product a.screenshot:hover {
	border-color:#ccc;
	color:inherit; background:#ddd;
	}
#product a.screenshot img {
	border:1px solid #ddd;
	}
#product a.screenshot img:hover {
	border-color:white;
	}
#product a.lbox {
	display:block; margin-top:120px; /* separates screenshots from next element */
	border:0;
	font-size:10px;
	color:#ccc; background:inherit;
	}
#product a.lbox:hover {
	color:#999;
	}

/**
 *	Software
 */
table#features {
	font-family:"Lucida Grande", Arial, Helvetica, sans-serif; 
	}
table#features td.feature {
	width:50%;
	padding:5px 10px 0px 0;
	vertical-align:top;
	}
table#features td.feature h4 {
	margin:0;
	padding:1px 3px 1px 6px;
	border-bottom:1px solid #aaa;
	color:#222;
	font-size:12px;
	font-weight:bold;
	}
table#features td.feature p {
	margin:0 0 0 4px;
	padding:3px 3px 3px 2px;
	background-color:#f4f4f4;
	color:#333;
	font-size:11px;
	}

/**
 *	Code
 */
div.code {
	margin:8px;
	border:1px solid #ddd;
	padding:5px;
	white-space:pre;
	font:12px "Andale Mono", monospace;
	background:#eee;
	}
div.term:before { content:'$ '; }
div.as span.cmd { color:blue; }

/**	note table */
table.note {
	border:1px dotted #aaa;
	padding:4px;
	margin:0px;
	font:11px "Lucida Grande", Arial, Helvetica, sans-serif; ;
	}
table.note td.title {
	padding-right:5px;
	font-weight:bold;
	vertical-align:top;
	}

/**
 *	Details side-bar
 */
#details {
	position:absolute; width:150px; right:8px; top:12px;
	}
#details div.client {
	margin-bottom:4px;
	border:1px solid #ccd;
	text-align:right;
	background:inherit;
	}
#details div.client:hover {
	background:#ccf
	}
#details div.selected, #details div.selected:hover {
	background:#88f;
}

#details div.box {
	margin-bottom:4px;
	border:1px solid #ccd;
	font-size:11px;
	background:inherit;
	}
#details div.box div.title {
	margin:0;
	border:1px solid rgb(255, 240, 245); /* lavenderblush */;
	border-bottom:1px solid #ccd;
	padding:2px 4px;
	text-align:left; 
	font:bold 12px Arial, Helvetica, sans-serif; 
	color:#777; background:rgb(255, 240, 245); /* lavenderblush */
	}
#details div.box p {
	margin:0;
	padding:2px 5px;
	}
#details div.box div.section {
	margin:2px 0;
	padding:2px 5px;
	font-weight:bold;
	}
#details div.box ul {
	list-style-type:none;
	margin:0;
	padding-left:3px;
	}
#details div.box ul li {
	width:135px;
	margin:2px;
	}

/*	counter effect of hieper.css */
#details a { text-decoration:underline; }
#details a:hover { border-bottom:0; }

#details div.icon { text-align:center; background-color:white; }

span.date { float:right; }
span.version { color:#ff7c0a;/* Safari snapback */ font-weight:bold; }

div.languages { height:15px; margin:2px 5px; /* from p */ }
div.flag {
	float:left;
	width:21px;
	height:15px;
	margin:0 2px;
	}
div.en { background:url(../images/flag-en.gif) no-repeat; }
div.us { background:url(../images/flag-us.gif) no-repeat; }
div.de { background:url(../images/flag-de.gif) no-repeat; }
div.nl { background:url(../images/flag-nl.gif) no-repeat; }
div.ru { background:url(../images/flag-ru.gif) no-repeat; }

#details div.cocoa { height:60px; background:url(../images/cocoa.png) no-repeat 50%; }
#details a.appstore {
	display: block;
	margin: 5px 4px;
	width: 140px; height: 40px; 
	background: url(../images/appstore.png) no-repeat;
	background-size: 140px 40px;
}
