/**
 * ---------------------------
 * Client: Tispa Medical
 * URL: tispamedical.com
 * Author: Harmen Janssen, Dutch Internet Works
 * Media: Screen
 * Browser: All
 *
 * Color guide;
 * ---------------------------
 * #67726b Grey-ish, body text
 * #cdcd00 Green, used in logo
 * #00447a Navy, used in logo and links
 * #383e3a Dark grey, main-navigation focus
 * ---------------------------
 */

/**
 * Setup main look and feel
 */

html {
	height: 100%;
}

body {
	height: 100%;
	font: normal normal normal 0.75em/1.5em Helvetica, Arial, Verdana, sans-serif;
	color: #67726b;
	background: #ccc;
}

/* Headers */
h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
	color: #00447a;
}

h1 { font-size: 1.5em; line-height: 1em; margin-bottom: 1em; }
h2 { font-size: 1.333em; line-height: 1.125em; }
h3 { font-size: 1.083em; line-height: 1.385em; }
h4 { font-size: 1em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

/* Links */
a:link,a:visited,a:hover,a:active,a:focus {
	text-decoration: none;
	color: #00447a;
	border-bottom: 1px solid #67726b;
}

a:hover,a:focus,a:active {
	color: #cdcd00;
}

/* Text */
#main-content p, #main-content ul, #main-content ol {
	margin-bottom: 1em;
}

#main-content li {
	margin-left: 1em;
	list-style-type: disc;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

sub {
	font-size: .9em;
	vertical-align: bottom;
}

sup {
	font-size: .9em;
	vertical-align: top;
}

/* Cake's Flash message */
#flashMessage {
	width: 540px;
	margin-top: 4em;
	margin-left: 177px;
	margin-bottom: -3em;
	padding: .5em;
	background: #fff6bc;
	border: 1px solid #fdba48;
}

/* Forms */
form {
	padding: .5em;
	border: 1px solid #cdcd00;
}

form:after {
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
	content: ".";
}

form div.input {
	width: 100%;
	margin: .5em 0;
	float: left;
}

form div.input label {
	width: 6em;
	display: block;
	float: left;
	clear: left;
}

form div.input input,form div.input textarea {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 1em;
	display: block;
	float: left;
}

/* Tables */
table {
	border-collapse: collapse;
}

td,th {
	padding: .7em;
}

th {
	font-size: 150%;
	color: #00447a;
	border-bottom: 1px solid #00447a;
}

tr.odd td {
	background-color: #ffa;
}

/* News navigation */
.micro-nav {
	padding-top: 1em;
	border-top: 1px solid #383e3a;
}

/* Page constructs */
#container {
	position: relative;
	width: 925px;
	margin: 0 auto;
	padding-bottom: 2em;
	background: #fff url(/img/bottom.jpg) no-repeat bottom;
}

#container:after {
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
	content: ".";
}

.column {
	margin-top: 4em;
	float: left;
}

/* Elements with drop-shadow, based on a technique by Dunstan Orchard: http://1976design.com/blog/archive/2003/11/14/shadows/ */
.drop-shadow-left {
	background: url(/img/shadow-left.gif) no-repeat bottom left;
}

.drop-shadow-left .drop-shadow-subject {
	display: block;
	margin: 0 0 5px 5px;
	background-color: #fff;
}

.drop-shadow-right {
	background: url(/img/shadow-right.gif) no-repeat bottom right;
}

.drop-shadow-right .drop-shadow-subject {
	display: block;
	margin: 0 5px 5px 0;
	background-color: #fff;
}

/**
 * Branding
 */

#branding img {
	display: block;
}

/**
 * Main content
 */

#main-content, #admin-content {
	width: 540px;
	margin-left: 177px;
	margin-bottom: 2em;
	padding: 0 10px 2em;
}

#admin-content {
	width: 728px;
}

/**
 * Portals
 */

#portals {
	width: 177px;
	margin-left: -925px;
}

#portals li {
	margin-bottom: 1em;
	padding-bottom: 5px;
}

#portals li p {
	margin: 5px;
}

#portals li a {
	border-bottom-width: 0;
}

#portals li h3,#portals li h2 {
	padding: .5em 0;
	text-indent: .5em;
	font-size: 1.083em;
	font-weight: normal;
	line-height: 1.385em;
}

#portals li h3 a,#portals li h2 a {
	color: #fff;
}

#portals li.tissue-processor h3,#portals li.tissue-processor h2 {
	background: #cdcd00;
}

#portals li.natural-co2 h3,#portals li.natural-co2 h2 {
	background: #00447a;
}

#portals li.medica-2008 h3,#portals li.medica-2008 h2 {
	background: #67726b;
}

#instrument {
	width: 177px;
	margin-left: -925px;
	padding:10px;
}


/* Portals inside main-content */
#main-content #portals {
	position: relative;
	left: -18px; /* align with header image */
	width: 454px;
	margin: 0;
	float: none;
}

#main-content #portals li {
	margin-left: 0;
	list-style-type: none;
}

#main-content #portals div:after {
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
	content: ".";
}

#main-content #portals img {
	float: left;
}

#main-content #portals p,#main-content #portals h2 {
	width: 328px;
	float: left;
}

#main-content #portals p {
	width: 318px;
	margin-bottom: 0;
}

#main-content #portals li div {
	margin-bottom: 0;
}

#main-content #portals p img {
	float: none;
}

/**
 * Aside
 */

#aside {
	width: 188px;
}

#aside h2 {
	padding: .5em 0;
	text-indent: .5em;
	font-size: 1.083em;
	font-weight: normal;
	line-height: 1.385em;
	color: #fff;
	background: #00447a;
}

#aside ul {
	margin: 5px;
}

#aside ul li {
	margin-bottom: 1em;
}

/**
 * Main navigation
 */

#main-navigation {
	position: absolute;
	top: 112px;
	left: 0;
	width: 100%;
	background-color: #67726b;
	background: #67726b url(/img/shadow-navigation.jpg) repeat-x 0 100%;
	border-top: 4px solid #00447a;
}

#main-navigation ul {
	margin-top: -4px;
	float: right;
	padding-bottom: 7px;
}

#main-navigation li {
	position: relative;
	float: left;
	border-top: 4px solid #00447a;
}

#main-navigation li:hover,
#main-navigation li.hover {
	border-top: 4px solid #cdcd00;
}

#main-navigation li a {
	display: block;
	padding: 0 17px;
	line-height: 2em;
	color: #fff;
}

#main-navigation li a:hover,#main-navigation li a:focus, #main-navigation li.current a {
	color: #cdcd00;
	background-color: #383e3a;
}

/* Submenu's */

#main-navigation ul li ul {
	position: absolute;
	top: -999em;
	width: 100%;
	margin-top: 0;
	padding-bottom: 0;
	float: none;
	background: transparent none;
}

#main-navigation ul li:hover ul,
#main-navigation ul li.hover ul {
	top: 2em;
	left: 0;
	z-index: 99999;
}

#main-navigation ul li ul li {
	width: 175px;
	float: none;
	border-top-width: 0;
}

#main-navigation ul li ul li:hover {
	border-top-width: 0;
}

#main-navigation ul li ul li a,
#main-navigation ul li.current ul li a {
	width: 100%;
	color: #67726b;
	background-color: #f5f5cc;
}

#main-navigation ul li ul li a:hover,
#main-navigation ul li.current ul li a:hover,
#main-navigation ul li ul li.current a {
	color: #67726b;
	background-color: #cdcd00;
}
 
/**
 * Page specifics
 */

.home h1 {
	position: absolute;
	top: -999em;
}