/*
Collab
Author: Lee Munroe May 2009
*/


/* 
################### CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################

#4f4f4f Dark Grey
#F6F6F6 Light Grey
#0487cb Blue
#f08303 Orange

*/
 
/*
# Reset defaults ################### 
*/

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

a{text-decoration:none;}

.clear{
clear:both;
}

html {
overflow: -moz-scrollbars-vertical;
}

#skipto{
display:none;
}

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

/* Float fix */
.clearfix {
zoom: 1;     /* triggers hasLayout */
}

/*
# Layout ################### 
*/

body{
font:75%/1.5  Helvetica, Arial,Verdana, sans-serif;
color:#4f4f4f;
background:#4f4f4f;
}

#container{width:980px;margin:10px auto 0;position:relative;}

#header{padding:0 10px;}

#content{background:url(../images/bg.gif) repeat-y #fff;padding:20px;}

.search{height:52px;background:url(../images/heading.gif) no-repeat;padding:10px 20px;margin-bottom:20px;}

.main{float:left;width:600px;margin-right:30px;}

.sidebar{float:left;width:310px;position:relative;}

.sidebar.withheading{padding-top:80px;}

.block{background:url(../images/shadow.gif) #fff repeat-y right;padding:10px 20px 10px 10px;margin-bottom:10px}

#footer{clear:both;padding-top:20px;font-size:0.8em;}





/*
# Nav ################### 
*/

#nav{list-style:none;background:url(../images/nav.gif) repeat-x;height:37px;clear:both;}

#nav li{display:inline;}

#nav li a{float:left;height:37px;margin-right:5px;background:url(../images/nav.gif) 0 -74px;line-height:37px;padding:0 10px;color:#4f4f4f;font-weight:bold;}

#nav li a:hover, #nav li.selected a{background-position:0 -37px;}


.topnav{list-style:none;float:right;}

.topnav li{display:inline;margin:0 5px;}

.topnav li a{color:#fff;font-weight:normal;}

.topnav li a:hover{color:#f08303}

/*
# Headings ################### 
*/

h1{color:#4f4f4f;font-weight:normal;font-family:Arial;font-size:3em;float:left;}

h1 span{color:#979797;}

h2{font-size:1.2em;font-weight:normal;margin-bottom:20px;}

.sidebar h2{background:url(../images/h2.gif) no-repeat bottom right #0487cb;position:absolute;right:-30px;top:0;padding:10px 10px 30px 10px;color:#fff;width:320px;}

h3{font-size:1.4em;font-weight:normal;margin-bottom:10px;}

h4{margin-top:30px;font-size:1.2em;}

#logo{width:147px;height:32px;background:url(../images/logo.gif) no-repeat;float:left;margin-bottom:10px;}

#logo a{display:block;height:100%;width:100%;}

#logo span{position:absolute;top:-9999px;left:-9999px;}

/*
# Lists ################### 
*/

/* display the individual items next to each other, not one-per-line */
.tag-cloud{font-size:0.8em;}
.tag-cloud LI { display: inline; }
/* hide the extra context from CSS-enabled browsers, but not screenreaders */
.tag-cloud SPAN { position: absolute; left: -999px; width: 990px; }
/* size is purely presentational, based upon the class */
.tag-cloud .not-popular { font-size: 1em; }
.tag-cloud .not-very-popular { font-size: 1.3em; }
.tag-cloud .somewhat-popular { font-size: 1.6em; }
.tag-cloud .popular { font-size: 1.9em; }
.tag-cloud .very-popular { font-size: 2.2em; }
.tag-cloud .ultra-popular { font-size: 2.5em; }

.css1 { font-size: 1.0em; }
  .css2 { font-size: 1.3em; }
  .css3 { font-size: 1.6em; }
  .css4 { font-size: 2.0em; }


.links{list-style:none}

.links li{margin-bottom:8px;}

.links li a{padding:3px 0 3px 25px;background:url(../images/follow.gif) no-repeat;}

.links li a.link-twitter{background-position:0 0}

.links li a.link-rss{background-position:0 -35px}

.links li a.link-email{background-position:0 -70px}




#main ul, #main ol{margin-left:30px;}




.pagination ul{float:right;margin:10px 0;}

.pagination ul li{display:inline;float:left;display:block;margin-left:6px;line-height:25px;}

.pagination ul li a{color:#4f4f4f; font-weight:bold;display:block;float:left;padding-left:8px;background:url(../images/pagination.gif) top left;}

.pagination ul li a span{display:block;float:left;padding-right:8px;height:25px;line-height:25px;background:url(../images/pagination.gif) top right;}

.pagination ul li a:hover{background-position:0% -25px;}

.pagination ul li a:hover span{background-position:100% -25px;cursor:pointer;}

.pagination ul li.selected a{background-position:0% -50px;}

.pagination ul li.selected a span{background-position:100% -50px;cursor:pointer;}



/*
# Images ################### 
*/

img{
border:none;
}

/*
# Links ################### 
*/

a{color:#0487cb;font-weight: bold;}

a:hover{color:#f08303;}

#nav li #link-add{position:absolute;right:0;background:none;}

#nav li #link-twitter{position:absolute;right:300px;top:-2px;background:url(../images/twitter.png) no-repeat transparent;width:194px;height:81px;}

#nav li #link-twitter span{position:absolute;top:-9999px;left:-9999px;}




.buttons{list-style:none;}

.buttons li{margin:0 10px 0 0;display:inline;}

.buttons li a{color:#4f4f4f; font-weight:bold;display:block;float:left;padding-left:15px;background:url(../images/button.gif) top left;border:none;margin:0 10px 10px 0;}

.buttons li a span{display:block;float:left;padding-right:15px;height:28px;line-height:28px;background:url(../images/button.gif) top right;font-size:1.1em;cursor: pointer;}

.buttons li a.add{background-position:0 -28px;color:#fff;}

.buttons li a.add span{background-position:100% -28px;}


/*
# Forms ################### 
*/

.frm-search{float:right;margin-top:10px;}

.frm-search .text{height:26px;padding:5px 0 5px 15px;font-size:1.6em;background:url(../images/search.png) no-repeat left;border:none;float:left;}

.frm-search .submit{height:36px;float:left;}






fieldset{border:none;padding:10px;}

#main form h4{background:#2c0071;padding:10px;font-size:1em;color:#fff;}

#main form .item{margin-bottom:30px;clear: both}

#main form label{display:block;font-weight:bold;}

#main form .text{padding:5px;border:1px solid #0487cb;float:left;font-size:1.2em;}

#main form .text:focus{border-color:#f08303;}

#main form .item span{margin-left:10px;font-size:0.9em;color:#7a7a7a;font-weight:normal;}

#main form .select{padding:4px;}

#main form .checkbox input{}

#main form .checkbox label{display:inline;}

#main form .actions{padding:10px;border-top:1px dotted #dcdcdc;}

#main form .submit{padding:4px;}

#main form .actions a{font-weight: bold;}




#alert{border:1px solid;margin:10px 0;padding:10px;}

.error{border-color:#cc3333;color:#cc3333;background:#ffcccc;}

.success{border-color:#009900;color:#009900;background:#ccffcc;}


/*
# Tables ################### 
*/

.projects th{text-align: left;}

.projects td, .projects th{padding:4px;border-bottom:1px solid #d9d9d9;}

.projects tr.odd td{background:#f1f5fa;}

.projects td a{display:block;padding:4px;}

/*
# Typography ################### 
*/

p{
margin:10px 0;
}

/*
################### Other ################### 
*/

.right{
	float: right;
}

.left{
	float: left;
}

.alignleft{
	text-align: left;
}

.alignright{
	text-align: right;
}

.aligncenter{
	text-align: center;
}


/* Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements <http://electricprism.com/aeron/calendar> */
/* Default CSS for Calendar (navigation: 1), Copyright (c) 2007 Aeron Glemann <http://electricprism.com/aeron> */

.hidden {
	opacity: 0;
	position: absolute;
}
.visible {
	opacity: 1;
}


input.calendar,
select.calendar {
	width: 99px;
}

button.calendar {
	background: url(../images/calendar.gif);
	border: 0;
	cursor: pointer;
	float: left;
	height: 25px;
	margin-right: 6px;
	width: 25px;
}
button.calendar:hover,
button.calendar.active {
}

div.calendar {
	background: url(../images/calendar.png);
	height: 195px;
	padding: 0 6px;
	text-align: center;
	width: 147px;
}	
	div.calendar * {
		margin: 0;
		padding: 0;
	}	
	div.calendar div {
		background: none !important;
		cursor: move;
		height: 185px;
		overflow: hidden;
		padding-top: 10px;
		position: relative;
		width: 147px;
	}	
	
	div.calendar caption {
		color: #333;
		font: normal 12px/16px Arial, Helvetica, sans-serif;
		padding-top: 6px;
		text-align: center;
		width: 100%;
	}
	div.calendar caption a {
		cursor: pointer;
		display: block;
		height: 12px;
		overflow: hidden;
		position: absolute;
		text-indent: -100px;
		top: 17px;
		width: 11px;
	}
	div.calendar caption a.prev {
		background-image: url(../images/calendar-prev.gif);
		left: 0;
	}
	div.calendar caption a.next {
		background-image: url(../images/calendar-next.gif);
		right: 0;
	}
	div.calendar caption a:hover {
		background-position: 0 12px;
	}
	div.calendar caption span {
		height: 25px;
		position: relative;
		text-align: center;
	}
	div.calendar caption span.month {
		padding-right: 8px;
	}
	div.calendar caption span.month:after {
		content: ',';
	}

	div.calendar table {
		background: #FFF;
		border: 0;
		border-collapse: collapse;
		border-spacing: 0;
		cursor: default;
		margin: 0 auto;
		overflow: hidden;
		width: 147px;
	}
	div.calendar td,
	div.calendar th {
		border: 0;
		color: #0597DB;
		font: normal 12px Arial, Helvetica, sans-serif;
		height: 21px;
		text-align: center;
		width: 21px;
	}
	div.calendar td {
		background: url(../images/calendar-td.gif);
		color: #FFF;
		font-size: 11px;
	}
	div.calendar td.invalid {
		color: #999;
	}
	div.calendar td.valid {
		background: url(../images/calendar-valid.gif);
		color: #0597DB;
		cursor: pointer;
	}
	div.calendar td.hilite {
		background: url(../images/calendar-hilite.gif);
	}
	div.calendar td.inactive {
		background: url(../images/calendar-td.gif) 0 100%;
		color: #FFF;
	}
	div.calendar td.active,
	div.calendar td.hover {
		background: url(../images/calendar-valid.gif) 0 100%;
		color: #FFF;
		cursor: pointer;
	}