@charset "utf-8";  
/* CSS Document */
/* ///////////////////////////////////// HTML ELEMENTS /////////////////////////////////////////////////  */
body 	{ margin:0; padding:0; background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ccc; }
div  	{ margin:0; padding:0; }
h3		{ margin:0; padding:0; color:none; position:relative; line-height:20px; }
h2		{ margin:0; padding:0; color:none; position:relative; line-height:20px; }
p		{ margin:18px 0 0 0; line-height:18px; }
form	{ margin:0; padding:0; }
#clear	{ clear:both;  }

/* ///////////////////////////////////// DIV ELEMENTS /////////////////////////////////////////////////  */
#wrapper		{ width:100%;  }
#header			{ background:#fff;   height:130px;   position:relative;  }
#logo			{ float:left;   padding:25px 0  0 25px;  }
#corner			{ position:absolute;   top:0;   right:0;   background:url(../img/corner.jpg) no-repeat #616066;   width:70px;   height:60px;  }
#main			{ background:url(../img/colright.jpg) repeat-x #5e5d63; overflow: hidden;}
#main_container	{ width:1015px; display:block;}
#colleft		{ float:left;   width:160px;   height:370px;   background:url(../img/navleft.jpg) repeat-x;  }
#navleft		{ width:159px;    height:370px;   color:fff;   border-right:1px solid #fff; background:#8fd300; margin-bottom: -2000px; padding-bottom: 2000px;}
#colcenter		{ float:left;   width:342px;  min-height:335px;    border-right:1px solid #fff;   background:url(../img/colcenter.jpg) repeat-x #aeaeae; padding:20px 14px 0px 14px;   color:#4d4e53;   }
	* html #colcenter	{ padding:10px 14px;  height:350px; }
#imagefix		{ margin-top:-20px;  margin-left: -14px; }
	* html #imagefix	{margin-top:-20px;  margin-left: -14px;  margin-right: -14px; }
#colright		{ float:left;   width:430px;   background:url(../img/colright.jpg) repeat-x;   min-height:330px;   padding:20px;   text-align:left;  }
  * html | #colright{ float:left;   width:420px;   background:url(../img/colright.jpg) repeat-x;   height:330px;   padding:20px;   text-align:left;  }
	* html #colright{ float:left;   width:430px;   background:url(../img/colright.jpg) repeat-x;   height:330px;   padding:10px;   text-align:left;  }

#widelayer		{ float:left;   width:760px;   background:url(../img/colcenter.jpg) repeat-x;   height:330px;   padding:20px;   text-align:left; }
#footer			{ padding:10px 0 0 10px;   color:#666; background: url(../img/bg.jpg); height:60px;}
#greenbar		{ background:url(../img/greenbar.gif) repeat-x;   margin:5px 0 10px 0;  height:9px;  }

#options		{ width:136px;   float:left;   }
#divide			{ float:left;   margin:0 4px;   height:130px;   background:url(../img/divide.gif) repeat-y;  }
#star			{ margin:0 0 10px 32px;   width:71px;   height:53px;   color:#fff;   font-size:30px;   padding-top:18px;   text-align:center;   background:url(../img/star.jpg) no-repeat;  }


#options2		{ width:790px; float:left; padding:15px 0;}
.optionMiddle	{ margin:0px;}
.divider2		{ border-bottom: 1px dashed #333;}
#divide2		{ float:left; margin:0 4px; height:130px; background:url(../img/divide.gif) repeat-y;  }

#star2			{ width:100px; float:left; height:45px; color:#fff; font-size:30px; margin:0 120px 0 80px ;}
#chooseTitle2	{ width:100px; float:left; height:32px; padding:13px 0 0 0;}
.chooseDrop		{ width:150px; float:left; margin: 10px 0 0 110px;}

#dotted			{ border-bottom:1px dashed #979797; }
#prise			{ padding:10px 0 0 0; text-align:right; width:100px; float:right;}
#map			{ margin:25px 0 0 0; }

#breadcrumbs					{}
	#breadcrumbs ul				{ margin:0; padding:0; }
	#breadcrumbs li				{ display:inline; color:#d5d6d7; }
	#breadcrumbs li a			{ text-decoration:none; color:#d5d6d7; }
	#breadcrumbs li a:hover		{ color:#fff; }
	
        #outletsgrid			{ background:none;}
	#outletsgrid th			{ text-align:left;  color:#4d4e53; padding:0px 0 5px 0; border-bottom:1px solid #4D4E53;}
	#outletsgrid tr			{}
	#outletsgrid td			{ text-align:left;  color:#4D4E53;  vertical-align:text-top;  border-bottom:1px dashed #666;  padding:5px 0 5px 0; }
	#outletsgrid td a		{ color:#fff;  text-decoration:none; }
	#outletsgrid td a:hover         { color:#a9de3b; }
/*#outletsscroll{	width: 430px; 	height: 245px; 	overflow: auto; 	clip: auto; }*/
#outletsscroll			{ width: 450px; 	height: 245px; }
#cartscroll				{ width:780px;  height: 200px; background:#fff; }
	* html #cartscroll	{ width:740px; height: 200px;}
#contacttitle			{ font-weight:bold;  color:#fff;  line-height:20px;  border-bottom:1px dashed #ccc;  text-align:left;  margin:5px 0 0 0; }
#contactdesc			{ font-weight:normal;  color:#fff;  line-height:33px;  border-bottom:1px dashed #666;  text-align:left; }
#presslinks			{ height:245px;  width:450px; }
#previewresults			{ background:#666;  border-bottom:1px dashed #ccc;  color:#fff;  line-height:20px;  padding:0 5px; }
#checkoutLeft			{ float:left; width:370px; height:320px;  color:#666;}
#checkoutRight			{ float:left; width:370px; height:320px; color:#666; margin:0 0 0 16px;}

#container-fade1		{ margin-top:10px;}


/* ///////////////////////////////////// CLASS ELEMENTS /////////////////////////////////////////////////  */
.floatleft				{ float:left; }
.floatright				{ float:right; }
.clear					{ clear:both; }
.hidden					{ visibility:hidden; display:none;}

/* to classes to position image above the h3 header tags  */
.home					{ background:url(../img/what-is-fatsak.gif) no-repeat; width:182px; height:19px; position:absolute; top:0px;   left:0px; }
.choose					{ background:url(../img/choose-your-bag.gif) no-repeat;   width:197px;   height:24px;   position:absolute;   top:0px;   left:0px;  }
.available				{ background:url(../img/available-fatsaks.gif) no-repeat;   width:204px;   height:19px;   position:absolute;   top:0px;   left:0px;  }
.outlets				{ background:url(../img/outlets.png) no-repeat;   width:161px;   height:19px;   position:absolute;   top:0px;   left:0px;   }
.gallery1				{ background:url(../img/the-fatsak-gallery.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }
.steps					{ background:url(../img/the-first-steps.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }

.cform					{ background:url(../img/contact-form.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }
.compform				{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-style:italic; font-size:26px; color:#4d4e53; font-weight:normal; }

.contactdetails			{ background:url(../img/contact-details.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }
.competitiondetails		{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-style:italic; font-size:26px; color:#fff; font-weight:normal; }

.press{ background:url(../img/in-the-press.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }
.preview{ background:url(../img/fatsak-preview.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }
.shopping{ background:url(../img/shopping-cart.gif) no-repeat;   width:164px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.login{ background:url(../img/login.gif) no-repeat;   width:61px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.step1{ background:url(../img/checkout-step1.gif) no-repeat;   width:198px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.step2{ background:url(../img/checkout-step2.gif) no-repeat;   width:198px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.step3{ background:url(../img/checkout-step3.gif) no-repeat;   width:198px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.step4{ background:url(../img/credit-card-verification.gif) no-repeat;   width:280px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.shipping{ background:url(../img/shipping-options.gif) no-repeat;   width:197px;   height:25px;   position:absolute;   top:0px;   left:0px;  }
.paymentresults{background:url(../img/paymentresults.gif) no-repeat;   width:231px;   height:24px;   position:absolute;   top:0px;   left:0px;}

/*.message		{background:url(../img/message.gif) no-repeat;   width:101px;   height:24px;   position:absolute;   top:0px;   left:0px;}*/
.message				{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-style:italic; font-size:26px; color:#4d4e53; font-weight:normal;}

/* icon elements  */
.icon1{ height:40px;  width:50px;  position:absolute;    top:-15px;  right:0px;  text-align:right; }
	* html .icon1{ display:none; }
.icon2{}
.love{ background:url(../img/love-your-fatsak.gif) no-repeat;   width:222px;   height:24px;   position:absolute;   top:0px;   left:0px;  }

/* form elements  */
.form {	font-family: Verdana, Arial, Helvetica, sans-serif; 	font-size: 10px; 	font-weight: normal; 	color: #FFFFFF; 	background-color: #333333; 	border: 1px solid #666666; }

/* fonts */
.font		{ font-family:Arial, Helvetica, sans-serif;}
.bold		{ font-weight:bold; }
.ten		{ font-size:10px;  }
.eleven		{ font-size:11px;  }
.twelve		{ font-size:12px;  }
.thirteen	{ font-size:13px;  }
.fourteen	{ font-size:14px;  }
.sixtten	{ font-size:16px;  }

/* text colours */
.green	{color:#a9de3b; }
.grey1	{color:#979797; }
.grey2	{color:#666; }
.grey3	{color:#333; }
.white	{color:#fff;}
.black	{color:#000;}
.blue   { color:#3399ff;}

/* padding */
.padleft5	{padding-left:5px;  }
.padright5	{padding-right:5px;  }

/* ///////////////////////////////////// TABBED TOP MENU /////////////////////////////////////////////////  */
#tabcontainer{
padding-top:25px;  
height:30px;  
width:160px;  
position:relative;  
color:#fff;  
}

.menu {
float:left;   
padding-left:0px;   /* space before first tab */
width:160px;   
height:auto;  
margin-bottom:-1px !important;   
}

.menu ul {
margin:0;  
padding:0;   
list-style:none;   
display:block;  

}

.menu li {
display:inline;   
width:145px;  
font-family:tahoma;  
margin:0;   
padding:0;  
height:auto;  
}

.menu ul li a{
display:block;   
border-bottom:1px solid #fff;  
height:30px;  
text-align:right;  
padding:0 15px 0 0;   
/*border-bottom:1px solid #fff;    line below the tab */
font-size:14px;   
font-weight:bold;  
text-decoration:none;   
line-height:30px;   
white-space:nowrap;   
margin-left:0px;   /* intertab spacing */
cursor:pointer;  
}

* html .menu ul li a, * html .menu ul li a {
width:145px;  
height:30px;   
}

.menu ul a b {
height:100%;   
display:block;   
color:#fff;   
font-weight:bold;  
}
.menu ul li a.tabactive 
/*#nav ul li:hover a*/{
height:30px;  
border-color:#fff;   /* colour of dividing line */
background-position:0px;   
background:#4d4e53 url(../img/tabactive.gif) no-repeat right;  
cursor:pointer;  
}

.menu ul li a.tabactive b{
background-position:100% 0px;   
color:#fff;  
}

.menu ul li a.defaultTabOff b {
color: #fff;  
}

/* //////////////////////////////////////  GALLERY  ////////////////////////////////////////////////////////  */
img.thumbs {float:left; 	height:80px;  width:106px;  margin-right: 9px;  margin-bottom: 7px;  cursor:pointer; }
#mainG {width:460px;  height:345px;  z-index:3;  position:relative;  overflow:hidden; }
	* html #mainG {width:440px;  height:345px;  z-index:3;  position:relative;  overflow:hidden; }
#loadertjie{ width:30px;  height:30px;  position:absolute;  top:150px;  left:30px;  z-index:1; }
#thumbContainer {width:345px;  height:260px;  z-index:2;  position:relative;  overflow:hidden; }
#photoDesc{ position:absolute;  bottom:10px;  left:0;  height:40px;  width:440px;  background:#000;  padding:10px;  -moz-opacity: 0.4;  Filter: Alpha(Opacity=40);  -khtml-opacity: 0.4;  opacity: 0.4; }
#photoDesc span{ -moz-opacity: 1;  Filter: Alpha(Opacity=100);  -khtml-opacity: 1;  opacity: 1; }

/* //////////////////////////////////////  jScrollPane  ////////////////////////////////////////////////////////  */
.scroll-pane {overflow: auto; }
a.jScrollArrowUp {background: url(../libraries/jquery/jScrollPane/basic_arrow_up.gif) no-repeat 0 0; }
a.jScrollArrowUp:hover {background-position: 0 -15px; }
a.jScrollArrowDown {background: url(../libraries/jquery/jScrollPane/basic_arrow_down.gif) no-repeat 0 0; }
a.jScrollArrowDown:hover {background-position: 0 -15px; }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {background-position: 0 -30px; 	}
.orange-bar .jScrollPaneTrack {	background: #666; }
.orange-bar .jScrollPaneDrag {background: #4d4e53 url(../libraries/jquery/jScrollPane/drag_grab.gif) no-repeat 50% 50%; }


/* ////////////////////////////////////////////// SELECT LIST BOX STYLES //////////////////////////////////////////// */

.trigger{border:1px solid #ccc; color:#666; width:35px; height:15px; padding:2px 0 0 2px; text-decoration:none; background:url(../img/arrow.gif) top right no-repeat #fff; display:block; margin-top:5px;}
.activetrigger{border:1px solid #ccc; color:#666; width:35px; height:15px; padding:2px 0 0 2px; text-decoration:none; display:block; 	background:#fff; }
		/* style of the UL */
.dropcontainer ul{background:#fff; border-bottom:none; list-style-type:none; padding:0; margin:0; width:39px; height:15px; position:absolute; }
.dropdownhidden{background:#fff; top:0; left:-999em; }
.dropdownvisible{background:#fff; top:0; left:0; }
.dropcontainer ul a{background:#F9F9F9; display:block; width:35px; height:15px; padding:2px 0 0 2px; text-decoration:none; color:#999; border-bottom:1px solid #EFEFEF; border-left:1px solid #EFEFEF; border-right:1px solid #EFEFEF; }
.dropcontainer ul a:hover{color:#999; background:#fff; }
.dropcontainer{	background:#fff; position:relative; }


/*----- New -----*/

ul.tabs 		{ margin:0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%;}
ul.tabs li 		{ float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #3399ff;}
ul.tabs li a 		{ text-decoration: none; color: #ffffff; display: block; font-size: 1em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none;}
ul.tabs li a:hover 	{ background: #979797; color:#fff;}
ul.tabs li.active a         { color:#3399ff;}
ul.tabs li.active a:hover   { color:#3399ff;}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ 
}

.tab_container 		{ border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; margin:0 0 0 0;}
.tab_content 		{ padding: 10px; font-size: 1em;}

#sakDiv			{ padding:10px; margin:10px 0px; border:1px solid #999; background:#fff;}

#availibleDesc		{ width:575px;}

#callUs				{ padding:35px 0 0 90px; width:655px; float:left;}
.callText			{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-size:24px; color:#999; width:450px;}
.headerTel			{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; font-size:54px; padding:0; margin:-15px 0 0 0; color:#a9de3b; width:500px;}
.compImage			{ width:135px; float:right;}