/* Trunki Stylesheet developed by Jared Telling - Anagram Web Solutions March 2006 */

html{height: 100%;}
body{height: 100%;}
* html #wrap{height: 100%;}

body, #faq, #oops{background: url(images/bgStripe.gif) 0 6px repeat-x #fff; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #663399;}
#news{background: url(images/bgStripe_news.gif) 0 6px repeat-x #fff; color: #FF0000;}
#test{background: url(images/bgStripe_test.gif) 0 6px repeat-x #fff; color: #003399;}
#res{background: url(images/bgStripe_res.gif) 0 6px repeat-x #fff; color: #006600;}
#press{background: url(images/bgStripe_fun.gif) 0 6px repeat-x #fff; color: #663399;}
#fun{background: url(images/bgStripe_news.gif) 0 6px repeat-x #fff; color: #FF0000;}
#about{background: url(images/bgStripe_about.gif) 0 6px repeat-x #fff; color: #CC0000;}
#trunkiStory{background: none;}


/* *************************************************************
=Wrap - Used to Centre Page in the centre
************************************************************* */
#wrap{position: relative; min-height: 100%; width: 900px;}


/* *************************************************************
Content area
************************************************************* */
#contentArea{position: relative; float: left; width: 510px; padding-bottom: 130px;}

#awards{float: right; margin: 10px 20px 0 0; display: inline;}

#flags{float: left; width: 35px; margin: 208px 0 0 0;}
#flags img{ margin: 0 0 5px 0;}

#mainPic{float: left; margin-top: 20px; width: 330px;} /* Picture of child on left */

#mainPic h1{ font-size: 90%; margin: 0; color: #0099FF; padding: 20px 20px 0 30px;}
#mainPic h2{ font-size: 80%; margin: 0; color: #669900; font-weight: bold; padding: 5px 0 0 30px;}

#myAccount{float: right; padding: 0; margin: 5px 10px 0 0; width: 500px; font-size: 70%; color: #999999; display: inline; text-align: right;}
#myAccount a{color: #999999;}
#myAccount .greetUser a{ color:#FF3399; }
#myAccount .greetUser2 { color:#FF3399; }

#header{float: left; width: 520px; margin: 0 0 10px 0; display: inline; text-align: right; height: auto;}
#header .logo{float: left; margin: 0 0 0 10px; display: inline;}
#header img{ margin: 15px 0 0 10px;}

#nav{float: left; width: 500px; padding-left: 10px;}
#nav img{margin-left: 2px;}


/* *************************************************************
=links - Company Links e.g. Privacy, Press etc..
************************************************************* */
#companyLinks{width: 100px; float: left; margin: 365px 0 0 0;}
#companyLinks ul{margin: 0; padding: 0; list-style-type: none; font-size: 70%; color: #999999;}
#companyLinks li{margin: 0; padding: 0; line-height: 140%; text-transform: capitalize;}
#companyLinks li a{color: #999; text-decoration: none;}
#companyLinks li a:hover{color: #999; border-bottom: 1px solid #999;}

#pressList img{ float: left; margin: 0 14px 15px 0; display: inline;}
.btn_press{border-bottom: none; margin: 10px 0 0 50px; float: right;}
#news hr { clear: both;}


/* *************************************************************
Content =Body - Information, Text etc
************************************************************* */
/* Used to create the rounded box */
#bodyWrap, #bodyWrap #faq{float: left; width: 502px; background: #F9D3FA;}
#news #bodyWrap{background: #FEF7ED;}
#fun #bodyWrap{background: #FEF7ED;}
#test #bodyWrap{background: #F2FBFF;}
#res #bodyWrap{background: #E8F2C4;}
#press #bodyWrap{background: #FEF4FF;}
#about #bodyWrap{background: #FFF5F0;}

#fun #bodyWrap p a, #news #bodyWrap p a{color: #FF6600; text-decoration: none; border-bottom: 1px dashed #FF6600; font-weight: bold;}
#fun #bodyWrap p a:hover, #news #bodyWrap p a:hover{color: #FF0000; border-bottom: 1px solid #FF0000;}
#res #bodyWrap a{color: #663399; text-decoration: none; border-bottom: 1px dashed #663399; font-weight: bold;}
#res #bodyWrap a:hover{color: #006600; border-bottom: 1px solid #006600; font-weight: bold;}
#about #bodyWrap p a{color: #FF0000; text-decoration: none; border-bottom: 1px dashed #FF0000; font-weight: bold;}
#about #bodyWrap p a:hover{color: #CC0000; border-bottom: 1px solid #CC0000; font-weight: bold;}
#bodyWrap p a{color: #FF0099; text-decoration: none; border-bottom: 1px dashed #FF0099;}
#bodyWrap p a:hover{color: #663399; border-bottom: 1px solid #663399;}


/* Used to create the rounded box */
#bodyBlock, #bodyBlock #faq{width: 498px; overflow: auto; background: url(images/bodyBlockBG.jpg) no-repeat top left #F9D3FA; border-left: 2px solid #FF99FF; border-right: 2px solid #FF99FF;}
#news #bodyBlock{background: url(images/bodyBlockBG_news.jpg) no-repeat top left #FEF7ED; border-left: 2px solid #F98F00; border-right: 2px solid #F98F00;}
#test #bodyBlock{background: url(images/bodyBlockBG_test.jpg) no-repeat top left #F2FBFF; border-left: 2px solid #00ADEF; border-right: 2px solid #00ADEF;}
#res #bodyBlock{background: url(images/bodyBlockBG_res.jpg) no-repeat top left #F7FBEA; border-left: 2px solid #A1BF34; border-right: 2px solid #A1BF34 ;}
#fun #bodyBlock{background: url(images/bodyBlockBG_news.jpg) no-repeat top left #FEF7ED; border-left: 2px solid #F98F00; border-right: 2px solid #F98F00;}
#press #bodyBlock{background: url(images/bodyBlockBG_fun.jpg) no-repeat top left #FEF4FF; border-left: 2px solid #DA39FD; border-right: 2px solid #DA39FD;}
#about #bodyBlock{background: url(images/bodyBlockBG_about.jpg) no-repeat top left #FFF5F0; border-left: 2px solid #FE6216; border-right: 2px solid #FE6216;}

/* Testimonials Page */
.testImg{margin-left: 20px;}

/* FUN Page */
#fun .blue h2, #fun .green h2, #fun .purple h2, #fun .pink h2{font-size: 100%; margin: 20px 0 0 0; padding: 10px 0 20px 50px; clear: both; height: auto;}
#fun p.pdf{ background: url(images/icons/pdficon.gif) 0 0 no-repeat; padding: 0 0 0 30px; height: 30px; margin: 0;}

.blue{color: #003399;}
.blue h2 { background: url(images/icons/icon_stamp_blue.gif) 0 0 no-repeat;}
.green {color: #669900;}
.green h2 { background: url(images/icons/icon_stamp_green.gif) 0 0 no-repeat;}
.purple {color: #6633ff;}
.purple h2 { background: url(images/icons/icon_stamp_purple.gif) 0 0 no-repeat;}
.pink {color: #FF0099;}
.pink h2 { background: url(images/icons/icon_stamp_pink.gif) 0 0 no-repeat;}


/* Left Column */
#bodyBlock #colLeft{float: left; width: 265px; margin: 0 15px; display: inline;}
#bodyBlock #colLeft p a{ color: #663399; border-bottom: 1px dashed #663399;}
#bodyBlock #colLeft p a:hover{ color: #FF399C; border-bottom: 1px dashed #FF399C;}
#bodyBlock p{font-size: 70%; line-height: 160%; margin: 0 0 10px 0;}

/* Right Column */
#bodyBlock #colRight{float: left; display: inline; width: 200px;}
/* List items under picture of Trunki */
#bodyBlock #colRight ul{list-style: none; font-size: 100%; font-weight: bold; padding: 0; margin: 10px 0 0 20px;}
#bodyBlock #colRight li{background: url(images/btn_bullet.gif) 0 3px no-repeat;  padding: 5px 0 0 30px; margin: 0;}
#bodyBlock #colRight li a{color: #663399; text-decoration: none; border-bottom: 1px dashed #663399;}
#bodyBlock #colRight li a:hover{color: #663399; border-bottom: 1px solid #663399;}

#flash-homepage{margin: 0 0 20px 0; width: 180px; position: relative; z-index: 1;}
#flash-homepage p{ font-size: 60%; margin: 3px 0 0 0; width: 180px; text-align: center;}
#flash-homepage p a{ color: #666; border-bottom: none;}

#bodyBlock #colRight .trunkiHomepage{ float: left; width: 200px; clear: both; height: auto; margin: 0 0 12px 0;}
#bodyBlock #colRight .trunkiHomepage img{ float: left;}
#bodyBlock #colRight .trunkiHomepage p{ float: left; margin: 0 0 4px 10px; padding: 0 0 0 0; width: 90px;}


/* Heading Title */
h1{font-size: 100%; margin: 0 0 10px 0; padding: 0; font-weight:bold; line-height: 130%;}

#bodyMain h3{font-size: 75%; font-weight: normal; margin: 0 0 10px 0; padding: 0 0 10px 0; line-height: 130%;}
#bodyMain h3 a{ color: #663399; text-decoration: none;}
#bodyMain h3 a:hover{ text-decoration: underline;}

/* Magmatic Logo */
.magmaticLogo{margin-top: 30px;}

/* Homepage */
#colLeft h3{font-size: 80%; margin: 10px 0 10px 0; padding: 0; font-weight:bold; clear: both;}


/* *************************************************************
=Tour - Trunki Tour block and popup
************************************************************* */
.trunkiTour {float:right; width:185px; height:68px; text-align:center; background: url(http://www.trunki.co.uk/images/btn_trunkiTour_v2.gif) no-repeat 0 0px; margin: 20px 10px 0 0;}
a.trunkiTour:link, a.trunkiTour:visited, a.trunkiTour:active {text-decoration:none; background: url(http://www.trunki.co.uk/images/btn_trunkiTour_v2.gif) no-repeat 0 0px;}
a.trunkiTour:hover {background: url(http://www.trunki.co.uk/images/btn_trunkiTour_v2.gif) no-repeat -185px 0px;}


/* *************************************************************
PASSPORT PAGE
************************************************************* */
#passport table{ float: left; font-size: 70%; color: #663399; width: 100%; margin: 10px 0 20px 0;}
#passport th {font-weight: bold; height: 2em; padding: 5px 0 0 10px; text-align: left; background-color: #FCE8FD;}
#passport td{ color: #663399; padding: 8px 0 8px 10px;  border-top: 1px solid #F7C2F8; }
#passport tr a{ color: #663399; text-decoration: none;}
#passport tr a:hover{ color: #CC6600; text-decoration: underline;}

#passport .bg{ background-color: #F7C2F8;}
#passport .bg2{ background-color: #FCE8FD;}

#passportThankyou {width: 520px; height: 260px; text-align: center; margin: -180px 0 0 -260px; position:absolute; left: 50%; top: 50%; background: url(images/trunki-passport-medium.gif) 0 0 no-repeat; padding: 0 0 0 0;}
#passportThankyou p { float: right; width: auto; padding: 0 0 0 0; margin: 0 0 10px 0; clear: both; width: 250px; text-align: left; color: #660099; font-size: 80%; font-weight: bold;}

/* *************************************************************
=Cart - Shopping Cart Process - Checkout, Create Account, Login
************************************************************* */
/* Used on pages where no columns are needed */
#productListing{margin: 0 0 0 20px;}
#productListing form{margin: 0; padding: 0; clear: both;}
.product{padding: 0; margin: 10px 10px 0 0; width: 145px; float: right; text-align: left; display: inline;}
.product h2{margin: 0; padding: 10px 0; font-size: 90%;}
.noBorder{ border-bottom: none;}

#buyNow{ float: left; width: 260px; margin: 20px 0 20px 10px; text-align: left; display: inline; color: #663399;}
#buyNow p{font-size: 65%; margin: 0; padding: 0 0 0 5px; line-height: 160%; display: inline; float: left;}
#buyNow p a{color: #FF399C; text-decoration: none; margin-top: 5px; border-bottom: 1px dashed #FF399C;}
#buyNow p a:hover{color: #663399; border-bottom: 1px solid #663399;}

#bodyMain .contentList{float: left; width: auto; margin: 0 0 20px 0; text-align: left; display: inline; color: #663399;}
#bodyMain .contentList h2{font-size: 90%; margin: 0; padding: 0; float: left; clear: none;}
#bodyMain .contentList p{font-size: 70%; margin: 0; padding: 0; line-height: 160%; clear: none; float: left; width: 360px;}
#bodyMain .contentList p a{color: #663399; text-decoration: none; margin-top: 5px; border-bottom: 1px dashed #663399;}
#bodyMain .contentList p a:hover{color: #663399; border-bottom: 1px solid #663399;}
#bodyMain .contentList img{ float: left; margin: 0 20px 10px 0;}

#newsletter{ float: left; width: 250px; margin: 0 0 0 10px; text-align: left; display: inline; color: #0099FF;}
#newsletter form{margin: 0; padding: 0;}
#newsletter p{font-size: 70%; margin: 0; padding: 0; line-height: 140%;}
#newsletter input{border: 1px solid #00ADEF; vertical-align: middle; font: 70% Arial, Helvetica, sans-serif; color: #0099FF; padding: 2px;}
#newsletter .btn{border: 0;}

#friend{float: left; width: 230px; margin: 0; text-align: right; display: inline; color: #FF3300;}

.columnBlock{width: 200px; margin: 0 10px 0 10px; padding: 10px; float: left; display: inline;}
.columnBlock .text{width: 100px;}
.columnBlock p label{width: 80px; float: left;}
.columnBlock  a{ text-decoration:none; font-size:80%; color: #663399; border-bottom:1px dashed #663399; font-weight:bold;}

#createAccount, #shipping, #bodyMain{margin: 0 20px;}
#createAccount h2, #shipping h2, #bodyMain h2{font-size: 90%; margin: 30px 0 10px 0; padding: 0; clear: both;}
#createAccount h2 a, #shipping h2 a, #bodyMain h2 a{font-size: 70%; font-weight: normal; text-transform: uppercase; text-decoration: none;}
#createAccount .text{width: 100px;}
#createAccount p label{width: 150px; float: left;}
#createAccount #reset{float: right; margin-right: 30px;}

#checkout {margin: 10px 0 0 0; clear: both; float: right;}
#checkout ul{list-style: none; padding: 0; margin: 0;}
#checkout li{float: left; display: inline; padding: 0; margin: 0 0 0 10px; height: 2em;}


#subMenu{float: right;}
#subMenu ul{list-style: none; padding: 0; margin: 0;}
#subMenu li{float: left; display: inline; padding: 0; margin: 0 10px 0 0; height: 2em; font-size: 65%; text-transform: uppercase;}

#bodyMain ul{}
#bodyMain li{margin: 0 0 5px 0;}

#accountInfo dl{font-size: 75%; clear: both; padding: 0 0 30px 0}
#accountInfo dt{float: left; width: 100px; margin: 0 0 5px 0; padding: 0;}
#accountInfo dd{float: left; width: 160px; margin: 0 10px 5px 0; padding: 0;}
#accountInfo dd span{float: right;}

#errorList, #accountInfo ul, .bodyList ul{font-size: 70%; color: #663399;}
#errorList a, #accountInfo a, .bodyList a{ color: #663399; text-decoration: none; border-bottom: 1px dashed #663399;}
#errorList a:hover, #accountInfo a:hover, .bodyList a:hover{color: #663399; border-bottom: 1px solid #663399;}

#orderHistory dl{font-size: 75%; clear: both; padding: 0 0 20px 0; border-bottom: 1px dashed #fff; overflow: auto;}
#orderHistory dt{float: left; width: 100px; margin: 0 0 5px 0; padding: 0; font-weight: bold;}
#orderHistory dd{float: left; width: 120px; margin: 0 0 5px 0; padding: 0;}


/* *************************************************************
=Buttons
************************************************************* */

.btnContinue2, .btnDelete, .btnContinue, .btnChngAdd, .btnSubmit, .btnReset, .btnCreateAcc, .btnSignIn, .btnCheckout, .btnUpdate, .btnBack{height: 20px; font-size: 70%; color: #fff; text-decoration: none; display: block; text-transform: uppercase; cursor: pointer;}
a.btnContinue2, a.btnDelete, a.btnContinue, a.btnChngAdd, a.btnSubmit, a.btnReset, a.btnCreateAcc, a.btnSignIn , a.btnCheckout, a.btnUpdate, a.btnBack {border-bottom:none; color:#FFFFFF;}

.btnCheckout{width: 75px; background: url(images/buttons/btn_checkout.gif) 0 0 no-repeat; padding: 4px 0 0 25px;}
.btnBack, .columnBlock .btnBack{width: 52px; background: url(images/buttons/btn_back.gif) 0 0 no-repeat; padding: 4px 0 0 23px;}
.columnBlock .btnBack{font-size: 70%}
.btnChngAdd{width: 150px; background: url(images/buttons/btn_chngAdd.gif) 0 0 no-repeat; padding: 4px 0 0 25px;}
.btnDelete{width: 60px; background: url(images/buttons/btn_delete.gif) 0 0 no-repeat; padding: 4px 0 0 23px;}
.btnContinue2, .columnBlock .btnContinue2{width: 95px; background: url(images/buttons/btn_continue.gif) 0 0 no-repeat; padding: 4px 0 0 23px;}
.columnBlock .btnContinue2{font-size: 70%;}

.btnUpdate, .btnContinue, .btnSubmit, .btnReset, .btnCreateAcc, .btnSignIn{height: 22px; margin: 0; padding: 0 0 2px 23px; border: none; text-align: left; font-family: Arial, Helvetica, sans-serif;}
.btnSignIn{width: 80px; background: url(images/buttons/btn_signin.gif) 0 0 no-repeat;}
.btnCreateAcc{width: 150px; background: url(images/buttons/btn_createAcc.gif) 0 0 no-repeat;}
.btnReset{width: 80px; background: url(images/buttons/btn_update.gif) 0 0 no-repeat;}
.btnSubmit{width: 80px; background: url(images/buttons/btn_submit.gif) 0 0 no-repeat; margin-left: 130px}
.btnContinue{width: 95px; background: url(images/buttons/btn_continue.gif) 0 0 no-repeat;}
.btnUpdate{width: 90px; background: url(images/buttons/btn_update.gif) 0 0 no-repeat;}

/* *************************************************************
=Table Data
************************************************************* */
table.dataTable {margin:0; padding:0; width:100%; border:0; }
table.dataTable tr {padding:10px;}
table.dataTable th {font-size:70%;}


table.dataTable td { margin:0;font-weight:bold;text-align:middle;vertical-align:top;padding:12px 0 12px 5px;border:1px solid #FFFFFF;font-size:80%;}
table.dataTable td .priceTotalCost{font-size:120%;color:#66c;font-weight:bold;}
table.dataTable td .totalCost{font-size:120%;font-weight:bold;}
table.dataTable td.centered {text-align:center;padding:12px 10px 12px 10px;}
table.dataTable td.right{text-align:right;padding:12px 10px 12px 0;}
table.dataTable td .product a { font-weight:bold;color:#000; text-decoration:none; text-transform:uppercase;}
table.dataTable td .product a:hover { color:#666; }


/* *************************************************************
=Trunki Story
************************************************************* */
#storyWrap{width: 600px; margin: 0 auto; padding-top: 20px;}
#storyWrap #leftColumnStory{width: 250px; margin-right: 30px; float: left;}
#storyWrap #rightColumnStory{width: 300px; float: right; margin-right: 20px; text-align: right;}
#storyWrap #leftColumnStory h1{margin: 0 0 30px 0;}
#storyWrap p{font: 75% Arial, Helvetica, sans-serif; color: #0066FF; line-height: 170%;}
#storyWrap p a{font-family: Arial, Helvetica, sans-serif; color: #FF399C; text-transform: uppercase;}

/* *************************************************************
=TV As seen on TV
************************************************************* */
#seenOnTV{width: 300px; margin: 0 0 0 20px; padding-top: 20px;}
#seenOnTV p{font-size: 70%;}
#seenOnTV ul{ padding: 0 0 20px 0; margin: 0; list-style-type: none;}
#seenOnTV li {font-size: 70%; color: #FF399C; text-transform: uppercase; float: left; width: 100px;}
#seenOnTV li a{color: #FF399C;}
#seenOnTV .line{margin: 0 20px 0 0; padding: 0; height: 20px; border-bottom: 1px solid #ccc; width: 300px; clear: both;}


/* *************************************************************
=SITEMAP
************************************************************* */
#siteMap li{ font-size: 70%; }
#siteMap li a{ color: #663399;}
#siteMap li a:hover{ color: #FF399C;}


/* *************************************************************
=Footer
************************************************************* */
#footer{position: relative; margin-top: -130px; width: 100%; background: url(images/footer.jpg) no-repeat; height: 130px; clear: both;}

.clear{clear: both;}

#contact fieldset{ border: 1px solid #FF99FF; margin-top:20px; padding:10px; width:400px; height:auto; overflow:auto;}
#contact legend{ font: 80% Verdana, Arial, Helvetica, sans-serif;  color: #FF399C; font-weight: bold; display: block; width: 160px; text-transform:uppercase; }
#contact form p{ clear:both; margin:0; padding:0; padding-top:5px;vertical-align:top;}
#contact  p a{ color: #551A8B; font-weight:bold; text-transform:uppercase; text-decoration:none;  }
#contact label{ float:left; width:200px; text-align: left;}
#contact input{ margin-left:10px; width:180px; background-color:#fff; vertical-align:top;}
#contact input.txt{ color:#00008B; background-image:url(images/bg_input.gif); background-repeat:repeat; border:1px inset #00008b;width:200px; margin-top:5px;}
#contact textarea{ margin-left:10px; width:180px;}
#contact textarea.txt{ color:#00008B; background-image:url(images/bg_input.gif); background-repeat:repeat; border:1px inset #00008b;width:200px; margin-top:5px;}
#contact select { margin-left:10px;color:#000000;width:180px;}

#alert{ border:1px solid #FF99FF; width:auto; padding:5px; background-color:#FFF; color:#FF0066; font-size:70%; font-weight:bold; }

.line{margin: 0 0 20px 0; padding: 0; height: 10px; border-bottom: 1px dashed #FF99FF; width: 100%; clear: both;}

.imgSpace { margin: 0 10px 20px 0;}