/* ----------------------------------------------------------------------------------------- 
STYLESHEET FOR: Process Algebra (http://www.processalgebra.org)
Made by Warewolf
http://www.warewolf.nl
Design by Nout
Author: Nout van Deijck
http://www.noutweb.com
----------------------------------------------------------------------------------------- */

/* import reset.css */
@import url(reset.css);

/*****************************************************
1.	BODY code
2.	HEADINGS code
3.	TEXT ELEMENTS code
4.	LISTS code
5.	FORMS code
6.	DESIGN code
7.	LOGO code
8.	MAIN NAVIGATION code
9.	FOOTER NAVIGATION code
10.	MISCELLANEOUS NAVIGATION code
11.	PAGES code
	11.1.	INDEX
			DASHBOARD
	11.3.	INNER PAGE
12.	GRAY BOXES code
13.	'moz and webkit' code
	13.1.	borders
	13.3.	shadows
14.	IMAGES code
15.	LINKS code
16.	BUTTONS code
17.	GLOBAL CLASSES code
18.	SCREENSHOTS code
19.	EXERCISES code
20.	TABLES code
*****************************************************/


body {
	font-size: 14px;
	color:#222;
	background:#eee;
	font-family:Georgia, Times, serif;
}



/* HEADINGS -------------------------------------------------------------- */


h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	color: #111;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
	font-size: 2.3em;
	color: #000;
	letter-spacing: -1px;
	line-height: 1.2;
	margin-bottom: 0.5em;
	font-weight: bold;
}

h2 {
	font-size: 2em;
	margin: 0 0 0.5em;
}
h3 {
	font-size: 1.5em;
	margin: 0 0 0.5em;
	color: #333;
	font-weight: bold;
	}
h4 {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.5em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 1em;
}


/* TEXT ELEMENTS -------------------------------------------------------------- */

p {
margin-bottom: 1em;
}

h3 strong {
	color: #666;
	text-transform: uppercase;
	font-size: 1em;
}

em {
	font-style: italic;
	color: #111;
}

a {
	color: #1b89ce;
	padding: 0 2px;
}
a:hover {
	color: #1b89ce;
	text-decoration: none;
}

small {
	font-size: 11px;
}


/* LISTS -------------------------------------------------------------- */

ul, ol {
	margin: 0 0 1.5em;
}

.footer ul, .footer ol,
.misc ul, .misc ol {
	list-style-type: none;
}

ul {
	list-style-position: inside;
	list-style-type: square;
}

ol {
	list-style-position: inside;
	list-style-type: decimal;
}

li {
	margin-bottom: .25em;
}

ol.index_book_sidebar {
	margin-left: 15px;
	list-style-position: inside;
	list-style-type: decimal;
}

ul.readfolder {
	line-height: 12px;
	margin-top: 20px;
	padding: 0;
}

ul.readfolder h1,
ul.readfolder h2,
ul.readfolder h3,
ul.readfolder h4,
ul.readfolder h5,
ul.readfolder h6 {
	font-size: 18px;
	line-height: 14px;
	margin: 0;
	padding: 0;
}



/* FORMS -------------------------------------------------------------- */


fieldset {
	background-color:#f7f7f7;
	border-color:#CCC;
	border-style:solid none none;
	border-width:1px 0 0;
	margin:0 0 25px;
	padding:25px;
	font-weight: bold;
}

fieldset legend {
	padding: 0 5px;
}

fieldset p {
	font-size: 12px;
	font-weight: normal;
}

fieldset small {
	color: #999;
	font-weight: normal;
	line-height: 1.3;
	padding-top: 5px;
}

input[type="checkbox"] {
	width: auto;
	display: inline;
}


.input {
	margin: 0 40px 8px;
}

.input label {
	color: #666;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: normal;
	display: block;
}

.input input, .input textarea {
	padding: 3px;
	width: 400px;
	margin-right: 10px;
}

.input select {
	margin-right: 10px;
}

.input .input-time {
	width: 60px;
}

.input.chkbox input {
	width: auto;
}

.input.chkbox label {
	display: inline;
}

hr.hr_chkbox {
	margin:0 40px 8px;
	width: 300px;
	border: 2px dotted #aaa;
}


#contact-form {
	margin-top: 40px;
}

.form {
	margin-bottom: 40px;
}



/* DESIGN -------------------------------------------------------------- */

html, body {
	height: 100%;
}

body {
	background: url(../images/bg-tile.jpg) repeat left top;
	line-height: 1.575;
	color: #333;
	min-height: 100%;
}

.container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width: 960px;
	margin: 0 auto;
}

#header {
	margin: 10px 0 5px;
	margin-bottom: 5px;
	position: relative;
}

#content {
	clear: both;
	background: #eee;
	background: rgba(255, 255, 255, 0.3);
	margin-bottom: 20px;
}

.footer {
	position: relative;
	height: 50px;
}

.main {
	width: 589px;
	min-height: 350px;
	margin: 0;
	background-color: #fff;
	padding: 40px 40px 60px;
	float: left;
	border-right: 1px solid #ccc;
}

.misc {
	float: left;
	width: 250px;
	z-index:-9;
	padding: 60px 20px 0 20px;
}

.siteinfo {
	font-size: 12px;
	color: #666;
	float: left;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	padding: 0 10px;
	margin-top: 40px;
}


/*  LOGO
    ---------------------------------------------- */

#branding a {
	background: transparent url(../images/logo.gif) no-repeat center bottom;
	display: block;
	height: 130px;
	width: 200px;
	text-indent: -9999px;
	float: left;
}



/*  MAIN NAVIGATION
	---------------------------------------------- */

.nav-main a, .nav-welcome, .nav-misc a, .button {
font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
}


.nav-main {
	float: right;
	margin: 45px 0 0 0;
}

.nav-main li {
	display: inline;
}

.nav-main a {
	display: block;
	float: left;
	text-decoration: none;
	font-size: 1.2em;
	background: #ccc;
	background: rgba(255, 255, 255, 0.7);
	padding: 5px 15px;
	border-right: 2px solid #eee;
	color: #222;
	font-weight: bold;
}

.nav-main .last a {
	border: 0px none;
}

.nav-main a:hover {
	color: #1b89ce;
	background-color: #fff;
}

.nav-main a.active {
	background: #3389bf;
	color: #fff;
}

.nav-welcome {
	position: absolute;
	top: 15px;
	right: 0px;
	font-size: 12px;
}


/*  FOOTER NAVIGATION
	---------------------------------------------- */

.nav-footer {
	position: relative;
	float: right;
	margin-top: 40px;
}

.nav-footer li {
	float: left;
	background: #fff;
	background: rgba(255, 255, 255, 0.5);
}

.nav-footer a {
	float: left;
	margin-right: 10px;
	font-size: .9em;
	font-weight: normal;
}

.nav-footer a:first-child {
	padding-left: 10px;
}

.nav-footer a:hover {
	background: transparent;
	text-decoration: underline;
	color: #111;
}


/*  MISCELLANEOUS NAVIGATION
	---------------------------------------------- */

.nav-misc {
	margin: 0 -20px 0;
	width: 290px;
}

.nav-misc li, .nav-misc a {
	margin: 0;
	height: 1%;
}

.nav-misc .active a {
	background-color: #FFF;
	color: #111;
	margin-left: -1px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding-left: 21px;
	text-decoration: none;
	font-weight: bold;
}

.nav-misc a:hover {
	background-color: #1b89ce;
	color: #fff;
}

.nav-misc a {
	display: block;
	padding: 10px 20px;
	border-bottom: 1px solid #ccc;
}


/*  PAGES
	------------------------------------------------------------------------------- */

/* INDEX */

.index #content {
	background: transparent;
	margin-bottom: 0;
	position: relative;
}

.index #content h2 {
	background: url(../images/offer-2.png) no-repeat right top;
	position: absolute;
	text-indent: -9999px;
	top: -50px;
	height: 80px;
	width: 80px;
	left: -30px;
	z-index: 9;
}

.index #content h3 {
	font-size: 1.2em;
}

.index .home-extra {
	width: 250px;
	float: left;
	margin-left: 40px;
}

/*  DASHBOARD  -------------------------------------------------------------- */

.dashboard {
	background: #fff url(../images/dashboard-bg-1.jpg) no-repeat right bottom;
	height: 360px;
	margin-bottom: 40px;
	clear: both;
	z-index: 10;
}

.dashboard h1 {
	padding: 25px 0 20px 30px;
	letter-spacing: -1px;
	background-color: transparent;
	margin-bottom: 0px;
}

.dashboard h2 {
	margin-left: 40px;
	font: 1.4em Georgia, Times, serif;
	font-weight: normal;
	line-height: 1.3;
	margin-top: 0px;
	color: #000;
}

.dashboard a {
	display: block;
	margin-left: 40px;
	margin-top: 40px;
}

.dashboard a {
	display: inline;
}


.cols {
	padding: 40px;
	border-top: 1px solid #fff;
	position: relative;
}

.col {
	float: left;
	background-color: #fff;
	padding: 20px;
	margin-right: 20px;
}


/* INNER PAGE */

.inner-page .cols, .about .cols {
 padding: 0;
margin-top: 40px;

}
.inner-page .col.one, .about .col.one, .inner-page .col.two, .about .col.two {
 margin: 0;
padding: 0;
width: 260px;
float: left;

}
.inner-page .col.one, .about .col.one {
 margin-right: 40px;

}
.about .col {
 height: auto;

}

.about li img {
 margin: 0 10px;
;

}
.about li span {
 font-size: 16px;

}
.about ul.fleet li {
 border-bottom: 1px dashed #ccc;
margin-bottom: 20px;

}



/*  GRAY BOXES  -------------------------------------------------------------- */

.gray-box {
	background: #ccc;
	background: rgba(0, 0, 0, 0.1);
	margin-top: 0;
	padding: 20px;
	position: relative;
	width: 620px;
	float: left;
}

.gray-box li {
	width: 290px;
	float: left;
	margin: 0;
}

.gray-box li p {
	width: 230px;
}




/*   =moz and webkit 
	------------------------------------------------------------------------------- */

/*   borders 
	-------------------------------------------------------------- */

.dashboard, #content, .gray-box, .col {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.main {
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}

.blue-button {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.nav-main li:first-child a {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

.other h4 {
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

.nav-main .last a {
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
}

.button {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}


/*   shadows 
	-------------------------------------------------------------- */

.dashboard, #content, .highlights {
	-moz-box-shadow: 0 1px 3px #888;
	-webkit-box-shadow: 0 1px 3px #888;
}

.main {
	-moz-box-shadow:2px 0 2px #ccc;
	-webkit-box-shadow:2px 0 2px #ccc;
}

.index #content {
	-moz-box-shadow: 0 0 0 transparent;
	-webkit-box-shadow: 0 0 0 transparent;
}

.cols {
	-moz-box-shadow: 0 -3px 3px #ccc;
	-webkit-box-shadow: 0 -3px 3px #ccc;
}

.inner-page .cols, .cols {
	-moz-box-shadow:0 0 0 #fff;
	-webkit-box-shadow:0 0 0 #fff;
}






/*  IMAGES
	---------------------------------------------- */

#content p img {
	border: 2px solid #eee;
	padding: 4px;
	margin: 5px;
}



/*  LINKS
	---------------------------------------------- */

.design-by a {
	color: #333;
}

.top {
	font-size:12px;
	float: right;
	padding-bottom: 10px;
}



/*  BUTTONS
	---------------------------------------------- */

.button {
	text-decoration: none;
	padding: 5px 15px;
	background: #77a519;
	color: #fff;
	font-size: 18px;
	display: inline-block;
	margin-top: 10px;
	border: 1px solid #77a519;
}
button {
	padding: 3px 5px;
}

.button.small {
	font-size: 14px;
	padding: 2px 7px 3px;
}

.blue-button {
	background-color: #2778ab;
	padding: 5px 10px;
	text-decoration: none;
	color: #fff;
}
.blue-button:hover {
	background-color: #4197c8;
	color: #fff;
}



/*  GLOBAL CLASSES
	---------------------------------------------- */


.hide {
	display: none;
}

.more {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: bold;
}

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


.out-list {
	list-style-position: outside;
	list-style-type: square;
}


.cols .out-list {
	margin-left: 10px;
}

.text-align-right {
	text-align: right;
}

.float-right {
	float: right;
	margin: 0px 10px 30px 5px;
}

.float-left {
	float: left;
	margin: 5px 30px 10px 0;
}


.note {
	background-color:#FFFFCC;
	padding:15px;
}



/* SCREENSHOTS */

.screenshots img {
	padding: 4px;
	border: 1px solid #eee;
}



/* ------------------------------------------
EXERCISES */


ul ul {
	margin-left: 20px;
}

a h1, li h1, li h2 {
	font-weight: normal;
	display: inline;
	line-height: 30px;
}

a h1, li h1 {
	font-size: 30px;
}
a h2, li h2 {
	font-size: 25px;
	font-style: italic;
}
a h3, li h3 {
	font-size: 20px;
}
a h4, li h4 {
	font-size: 18px;
}

h1.title_folder {
	font-size: 26px;
	color: #3389BF;
	margin-top: 50px;
}

a.link_top h1 {
	font-size: 17px;
}
a.link_top {
	margin-bottom: 30px;
}


/* ------------------------------------------
TABLES */

table {
	border: none;
}


table tr.even, table tr.oneven {
	font-weight: normal;
	color: #333;
}

table tr.even {
	background: #fff;
}

table tr.oneven {
	background: #eee;
}