/*  
Theme Name: MSDL Wave
Theme URI: http://www.msdl.net/
Description: A new skin for MSDL, hopefully not prophetic of an impending natural disaster!
Version: 0.2
Author: Sam Salisbury
Author URI: http://www.msdl.net/

	MSDL Wave v0.2
	http://www.msdl.net

	This theme was designed and built by Sam Salisbury,
	whose blog you will find at http://samsalisbury.co.uk/

	The CSS, XHTML and design is released under GPL:
	http://www.opensource.org/licenses/gpl-license.php
	

	*** REGARDING IMAGES ***
	All images used in this design and referenced by the CSS
	are Copyright (c) MSDL unless otherwise noted! Images may
	not be reproduced or used for derivative works without our
	express permission!
*/


/* Reset everything */

html, body, div, blockquote, p, h1, h2, h3, h4, h5, h6,
img, ul, ol, li, dl, dt, dd, object {
	margin:0;padding:0;border:0;
	font-size:100%;
	font-weight:normal;
	}


/* Fonts and colours */

h1 { /* Hide the H1 header... (there is must only be one per page) */
	position:absolute;
	top:0; left:0;
	height:0; width:0;
	line-height:0; font-size:0;
	overflow:hidden;
	}

h2 {
	color:#00ACE5;
	font-weight:bold;
	font-size:2em;
	}

h3 {
	color:#079;
	font-size:1.1em;
	}

hr {
	display:none;
	}

big {
	font-size:2.5em;
	color:#0CF;
	}

strong {
	font-weight:bold;
	}
	
a, a:link, a:visited, a:hover, a:active {
	text-decoration:none;
	}
a:link {
	color:#06F;
	}
a:visited {
	color:#07A;
	}
a:hover {
	color:#F90;
	}

.section-start {
	margin-top:10px;
	padding-top:10px;
	border-top:1px solid #DDD;
	}

.admin-tools {
	font-weight:bold;
	margin:5px 0 10px 0;
	padding:3px 10px 3px 10px;
	background:#FFD;
	border:1px dashed #FC0;
	font-size:1.5em;
	}
.admin-tools.small {
	padding:1px 5px 1px 5px;
	font-size:1em;
	margin:0;
	}

.smalltext {
	font-size:0.8em;
	color:#666;
	line-height:1.2em ! important;
	}

/* Menu styling */

#menu a, #menu a:link,
#menu a:visited,
#menu a:hover,
#menu a:active {
	font-weight:bold;
	letter-spacing:1px;
	}

/* Roll overs for top-level menu links */

#menu ul li a,
#menu ul li a:link,
#menu ul li a:visited,
#menu ul li a:hover,
#menu ul li a:active  {
	opacity:0.4;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
	background:#000;
	color:#FFF;
	/*border:1px solid #000;*/
	}

#menu ul li:hover a,
#menu ul li:hover a:link,
#menu ul li:hover a:visited,
#menu ul li.over a,
#menu ul li.over a:link,
#menu ul li.over a:visited {
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	background:#003;
	color:#FFF;
	}

#menu ul li:hover a:hover,
#menu ul li:hover a:active,
#menu ul li.over a:hover,
#menu ul li.over a:active {
	background:#DDF;
	color:#000;
	}

#menu ul li ul {
	border:1px solid #003;
	border-top:none;
	}


/* Roll overs for second level (dropdown) menu links... */

#menu ul li:hover ul li a,
#menu ul li:hover ul li a:link,
#menu ul li:hover ul li a:visited,
#menu ul li.over ul li a,
#menu ul li.over ul li a:link,
#menu ul li.over ul li a:visited {
	opacity:0.8;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	background:#003;
	color:#FC0;
	font-weight:bold;
	letter-spacing:normal;
	}
	
#menu ul li:hover ul li a:hover,
#menu ul li:hover ul li a:active,
#menu ul li.over ul li a:hover,
#menu ul li.over ul li a:active {
	opacity:1;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	background:#FC0;
	color:#000;
	}


/* Sidebar Styling */

#sidebar .item p.date {
	font-size:0.75em;
	color:#999;
	}
#main p {
	line-height:1.6em;
	text-align:center;
	}
	#main p big {
		line-height:1.2em;
		}

/* Images, borders and backgrounds */

html {	
	background:#FFF url(images/header_bg.gif) no-repeat top center;
	}
body {
	background:url(images/msdl_wave_3.jpg) no-repeat top center;
	}
	
#col1, #sidebar {
	border-left:1px dashed #DDD;
	}
	#sidebar .item {
		border-top:1px solid #DDD;
		}

#footer {
	border-top:1px solid #DDD;
	}

/* Implementing Jello Mould layout */

/* Holly hack for IE \*/
* html body,
* html #w1,
* html #w2 { height: 0; }
/* */

	body {
		font-size: 75%; /* Nice, readable default font */
		font-family: Arial, Helvetica, Sans-Serif;
		color: #666;
		padding: 0 432px 0 432px;
		text-align: center; /* centering hack for IE5.x/Win */
		}
		#w1 {
			width: 35%;
			max-width: 120px;  /* 1000 - 700 = 300 */
			margin: 0 auto 0 auto; /* standard centering method */
			text-align: left; /* resets centering hack to default */
			width:expression(document.body.clientWidth > 1280 ? "120px" : "35%" ); /* for IE only */
			}
			#w2 {
				margin: 0 -432px 0 -432px;
				min-width:865px;
				position: relative;
				text-align: left; 
				}
				#page {
					width:100%;
					text-align:center;
					}
					#header {
						position:relative;
						width:80%;
						height:185px;
						text-align:left;
						}
						#header img {
							position:absolute;
							top:70px;
							left:0;
							}
							
					#searchform {
						position:absolute;
						top:40px;right:43px;
						opacity:0.5;
						filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
						}
						#searchform label {
							font-size:18px;
							color:#FFF;
							font-weight:bold;
							position:relative;
							top:2px;
							margin:0 5px 0 0;
							}
						* html #searchform label {
							top:-2px;
							}
						#searchform #s {
							border:2px solid #FFF;
							background:none;
							color:#FFF;
							font-weight:bold;
							margin:0;
							padding:2px;
							height:18px;
							font-size:14px;
							line-height:1em;
							position:relative;
							}
						#searchform #searchsubmit {
							border:1px solid #FFF;
							background:#FFF;
							color:#000;
							font-weight:bold;
							margin:0;
							padding:4px;
							height:26px;
							/*line-height:1em;*/
							font-size:14px;
							position:relative;
							top:2px;
							cursor:pointer;
							}
							* html #searchform #searchsubmit {
								top:0;
								}
							#searchform #searchsubmit:hover {
								background:#FFF;
								color:#000;
								}
					
					#user {
						text-align:left;
						position:absolute;
						top:152px;
						background:#FFD;
						color:#555;
						z-index:99;
						border:1px dashed #DDD;
						width:170px;
						padding:10px;
						}
					
					#bct {
						position:absolute;
						top:188px;
						left:210px;
						z-index:99;
						border-bottom:1px dashed #DDD;
						}
					
					
					/*  Main menu layout... without javascript
						the submenu items just remain hidden ;) */
					
					
					#menu {
						position:absolute;
						top:0;
						left:43px; /* Needs to be adjusted manually to center the menu */
						padding:0;
						margin:0 auto 0 auto;
						/*width:100%;*/
						}
						#menu ul {
							list-style-type:none;
							display:block;
							}
							#menu ul li {
								display:block;
								float:left;
								position:relative;
								}
								#menu ul li a {
									position:relative;
									display:block;
									float:left;
									padding:0 10px 0 10px;
									height:20px;
									margin:0;
									line-height:20px;
									}
								#menu ul li ul {
									display:none;
									position:absolute;
									top:20px;
									left:0;
									text-align:left;
									width:150px;
									}
									#menu ul li ul li {
										display:block;
										float:none;
										position:relative;
										height:20px;
										}
									#menu ul li ul li a {
										display:block;
										height:20px;
										width:130px;
										float:none;
										}
										
								#menu li:hover ul,
								#menu li.over ul {
									display:block;
									}
						
						
						/* End of main menu */
						
						
					#main {
						position:relative;
						width:100%;
						overflow:visible;
						text-align:left;
						top:-50px;
						}
						* html #main {
							margin:0 0 -65px 0;
							}
							
						#main ul {
							margin:2px 0 10px 35px;
							}
							#main ul li {
								margin:0 0 8px 0;
								}
						
						#content {
							float:left;
							margin: 0 235px 0 0;
							overflow:visible;
							}
							#content #colwrapper {
								position:relative;
								width:100%;
								overflow:visible;
								}
								#content #col1 {
									width:47%;
									float:right;
									display:block;
									overflow:visible;
									padding:0 10px 0 15px;
									margin:60px 0 0 0;
									}
								#content #col2 {
									width:47%;
									float:left;
									display:block;
									margin:100px 0 0 0;
									}
								#content #col3 {
									float:right;
									display:block;
									margin:70px 10px 0 200px;
									color:#444;
									font-size:1.11em;
									}
									#col3 p {
										line-height:1.5em;
										margin:2px 0 10px 0;
										}
									
								#content #col4 {
									float:left;
									margin:100px -193px 0 0;
									padding:0 10px 0 10px;
									width:172px;
									border-right:1px dashed #DDD;
									}
								
						#sidebar {
							float:right;
							width:230px;
							margin:0 0 0 -235px;
							}
							#sidebar h2 {
								margin-left:10px;
								}
							#sidebar .item,
							#sidebar form {
								margin:5px 0 5px 10px;
								padding:5px 0 5px 0;
								}
							
					#footer {
						position:relative;
						margin:0 0 -15px 0;
						width:100%;
						clear:both;
						line-height:2em;
						}
						* html #footer {
							top:15px;
							}
						#footer[id] {
							top:-50px;
							}
						#copyright {
							position:absolute;
							right:0; top:0;
							}
						#tech {
							position:absolute;
							left:0; top:0;
							}
						
						
						
						
