/**************************************/
/* GEOMETRY */

/* Fixed-width, centred layout */
body {
text-align: center; /* centre wrapper - IE */
}
#wrapper {
margin: 0 auto; /* centre wrapper - Non-IE */
text-align: left; /* but don't centre contents */
}

/* Layout size, margin & padding */
/* Padding comes outside width! */
body {
margin: 0;
}
#wrapper {
padding: 0 10px;
width: 950px;
}
#header,
#navigation {
padding: 0px;
width: 950px;
}
#mainbody {
padding: 10px;
width: 930px;
}
#footer {
clear: both;
padding: 10px;
width: 930px;
}
#footer p {
margin: 0 0 5px 0;
}

#header-left {
float: left;
padding: 30px 20px;
text-align: left;
}
#header-right {
padding: 10px 20px 10px 0;
text-align: right;
}

#sitename {
margin: 0;
padding-bottom: 8px;
}
#byline {
margin: 0;
}
#contact {
padding-bottom: 58px;
}

/* Margin & padding */
#mainbody *:first-child {
margin-top : 0;
}
.email { margin-bottom: -3px; }

/* Borders */
#footer {
border-top: 1px solid #CCC;
}

/* General floats (???) */
.floatleft {
float: left;
margin: 0 10px 10px 0;
}
.floatright {
float: right;
margin: 0 0 10px 10px;
}

div.projectgroup {
float: left;
margin: 0 10px 10px 0;
padding: 10px;
text-align: center;
width: 155px;
}
.photo-link-100 {
margin-bottom: 10px;
}
.photo-link-120 {
float: left;
height: 210px;
/*margin: 0 17px 10px 17px;*/
margin: 0 15px 10px 15px;
text-align: center;
width: 120px;
}
.photo-link-150 {
float: left;
height: 150px;
/*margin: 0 17px 10px 17px;*/
margin: 0 15px 10px 15px;
text-align: center;
width: 150px;
}
.photo-link-150 img {
height: 100px;
width: 150px;
border: 2px solid;
}
.photo-link-product {
text-align: center;
width: 150px;
}
.photo-link-product .text {
height: 3em;
}
#leftcolumn {
float: left;
width: 320px;
}
#leftcolumn .photo-link-product {
float: left;
margin: 0 10px 10px 0;
}
#rightcolumn {
float: right;
width: 160px;
}
#rightcolumn .photo-link-product {
float: right;
margin: 0 0 10px 10px;
}
#maintext {
}
#contactform {
float: right;
margin: 0 0 10px 10px;
}
/**************************************/
/* NAVIGATION */

/* SON OF SUCKERFISH Dropdown Navigation */
/* by Patrick Griffiths & Dan Webb */
/* http://www.htmldog.com/articles/suckerfish/dropdowns/ */
/* Edited to allow other widths */
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
z-index: 2;
}
#navigation a {
display: block;
} 
#navigation li {
float: left;
margin-bottom: 0; /***/
}
#navigation li ul li {
float: none; /* Keep 2nd level menu vertical */
}
#navigation li ul ul {
margin: -24px 0 0 100%;
/* width: 10em; Alternatively, use nbsp in item text */
}
#navigation li ul {
left: -999em; 
position: absolute;
/* width: 100%; This default is overridden in html */
} 
#navigation li:hover ul,
#navigation li.sfhover ul {
left: auto;
}
#navigation li:hover ul ul, 
#navigation li.sfhover ul ul {
left: -999em;
position: absolute;
}
#navigation li:hover ul li:hover ul, 
#navigation li.sfhover ul li.sfhover ul {
left: auto;
}
/* END SON OF SUCKERFISH */

/* Clear navigation float */
#mainbody {
clear: right; 
}

/* IE6/7 BUGFIX - gap between list items */
/* http://phonophunk.com/articles/ie-fix-for-gaps-between-list-items.php#altmethod1 */
#navigation ul li { display: inline; }
/* END IE6/7 BUGFIX */

/* DIV STRETCH - make div as large as floated items */
/* http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
#navigation {
overflow: auto; 
}
/* END DIV STRETCH */

/**************************************/
/* NAVIGATION STYLING */

/* Menu items */
/* Styling <a> rather than <li> gives better results */
#navigation a {
color: #333;
font-weight: bold;
text-align: left;
text-decoration: none;
}
#navigation li:hover a, 
#navigation li.sfhover a {
background-color: #0CC;
color: white;
}
#navigation li:hover a:hover { 
color: #333;
}
/* Primary menu items */
#navigation>ul>li>a {
font-size: 14px;
padding: 8px 15px 8px 16px;
padding: 8px 12px 8px 13px;
}
/* Secondary menu items */
#navigation ul li ul li a {
background-color: #0CC;
border-top: 1px solid white;
color: white;
font-size: 12px;
padding: 4px 14px;
}

/**************************************/
/* Slideshows */

#slideshow {
	font-style: italic;
	list-style: none;
	width: 820px;
	z-index: 0;
}
#slideshow li {
	text-align: center;
	width: 100%;
}

/**************************************/
/* OTHER STYLES */
/**************************************/

.contact {
}

/**************************************/

#email
.email {
margin-bottom: -3px;
}

/**************************************/

div.explanation {
visibility:			hidden; 
position: absolute; 
right:				0px; 
top:				0px;
z-index:			1; 
width:				200px; 
padding:			5px; 
background-color:	#ffffff;
border: 2px outset #eee;
text-align: left;
}

/**************************************/

ul.list-snowflake
	{
	list-style-image: url(../GRAPHICS/flake2-20ph.gif);
	}
ul.list-snowflake li
	{
	margin: 0;
	padding: 0 0 0.5em 0.5em;
	}

/**************************************/
/* New styles for storyboards - down with tables! */

#storyboard {
margin: 0 auto; /* Centre storyboard - Non-IE */
text-align: center; /* Centre storyboard - IE */
width: 600px;
}
#storyboard img {
/* display: block; Images occupy own space unless otherwise stated */
margin-bottom: 10px;
}
#storyboard p {
display: block;
margin: 1em 0;
text-align: left;
}

ul {
display: block;
overflow: hidden; 
text-align: left;
}
.left {
display: block;
float: left;
margin: 0 10px 10px 0;
}
.right {
display: block;
float: right;
margin: 0 0 10px 10px;
}
/* Gives best consistency of display between DW, IE and FF */
br.clear {
clear: both;
font-size: 0;
}
/* Image list */
.photo-link-150 img {
border-width: 2px;
}

/**************************************/

ul.list-postcode
	{
	font-size: 1.05em;
	font-weight: bold;
	list-style: none;
	margin-left: 0;
	margin-right: 10px;
	padding-left: 0;
	}
ul.list-postcode ul
	{
	font-size: 0.9em;
	font-weight: normal;
	list-style-type: disc;
	margin-bottom: 1em;
	}


.brochure {
background: url(../GRAPHICS/criocabin-brochure.jpg) no-repeat; 
display: block;
height: 65px; 
margin: 2px 10px;
padding: 90px 10px; 
text-align: center; 
width: 145px;
}

#features h3,
#features h4 {
border-bottom: 1px solid #bbb; 
clear: right;
}
#features .imagebox { 
float: right;
margin-bottom: 1em;
margin-top: -2.4em;
text-align: right;
}
#features .imagebox img { 
float: right;
margin: 0 0 10px 10px;
}
#features .imagebox .label { 
clear: both;
margin: -8px 0 10px 10px; /* not working somehow? */
}