/*------------------------------------------------------------------
Steven Johnston @ CoCreate
for
CoCreate
06/04/2011

Version 1.0

Project: Oh To Go

**Please annotate amendments and log below**
--------------------------------------------
Amendments


--------------------------------------------
##Designers Notes
-----------------
Colours
-------
--------------------------------------------------------------------*/
*{
    padding:0;
    margin:0;
}
html{
    min-height:100%;
    margin:0 0 1px 0;
}
body{
    background:url("../images/bg.gif") repeat-x;
}
img{
    border:none;
}
/*---------------------------
		Structure
-----------------------------*/
#wrapper{
    width:980px;
    margin:0 auto 0 auto;
}
#banner{
    width:980px;
    height:135px;
    background:url("../images/bg_banner.jpg");
}
#ohtogo{
    position:absolute;
    width:242px;
    height:191px;
    z-index:10;
    margin:0 0 0 742px;
}
.bannerlink{
    float:left;
    display:block;
    width:290px;
    height:95px;
    margin:19px 0 0 25px;
}
#content{
    width:940px;
    margin:16px 0 0 0;
    padding:0 20px 0 20px;
    background:#FFFFFF;
}
#mainlinks{
    float:left;
    width:230px;
}
#searchhome{
    width:215px;
    height:105px;
    padding:35px 0 0 15px;
    background:url("../images/bg_searchhome.gif");
    overflow:hidden;
}
#searchhome table{
    margin:3px 0 30px 0;
}
#searchhome table tr td{
    vertical-align:middle;
}
td.inputhome{
    width:169px;
}
td.inputhome input{
    width:169px
}
#login, #viewbasket{
    width:230px;
    height:55px;
}
.maincontent{
    float:left;
    width:710px;
}
.maincontenttop{
    width:710px;
    height:30px;
    background:url("../images/bg_frame_top.gif");
}
.maincontentbody{
    width:650px;
    padding:0 30px 0 30px;
    background:url("../images/bg_frame_strip.gif");
    line-height:1.8;
	float:left;
}
.maincontentbottom{
    width:710px;
    height:30px;
    background:url("../images/bg_frame_btm.gif");
	float:left;
}
.box380{
    float:left;
    width:380px;
}
.titlebg{
    width:640px;
    height:30px;
    padding:10px 0 0 10px;
    background:url("../images/bg_title.gif");
}
.box380 .titlebg{
    width:380px;
}
.storyimgs{
    float:right;
    width:250px;
}
.storyimg{
    width:200px;
    height:150px;
    padding:25px;
    background:url("../images/bg_image.gif");
}
.storyimg img{
    width:200px;
    height:150px
}
.crumbtrail{
    padding:7px 0 15px 10px;
}
#detailitemtitle{
    width:640px;
    padding:7px 0 7px 10px;
    border-top:1px dotted #F66200;
}
.detailitems{
    border-bottom:1px dotted #F66200;
	float:left;
}
.detailitem{
    width:630px;
    padding:10px;
    border-top:1px dotted #F66200;
}
.detailitem img{
    float:left;
}
.newstext{
    float:left;
    width:325px;
    margin:0 20px 0 10px;
}
.text{
    padding:0 0 15px 0;
}
.divfooter{
    clear:both;
    width:1px;
    height:1px;
}
.detailitembtns{
    float:right;
    width:175px;
}
a.btn, a.btngreen, a.btnlong, a.btnshort{
    display:block;
    height:30px;
    padding:10px 0 0 15px;
}
a.btnshort{
	width:75px;
	background:url("../images/bg_btn_short.gif");
}
a.btn{
	width:175px;
	background:url("../images/bg_btn.gif");
}
a.btngreen{
	width:175px;
	background:url("../images/bg_btn_green.gif");
}
a.btnlong{
	width:261px;
	background:url("../images/bg_btnlong.gif");
	margin:5px 0 5px 0;
}
.productpanel{
    float:left;
    width:170px;
    height:300px;
    padding:0 20px 0 20px;
    margin:0 3px 0 3px;
    background:url("../images/bg_productpanel.gif");
	overflow:hidden;
}
.productpanel h2{
    padding:15px 0 0 0;
    height:33px;
}
.productpanel img{
    margin:0 0 15px 0;
}

.productpanel .text{height:90px; overflow:hidden;}

#flashhome{
    float:left;
    width:700px;
    height:250px;
    margin:0 0 20px 10px;
}
#categories{
    float:left;
    width:380px;
}
.category{
    float:left;
    width:190px;
    height:140px;
    background:url("../images/bg_homepanel_small.gif");
}
.category h1, .panellarge h1, .panelmed h1{
    margin:0 20px 0 10px;
    padding:7px 0 7px 0;
    border-bottom:1px solid #999999;
    text-align:right;
	font-size:0.8em;
}
.category h1{
    width:160px;
}
.panellarge h1, .panelmed h1{
    width:350px;
    margin-bottom:6px;
}
td.categoryimg{
    width:135px;
    padding:0 0 0 5px;
    vertical-align:top;
}
td.categorylink{
    width:28px;
    vertical-align:bottom;
}
td.categorylink img{
    padding-bottom:2px;
}
#features{
    float:left;
    width:380px;
}
.panelmed{
    width:380px;
    height:140px;
    background:url("../images/bg_homepanel_medium.gif");
}
.panelmed .paneltext{
    float:left;
    width:170px;
    padding:5px 0 0 10px;
	height:80px;
	overflow:hidden;
}
.panelmed .btnright{
    margin:57px 20px 0 0;
}
.panellarge{
    width:380px;
    height:280px;
    background:url("../images/bg_homepanel_large.gif");
}
.paneltextholder{
    float:left;
    margin:0 0 0 5px;
    width:175px;
    height:193px;
    overflow:hidden;
}
.panellarge .paneltext{
    margin-bottom:15px;
	height:230px;
	overflow:hidden;
}
.panellarge .btnright{
    margin:5px 20px 0 0;
}
.panelimg{
    float:left;
    margin:0 10px 0 7px;
}
.paneltext{
    line-height:1.4;
}
.btnright{
    float:right;
}
#rightcol{
    float:left;
    width:180px;
}
#latestnews{
    width:140px;
    height:235px;
    padding:45px 20px 0 20px;
    background:url("../images/bg_news_home.gif");
}
#latestnews a{
    height:10px;
}
.indexnewsitem{
    line-height:1.4;
    margin-bottom:15px;
}
.product{
    width:640px;
    padding:15px 0 0 10px;
    border-top:1px dotted #F66200;
}
.productimgs{
    float:right;
    width:315px;
}
.mainproductimg{
    width:271px;
    height:196px;
    padding:22px;
    background:url("../images/bg_mainproductimage.gif");
}

.productthumbs{
    width:293px;
    height:83px;
    padding:22px 0 0 22px;
    background:url("../images/bg_thumbnails.gif");
}

.nobackground{
    background:none;
}

.productthumbs img{
    float:left;
    margin-right:15px;
	border:1px solid #CCC;
}
.fivethumbs img{
	margin-right:5px;
}
.producttext{
    float:left;
    width:290px;
}
.product h3{
    margin-bottom:15px;
}
.productoptions{
    width:255px;
    padding:8px 0 0 0;
}
.option .radioInput{
	float:left;
}
.option{
    width:255px;
    padding-bottom:15px;
    margin-bottom:8px;
    border-bottom:1px dotted #F66200;
}
.option .textInput{
	width:200px;
	padding:3px;
	background-color:#E4E4E4;
	color:#000;
	border:none;
}
.option .selectInput{
	width:200px;
	padding:3px;
}
.option label{
	display:block;
	width:200px;
	float:left;
	padding:0 0 5px 5px;
	cursor:pointer;
}
.optionItem{
	width:255px;
	float:left;
	padding:0 0 5px 0;
	display:table-cell;
	vertical-align:middle;
}

.select{
    width:200px;
}
td.orange{
    width:100px;
    padding:0 0 5px 0;
}
td.quantity{
    padding:0 0 0 11px;
}
td.quantity input{
    width:20px;
}
.suggestions{
    width:650px;
    height:160px;
    background:url("../images/bg_otherproducts.gif");
}
.suggestions h2{
    padding:13px 0 0 25px;
    height:24px;
}
.suggestions table{
    width:600px;
    margin:10px 0 0 42px;
}
.suggestions td{
    width:150px;
    padding:0 0 5px 0;
}
td.suggestimg img{
    text-align:left;
    width:110px;
    height:70px;
}
#colright, #colleft{
    width:300px;
}
#colright h2, #colleft h2{
    padding:5px 0 5px 0;
    border-top:1px dotted #F66200;
    border-bottom:1px dotted #F66200;
    margin:0 0 12px 0;
}
#colleft{
    float:left;
    margin:0 0 0 10px;
}
#colright{
    float:right;
}
#enquiryform input, #enquiryform textarea, #giftCert input, #giftCert textarea, #offerCode input, #offerCode textarea{
    width:297px;
    border:none;
    background-color:#E4E4E4;
    padding:2px 0 2px 3px;
    margin:4px 0 8px 0;
}
#giftCert input, #giftCert textarea, #offerCode input, #offerCode textarea{
    width:200px;
    border:none;

    background-color:#E4E4E4;
    padding:2px 0 2px 3px;
    margin:4px 0 8px 0;
}
#enquiryform textarea, #giftCert textarea, #offerCode textarea{
    height:100px;
}
.bodytext{
    margin:0 0 0 10px;
}
#contentbottom{
    clear:both;
    width:980px;
    height:30px;
}
#ordersteps{
	border-top:1px dotted #F66200;
	border-bottom:1px dotted #F66200;
	padding:15px 0 15px 0;
	margin:35px 0 35px 0;
}
#ordersteps table{
	width:100%;
}
#ordersteps table td{
	text-align:center;
}
.addressbook{
	border-bottom:1px dotted #F66200;
	margin:0 0 15px 0;
}
/*---------------------------
		Basket
-----------------------------*/
#basket table{
	width:100%;
}
tr.tblHead td{
	border-top:1px dotted #F66200;
	border-bottom:1px dotted #F66200;
	padding:3px 0 3px 0;
}
#basket table tr.basketitem td{
	vertical-align:top;
	padding:10px 0 10px 0;
	border-bottom:1px dotted #F66200;
}
td#productCol{
	width:110px;
	padding:0 0 0 10px;
}
td.descCol{
	width:270px;
}
td.qtyCol{
	width:60px;
}
td.qtyCol input{
	width:22px;
}
td.priceCol{
	width:50px;
}
td.totalCol{
	width:60px;
}
td.btnCol{
	width:90px;
}
.totals{
	width:650px;
	border-bottom:1px dotted #F66200;
	padding:5px 0 5px 0;
}
.totalAmt{
	float:right;
	width:150px;
}
.totalLabel{
	float:right;
	width:100px;
}
#basketbtns{
	float:right;
	width:191px;
	margin:30px 0 0 0;
}
.shipping{
	float:right;
	padding:10px 0 10px 0;
	width:250px;
}
.offers{
	float:right;
	padding:10px 0 0 0;
	width:250px;
}
.billingNames{
	clear:both;
	margin:30px 0 30px 0;
}
.divbtm{
	clear:both;
	width:1px;
	height:1px;
}
#centercol{
	width:300px;
	margin:0 auto 0 auto;
}
#orderHistory{
	margin:35px 0 35px 0;
	width:650px;
}
#orderHistory table{
	width:100%;
}
#orderHistory table tr.tblBody td{
	padding:0;
	margin:0;
}
.emailinput{
	width:75%;
	border:none;
	padding:3px 0 3px 2px;
	margin:3px 0 20px 0;
	background:#D5D5D5;
}
/*---------------------------
      Delivery Table
-----------------------------*/
#delivery{
	width:100%;
}
td.tdName{
	width:120px;
}
td.firstLine{
	width:400px;
}
/*---------------------------
		Main Menu
-----------------------------*/
#mainmenu{
    width:800px;
    height:40px;
    background:url("../images/bg_mainmenu.gif") repeat-x;
}
#mainmenu ul{
    list-style:none;
}
#mainmenu ul li{
    float:left;
    width:127px;
    height:40px;
    text-align:center;
}
#mainmenu ul li:hover{
    background:url("../images/bg_mainmenu_hover.gif") repeat-x;
    border-bottom:2px solid #F66200;
}
#mainmenu ul li a{
    display:block;
    width:126px;
    margin:8px 0 0 0;
    border-right:1px solid #F66200;
}
/*---------------------------
       Product Menu
-----------------------------*/
#productmenu{
    width:230px;
}
#productmenutop{
    width:230px;
    height:30px;
    background:url("../images/bg_productmenu_top.gif");
}
#productmenubody{
    width:180px;
    padding:0 25px 0 25px;
    background:url("../images/bg_productmenu_strip.gif");
}
#productmenubottom{
    width:230px;
    height:30px;
    background:url("../images/bg_productmenu_btm.gif");
}
#productmenu ul{
    list-style:none;
}
#productmenu ul li{
    padding:4px 0 4px 0;
    height:14px;
    background:url("../images/img_arrow.png") right no-repeat;
}
/*------------ MC -----------*/
#pagescontainer{width:640px;float:left; clear:both;}
.pagelink{width:23px; height:23px; padding:8px; background-image:url(../images/pagination.jpg); text-align:center; display:block; color:#FFFFFF; font-size:11px; float:left}
.pagecurrent{width:23px; height:23px; padding:8px; background-image:url(../images/pagination_highlight.jpg); text-align:center; display:block; font-size:11px; float:left}
.pagelink:hover, .pagecurrent{background-color:#FFFFFF; color:#F66200; }
.red-text{color:#FF0000;font-size:11px;}

.productprice{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:0.9em;color:#F66200;}
.vat{font-size:0.7em;}
/*------------ MC -----------*/


/*---------------------------
		Typography
-----------------------------*/
#telno, #mainmenu, .titleorange, .paneltext, .white, .orange, a.btn, a.btngreen, a.btnlong, .tester, .maincontent{
    font-family:Verdana,Arial,Helvetica,sans-serif;
}
td.price, #basket table h2, #basket table tr.tblHead td{
    font-size:1.1em;
}
#telno, .titleorange, #footer, .maincontent{
    font-size:0.9em;
}
.orange, a.btn, a.btngreen, .text, a.btnlong, .shipping select, #basket table, .tester, #delivery table{
    font-size:0.7em;
}
#mainmenu, .paneltext, .white, .formtext{
    font-size:0.65em;
}
h1.white, h2.white, span.orange{
    font-size:1em;
}
.indexnewsitem h2.white{
    font-size:0.65em;
}
h2.orange, .select, .suggestions h2.white, .totals, #basket table tr.basketitem td.priceCol, #basket table tr.basketitem td.totalCol, .error-text{
    font-size:0.85em;
}
#mainmenu ul li a, .paneltext, .formtext, .text, .select, .text a, .grey{
    color:#414141;
}
.white, .white a, #footerlinks, a.btn, a.btngreen, a.btnlong, a.btnshort{
    color:#FFFFFF;
}
.error-text{
	color:#FF0000;
}
#telno, .titleorange, .orange, td.price, #basket table tr td.tblHead, #basket table tr td, #basket table tr.basketitem td input, .totals, .tester, tr.tblHead td{
    color:#F66200;
}
#telno, a.btn, a.btngreen, td.orange, td.price, span.orange, a.btnlong, a.btnshort, td .underline, #basket table tr td.tblHead, #basket table tr.basketitem td input, .totals, tr.tblHead td, .bold{
    font-weight:bold;
}
#mainmenu ul li a, #footerlinks ul li a, .white a, a.orange, a.btn, a.btngreen, a.btnlong, .text a, a.btnshort{
    text-decoration:none;
}
#footerlinks ul li:hover, .white a:hover, a.orange:hover, .text a:hover, td .underline{
    text-decoration:underline;
}

/*-------------------------------------------

            CHANGES APRIL 2011

-------------------------------------------*/
.neo{
    font-family:Neo,Arial,Helvetica,sans-serif;
}
.verdana{
    font-family:Verdana,Arial,Helvetica,sans-serif;
}
.lrgText{
    font-size:0.85em;
}
.font08{
    font-size:0.8em;
}
.font07{
    font-size:0.7em;
}
.bold{
    font-weight:bold;
}
#headerBasket{
    float:right;
    width:271px;
    height:122px;
    margin:13px 0 0 0;
    background:url('../images/bg_header_basket.gif');
}
#headerBasket table{
    width:261px;
    margin:10px 5px 5px 5px;
}
#headerBasket td{
    vertical-align:top;
    width:33.3%
}
#headerBasket .spacer{
    height:11px;
}
.textRight{
    text-align:right;
}
.text .white{
    color:#ffffff;
}
.text a{
    font-size:1em;
}
#orangeBar{
    float:right;
    width:261px;
    height:30px;
    padding:0 5px 0 5px;
    background:url('../images/bg_orange_bar.gif');
}
#orangeBar table{
    width:100%;
}
#orangeBar td{
    height:29px;
}
#orangeBar .inputText{
    border:none;
    width:120px;
}
/*-----------------------------------------
↓↓ #telno css removed from lines 55 - 60 ↓↓
-----------------------------------------*/
#telno{
    float:right;
    text-align:center;
    width:250px;
    margin:20px 50px 0 0;
    font-size:1.3em;
}
#telno p{
    margin-bottom:5px;
}
/*---------------------------
            Main Menu
-----------------------------*/
#mainmenu{
    width:708px;
    font-size:0.7em;
}
#mainmenu ul li{
    width:118px;
    position:relative;
}
#mainmenu ul li a{
    width:117px;
}
#mainmenu{
    font-weight:bold;
}
#mainmenu .menuOffer, #mainmenu .menuOffer:hover{
    background:url("../images/bg_menu_offer.gif") repeat-x;
}
#mainmenu .menuOffer a, #mainmenu .menuOffer a:hover{
    color:#ffffff;    
}
#mainmenu .noBorder{
    border:none;
}
#mainmenu ul li ul{
    left:-1000em;
    position:relative;
    width:210px;
    z-index:10;
    padding:10px 0 10px 0;
    margin-top:4px;
    background:#e46600;
}
#mainmenu ul li:hover ul{
    left:0;
    text-align:left;
}
#mainmenu .subParent:hover, #mainmenu .subParent ul li{
    height:25px;
    background:#e46600;
    border-bottom:none;
}
#mainmenu .subParent ul li{
    float:none;
    padding:0;
}
#mainmenu .subParent:hover a{
    color:#ffffff;
}
#mainmenu ul li ul a{
    display:block;
    width:185px;
    padding:6px 0 6px 25px;
    margin:0;
    text-align:left;
    background:none;
    border:none;
}
#mainmenu ul li ul a:hover{
    background:#ad2500;
}
/*---------------------------
     Search 
-----------------------------*/
#search{
    width:215px;
    height:70px;
    padding:13px 0 0 15px;
    background:url("../images/bg_search.gif");
    overflow:hidden;
}
#search table{
    margin:5px 0 0 0;
}
#search .white{
    font-size:1em;
}
#search .inputText{
    height:22px;
    border:none;
}
/*---------------------------
     Quick Search 
-----------------------------*/
#quicksearch{
    width:230px;
    height:162px;
    margin-top:5px;
    background:url("../images/bg_product_search.gif");
}
#quicksearch p{
    width:190px;
    padding:10px 20px 0 20px;
}
#quicksearch select{
    width:175px;
    margin:25px 20px 0 20px;
    padding:2px 0 2px 2px;
}
#quicksearch h2{
    font-size:1em;
    padding:15px 0 10px 0;
    margin:0 20px 0 20px;
    border-bottom:1px solid #ffffff;
}



#categories{
    float:left;
    width:570px;
}
.infoImgs{
    float:right;
    width:363px;
}
.infoImg{
    margin:0 0 10px 0;
}


#footer{
    width:980px;
    background:url("../images/bg_footer.gif") no-repeat #e46600;
    margin:0 0 50px 0;
    padding:0 0 15px 0;
}
#footerlinks{
    float:right;
    width:320px;
    margin:5px 150px 0 0;
}
#footerlinks ul{
    list-style:none;
}
#footerlinks ul li{
    float:right;
    margin:0 0 0 1em;
}

#footer h3{
    font-size:1.1em;
}

.footerList{
    float:left;
    margin:10px 50px 0 20px;
    line-height:1.7;
}
.footerList ul{
    list-style:none;
}

#footerRight{
    margin:10px 15px 0 0;
    float:right;
    width:180px;
    text-align:right;
    line-height:1.7;
}
#footerRight img{
    margin-top:5px;
}


.social{
    float:right;
    margin:0 10px 0 0;
}
#credits{
    float:left;
    margin:12px 0 0 20px;
    width:300px;
    line-height:1.8;
}
.floatFix{
    clear:both;
    width:1px;
    height:1px;
}

#indexScroller{
    width:909px;
    height:250px;
    padding:15px 20px 15px 15px;
    margin-bottom:22px;
    background:url('../images/bg_index_scroller.gif');
}
#indexScroller h2{
    padding:0 0 8px 0;
    border-bottom:1px solid #9d9d9f;
}
.outerScrollTable{
    width:909px;
}
.outerScrollTable .nav{
    vertical-align:top;
    width:19px;
}
.outerScrollTable .nav img{
    margin-top:60px;
    cursor:pointer;
}
.outerScrollTable .scrollCell{
    width:971px;
}
.outerScrollTable .scrollerHolder{
    position:relative;
    width:850px;
    padding:10px;
    overflow:hidden;
}
.scrollTable{
    position:relative;
    left:0;
}
.scrollTable td{
    width:170px;
    text-align:center;
}
.scrollTable td div{
    width:150px;
    padding-right:20px;
}
.scrollTable td p{
    width:150px;
    line-height:1.5;
    padding:5px 0 5px 0;
}
.scrollTable .btnAdd{
    margin-top:4px;
}
.scrollTable .prodPrice{
    font-size:0.8em;
}
.clear{clear:both; width:1px; height:1px;}
#product_group p {
	padding-top:15px;
	padding-bottom:5px;
}