/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * CSS and HTML Template by Dominic Winsor: www.wherefromhere.com, www.get2dom.com.
 * Project: PeptideSynthetics (Peptide Protein Research Ltd)
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * If you're interested in the techniques used here, take a look at:
 *  - http://www.alistapart.com - techniques for web development.
 *  - http://www.w3.org/ - for the standards.
 *  - http://www.tantek.com/CSS/Examples/boxmodelhack.html - box model hack (bmh)
 *  - http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html - IE5-Mac hack (IE5-Mac)
 *  - http://www.positioniseverything.net/explorer/doubled-margin.html - IE Doubled Float-Margin Bug (IEFloat)
 *  - http://www.w3.org/QA/Tips/font-size - Why the big fonts?
 *  - http://www.clagnut.com/blog/348/ - sizing text in 'em's
 *  - http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/ - min-height: fixed;
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *                                               - Dominic Winsor, www.get2dom.com
 */
 
 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Element redefinitions
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */

@media screen
{
	.audio { display: none !important; }
}

body {
	color: #00466C;
	background: white;
	margin: 0px;
	text-align: center;
	font-size: 68.9%; /* Default (medium) is 16px: scale to 11px */
	font-family: Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
}

p, div {
	font-family: inherit;
}

td, th {
	vertical-align: top;
}

input, select, textarea {
	font: 1em Trebuchet MS, Geneva, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5 {
	margin: 0 0 0.25em 0;
}

p {
	/* paragraphs: space after, no space before */
	margin: 0 0 1em 0;
}

h1 { 
	font-size: 2em;
	margin: 0 0 0.5em 0;
}
h2 { 
	font-size: 1.3em;
	margin: 0 0 1em 0;
} 
h2 span.light { font-weight: normal; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }

form {
	margin: 0;
}

h3 a {

}

h3 a:hover {
	text-decoration: underline;
}

a:link         { color: #0066CC; }

/* ~~~  corporate colours (for SPANs etc) ~~~ */
.liveryColour1 { color: #00466C; }
.liveryColour2 { color: #CC0033; }

dl dt {
	font-weight: bold;
}

code {
	font-size: 1.2em;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * STRUCTURE 
 * Content & page/template structure definitions
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/

/* ~~~ utility navigation ~~~  */
#utility, #creditContainer
{
	text-align: right;
	background: white;
	padding: 0;
	margin: 10px auto;	
	/* ~~ start: bmh ~~ */
	width: 770px; /* ie */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width:768px; /* everyone else */
	/* ~~ end: bmh ~~ */
	color: #6690A7;
	font-size: .9em
}
#utility a, #creditContainer a
{
	color: #66A3E0;
}
#utility a.calc
{
	background: transparent url('icon-sitemap-2.gif') 0 0 no-repeat;
	padding: 0 0 0 16px;
}

/* ~~~~~~~~~~~~~~~~~~ width constrain container ~~~~~~~~~~~~~~~~~~ */
/* ~~~ everything is placed inside the uberContainer ~~~ */
#uberContainer {
	text-align: left;
	background: white;
	padding: 0;
	margin: 5px auto;
	border: 1px #ddd solid;	
	/* ~~ start: bmh ~~ */
	width: 770px; /* ie */
	voice-family: "\"}\""; 
	voice-family:inherit;
	width:768px; /* everyone else */
	/* ~~ end: bmh ~~ */
}

/* ~~~ heading strap ~~~ 
 * comprised of identContainer which sits inside the headerContainer 
 */
#headerContainer {
	background: #FFF;
	padding: 30px 20px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * PRIMARY NAVIGATION
 * List-item based navigation. See www.alistapart.com for more info
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */
#navContainer {
	float: left;
	width: 760px;
	background: #E5ECF0 url('elements/nav-bg2.gif') bottom left repeat-x;
	color: white;
	padding: 0px;
	padding-left: 8px;
}

#navContainer ul {
	margin: 0px;
	padding: 0px;
	display: inline;
	list-style: none;
}
#navContainer ul li {
	float: left;
	margin: 0;
	font-size: 1.1em;
	display: inline;
	list-style: none;
}
#navContainer ul li a {
	padding: 6px 14px 22px 14px;
	color: #00466C;
	text-decoration: none;
	width:.1em; /* Clickable region fix part 1 of 2 (ala) */
	white-space: nowrap;
/* IE5-Mac.start  \*/
	display: block;
/* IE5-Mac.end */
}

/* Clickable region fix part 2 of 2 (ala) */
#navContainer > ul li a {
	width:auto;
}

/* IE5-Mac.start  \*/
#navContainer a {float:none;}
/* IE5-Mac.end */

#navContainer a.on {
	color: #CC0033;
	background: url('elements/nav-arrow3.gif') bottom center no-repeat;
}

#navContainer a.on div {
	display: block;
}

#navContainer ul li a:hover {
	color: #CC0033;
}

#navContainer a.on:hover {
	color: #FF0000;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * HOME PANELS
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */

#columnWrapper {
	width: 100%;
	clear: both;
	float: left;
	background: #DDE6EB url('elements/main-bg.jpg') top left repeat-x;
	padding-bottom: 25px;
}

/* ~~~~~~~~~~~~~~~~~~ MAIN CONTENT ~~~~~~~~~~~~~~~~~~ */
#columnContent { /* 510 px*/
	width: 460px;
	margin: 20px 25px;
	float: left;
	display: inline; /* IEFloat */ 
	background: transparent url('elements/pBase.gif') bottom left no-repeat;
}
#columnContentLining { 
	margin-bottom: 14px;
	padding: 25px 30px 5px 30px;
	background: #D1DEE6 url('elements/pTop.jpg') top left no-repeat;
}
#columnContent h3
{
	margin-top: 1.4em;
}

/* ~~~~~~~~~~~~~~~~~~ RELATED CONTENT ~~~~~~~~~~~~~~~~~~ */
.columnRelated { /* 280px */
	margin: 20px 30px 0 0;
	width: 220px;
	float: right;
	display: inline; /* IEFloat */ 
	background: transparent url('elements/rBase.gif') bottom left no-repeat;
}
.columnRelatedLining {
	padding: 25px 20px 1px 20px;
	margin-bottom: 14px;
	background: #C5D6DE url('elements/rTop.jpg') top left no-repeat;
}

/* a columnRelated without a picture - just a few lines, requires darker base image
 * class="columnRelated mini"
 */
.mini { background: transparent url('elements/rBaseDark.gif') bottom left no-repeat; }

/* same as above, but used lower down the page - curve antialiased to end of page gradient */
.columnRelatedLiningLower {
	padding: 25px 20px 1px 20px;
	margin-bottom: 14px;
	background: #C5D6DE url('elements/rTopLight.jpg') top left no-repeat;
}

#columnRelatedLining ul {
	list-style: disc;
	margin: 0 0 1em 0;
	padding-left: 2em;
	text-indent: 0;
}
.columnRelated img.photo {
	margin: 0 0 0 10px;
	border: 0;
}
.columnRelated h3 a
{
	color: #00466C !important;
}

/* ~~~~~~~~~~~~~~~~~~ MAIN CONTENT (FULL WIDTH) ~~~~~~~~~~~~~~~~~~ */
.columnFull { /* 760 px*/
	width: 710px;
	margin: 10px 25px;
	float: left;
	display: inline; /* IEFloat */ 
	background: #D1DEE5 url('elements/wBase2.gif') bottom left no-repeat;
}
.columnFullLining { 
	margin-bottom: 14px;
	padding: 25px 30px 5px 30px;
	background: transparent url('elements/wTop2.gif') top left no-repeat;
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * FOOTER PANELS
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */
 
#footerContainer {
	clear: both;
	float: left;
	display: inline; /* IEFloat */ 
	width: 100%;
	background: #F5F8F9;
	color: #7D7B7D;
}
#footerContainer p {
	padding: 10px;
	margin: 0;
	float: left;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * EXTENDED STUFF
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */
 
 /*
*::-moz-selection {
 background: #CC0033;
 color: white;
}

::selection {
 background: #CC0033;
 color: white;
}
*/


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * BOX-MODEL HACK, "be nice to opera" rules.
 * If you don't know what these are for, check the links at the top of this file.
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */

html>body #uberContainer {
	width:768px; /* opera */
} 



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Modifications Browser
 * This is a clickable list of peptide modifications - list on the left, data on right
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */

#modBrowser {
	background: #DDE6EB url('elements/main-bg.jpg') top left repeat-x;
	float: left;
	margin-bottom: 1em;
}

#modSelection {
	width: 200px;
	padding: 10px;
	margin-bottom: 1em;
	float: left;
	display: inline;
}
#modDetails {
	width: 365px;
	float: left;
	display: inline;
	margin: 0 0 0 2px;
	padding: 7px 20px;
	border-left: 4px solid #D1DEE5;
}
#modSelection ul {
	list-style: none;
	margin: 0;
	padding: 0;
	text-indent: 0;
}
#modSelection ul li {
	margin: 2px 0;
}

#modSelection ul li a {
	text-align: right;
	background: #D1DEE6;
	padding: 3px 8px;
	color: #0066CC;
	width: 182px;
/* IE5-Mac.start  \*/
	display: block;
/* IE5-Mac.end */
}

/* IE5-Mac.start  \*/
#modSelection a {float:none;}
/* IE5-Mac.end */

#modSelection ul li a:hover {
	color: #CC0033;
}
a.mod-off 
{
	border: 0;
}
a.mod-on
{
	color: #00466C !important;
	text-decoration: none;
	background: transparent url('elements/mod-list-on.gif') top right repeat-y !important;
}

#modSelection p {
	font-size: 0.9em;
	padding: 1em;
}
.modHidden {
	display: none;
}
.mod {
	display: block;
}
.mod p.img {
	text-align: center;
}
.mod p.img img {
	border: 1px gray solid;
}
.mod h3 {
	margin-top: 0;
}

#modWelcome strong {
	color: #CC0033;
}


/* min-height workaround
 * with many thanks to MezzoBlue: 'min-height: fixed; September 16, 2004 10AM PST'
 * http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/
 */
/* for Mozilla/Safari/Opera */
*>.mod, *>#modWelcome {
 padding-top: 325px;
 min-height: 1px;
}
*>.mod div.mHeight, *>#modWelcome div.mHeight {
 margin-top: -325px;
}
/* for IE, with IE5/Mac backslash filter \*/
* html .mod, * html #modWelcome {
 height: 325px;
}
/* end min-height workaround */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * FAQ items
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/
 
.faq h2
{
	margin-top: 2em;
	padding-top: 2em;
	border-top: 1px dotted #6690A7;
}
 
.faq h3 {
	margin: 0 0 0.5em 0;
}
.faq p {
 	margin: 0 0 2em 3em;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * sitemap
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
*/



/* sitemap
*/
ul.sitemap {
  	margin: 0;
  	padding: 0;
  	float: left;
  	width: 400px;
}
ul.sitemap li {
  	float: left; 	
  	list-style: none;
  	margin: 0;
}
ul.sitemap a {
  	width: 378px; 	
  	background: transparent url('icon-sitemap-1.gif') 5px 60% no-repeat;
  	padding: 5px 0 5px 22px;
  	border-bottom: 1px dotted #b4c6d2;
  	text-decoration: none;
  	white-space: nowrap;
	/* IE5-Mac.start  \*/
  	display: block;
	/* IE5-Mac.end */
}
/* IE5-Mac.start  \*/
ul.sitemap a {float:none;}
/* IE5-Mac.end */



/* indent: 1 */
ul.sitemap li ul {
	margin: 0;
	padding: 0;
}
ul.sitemap li ul li a {
	background-position: 21px 60%;
  	padding: 5px 0 5px 40px;
  	text-decoration: none;
  	font-size: .9em;
  	white-space: nowrap;
	/* IE5-Mac.start  \*/
  	display: block;
	/* IE5-Mac.end */
	width: 360px;
}


/* indent: 2 */
ul.sitemap li ul li ul {
	margin: 0;
	padding: 0;
}
ul.sitemap li ul li ul li a {
 	color: #000;
	background-position: 51px 60%;
  	padding: 5px 0 5px 70px;
  	text-decoration: none;
  	white-space: nowrap;
	/* IE5-Mac.start  \*/
  	display: block;
	/* IE5-Mac.end */
	width: 330px;
}
ul.sitemap a:hover {
	text-decoration: underline;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 * Data tables
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
 */

table.data td, table.data th {
	background: #C9D7E0;
	padding: 0.5em 1em;
}

ul.data, ul.data li
{
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.data li
{
	width: 170px;
	background: #C9D7E0;
	padding: 0.5em 1em;
	margin: 1px 6px 0 0;
}
ul.data 
{
	margin: 0 0 2em 0;
}

/* ############ CALCULATOR ############# */

.calcContainer {
	background: #DDE6EB url('elements/main-bg.jpg') top left repeat-x;
	border: 5px solid #D1DEE6;
	float: left;
	width: 400px;
}

.calcInputBody {
	padding: 10px;
	font-size: 8pt;
	line-height: 12pt;
}
.calcInputBody p, .calcOutputBody p {
	font-weight: bold;
}
.calcOutputBody {
	padding: 10px;
	font-size: 8pt;
	line-height: 12pt;
}

.calcInputBody textarea {
	width: 160px;
	background-color: white;
	font-family: monospace;
}
.calcOutputBody textarea {
	width: 170px;
	background: transparent;
	border: 1px solid #00466C;
}
.calcContainer textarea  {
	padding: 5px;
	color: #00466C;
}

.validationAdvice {
	color: #CC0033;
}

/* data thumbnails (delivery.php) */
#data {
	width: 400px;
	float: left;
}
.deliveryData img {
	border: 1px gray solid;
	width: 180px;
	height: 142px;
	margin: 0 0 1em 0;
}
.deliveryData {
	width: 180px;
	float: left;
	margin: 0 15px 20px 0;
	display: inline;
}