/* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:url('../assets/curtain.jpg') top center no-repeat ;
        min-width:600px;    /* Minimum width of layout - remove line if not required */
							/* The min-width property does not work in old versions of Internet Explorer */
		font-size:90%;
    }
#wrapper {display:block;margin:0 auto;padding:0;text-align:left;width:996px; }

	a {
    	color:#369;
	}
	a:hover {
		color:#fff;
		/*background:#369;*/
		text-decoration:none;
	}
    h1, h2, h3 {
        margin:5px 0 5px 0;
        padding:0;
    }
    p {
        margin:5px 0 .5px 0;
        padding:0;
    }
	/* Header styles */
    #header {
        clear:both;
        float:left;
        width:100%;/*background:url(../assets/bannerchosen.jpg) no-repeat; background-color:rgb(207,214,46);*/
	height:139px;
    }
	#header {
		/*border-bottom:1px solid #000;*/
	}
	#header p,
	#header h1,
	#header h2 {
	    padding:.4em 15px 0 15px;
        margin:0;
	}
	#header ul {
	    clear:left;
	    float:left;
	    width:100%;
	    list-style:none;
	    margin:121px 0 0 0;
	    padding:0;
	    text-align:center;
	}
	#header ul li {
	    display:inline;
	    list-style:none;
	    margin:0;
	    padding:0;
	}
	#header ul li a {
	  /*  display:block;
	    float:left;*/
	    margin:0 10px 0 10px;
	    padding:0 3px 0 3px;
	   font: bold 10pt "lucida grand",arial,sans-serif;
	   letter-spacing:2px;
	    text-align:center;
	    color:rgb(80,26,101);
	    text-decoration:none;
	    position:relative;
	    /*left:15px;
		line-height:1.3em;*/
	}
	#header ul li a:hover {
	    background:rgb(80,26,101);
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover {
	    color:#fff;
	    background:#000;
	    font-weight:bold;
	}
	#header ul li a span {
	    display:block;
	}
	/* 'widths' sub menu */
	#layoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.colmask {
	    position:relative;		/* This fixes the IE7 overflow hidden bug */
	    clear:both;
	    float:left;
        width:100%;			/* width of whole page */
		overflow:hidden;	/* This chops off any overhanging divs */
	}
	/* common column settings */
	.colright,
	.colmid,
	.colleft {
		float:left;
		width:100%;				/* width of page */
		position:relative;
	}
	.col1,
	.col2,
	.col3 {
		float:left;
		position:relative;
		padding:3px 0 7px 0;	/* no left and right padding on columns, we just make them narrower instead 
								only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.threecol {
		/*background:rgb(207,214,46);	*/	/* right column background colour */
	}
	.threecol .colmid {
		right:149px;
		/*right:25%;*/				/* width of the right column */
		/*background:#fff;*/		/* center column background colour */
	}
	.threecol .colleft {
		right:698px;
		/*right:50%;*/				/* width of the middle column */
		/*background:#CDCDCD;*/ /*#b2b2b2;*/		/* left column background colour */
	}
	.threecol .col1 {
		/*overflow:auto;*/
		width:682px;
		left:1004px;
		/*width:46%;*/				/* width of center column content (column width minus padding on either side) */
		/*left:102%;*/				/* 100% plus left padding of center column */
	}
	.threecol .col2 {
		font-family:arial,helvetica,sans-serif;
		font-size:10pt;
		width:133px;
		left:173px;
		/*width:21%;*/				/* Width of left column content (column width minus padding on either side) */
		/*left:31%;*/				/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	.threecol .col3 {
		font-family:arial,helvetica,sans-serif;
		font-size:10pt;
		width:133px;
		left:887px;
		color:rgb(80,26,101);
		/*width:21%;*/				/* Width of right column content (column width minus padding on either side) */
		/*left:85%;*/				/* Please make note of the brackets here:
								(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
	}

	/* Product panel */
	.threecol .col1 h2 {
		font-family:"lucida console",arial,helvetica,sans-serif;letter-spacing:5px;color:#ccc;
		        margin:3px 0 2px 0;

	}
	.threecol .col2 h2 {
		color:rgb(207,214,46);/*rgb(142,132,193);*/ letter-spacing:3px;font-family:"lucida console",arial,helvetica,sans-serif;
		background:rgb(80,26,101);padding:1px;/*padding-left:6px;*/width:100%;font-size:14pt;text-align:center;
	}
	.threecol .col2 p {
		color:rgb(80,26,101);
	}

	.threecol .col1.product img {
		margin:6px 5px 2px 6px;border:#ccc 1px solid;
	}
	.product .tick {
		margin:0;padding:3px 0 2px 4px;border:0;cursor:pointer;
	}


	.productview	{ border:1px solid black;background:#efefef;height:460px;overflow:auto; }

	.product	{ float:left;font-size:9pt;width:209px;height:360px;border:#ccc 1px solid;
			font-family:arial,helvetica,sans-serif;margin:6px 0 0 6px;background:#eaeaea;
		}

	.product .p_code, .p_title, .p_description, .p_colour, .p_care, .p_size, .p_price	
		{ margin:0 4px 0 4px;
		font-size:9pt;line-height:10pt;
	}

	.product .p_code span	{ color:rgb(80,26,101);/*font-family:"lucida grand",times,serif;*/font-weight:normal;	}

	.product .p_title, .product .p_price, .product .p_code	{ font-weight:bold;font-size:11pt;float:left;padding-top:4px;	}
	.product .p_title	{ color:rgb(80,26,101);width:100%;letter-spacing:-1px;}
	.product .p_code	{ clear:both;color:rgb(80,26,101); }
	.product .p_description, .product .p_colour, .p_care	{clear:both;margin-bottom:3pt;}
	.product .p_size	{font-weight:bold;font-size:8pt; }
	.product .p_buy	{float:right;padding-right:4px;}

	/* Footer styles */
	#footer {
        		clear:both;
        		float:left;
        		width:100%;
		border-top:1px solid #000;
		height:50px;
		
    	}
    #footer p {
        padding:10px;
        margin:0;
    }
.ticketa	{clear:both;	}
.lister {
	font-family:arial, helvetica,sans-serif;font-size:10pt;width:100%;border-collapse:collapse; border-width: 1px;
	border-style: dotted;border-color: #000;
}
.lister td	{
	border-style: dotted;border-color: #000;border-width: 1px;padding-left:8px;
}
.lister img	{
	margin:0;padding:0;
}
.txt	{
	color:black;width:80%;
}
.currency	{
	width:15%;text-align: right;color:#000;
	}
.small	{
	text-align: right;
	}
#dbug	{
	margin:5px 20px 5px 20px;font-size:9pt;width:70%;float:left;text-align:center;
	}
.totalbar	{
	float:left;width:100%;height:auto;margin:4px 0 4px 0;padding:2px 5px 2px 5px;font-size:11pt;color:white;background:rgb(80,26,101);
	font-family:verdana, sans-serif;font-size:10pt;font-weight:bold; 
	}
.totalbar a	{
	color:rgb(207,214,46);
	}
.totalbar a:hover {	
	text-decoration:none;
	}
.totalbar div	{
	float:left;
	}
#totals	{
	float:right;padding-right:15px;font-weight:bold;
	}
.totalcallout	{
	font-family:verdana, sans-serif;font-size:9pt;font-weight:bold; height:90px; width:130px;position:relative;
	color:#525491;background:#EEF2A4;padding:0px;border: 1px dotted rgb(80,26,101);
	}
.totalcallout img	{
	border:0; margin: 0 auto;position:absolute;top:68px;left:5px;cursor:pointer;
	}
.totalcallout p	{
	padding-top:8px;
	}
#totalright	{
	font-size:8pt;color:rgb(80,26,101);padding:0;margin:0;padding-top:20px;width:130px;
	}
.OrderBtn	{
	float:right;margin:5px;
	}
.orderItem img	{
	cursor:pointer;
	}
.buttoner {
	float:right;margin:0;padding:0;
}
.col3 h3 { font-size:10pt; }
.p_code	img {
	cursor:pointer;border:none;margin:0;padding:0 2px 0 0;/*margin:0 8px 0 8px;padding:0 8px 0 8px;*/
	}
.buttoner img	{
	cursor:pointer;
	}
a	{
	text-decoration:none;
	}
/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	margin: 4px 0 0 0;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	width:215px;
	top: 1px;
	float: left;
	padding: 4px 5px;
	margin: 0px 0px 0px 0px;
	font: bold 9pt arial,sans-serif;
	background-color: rgb(142,132,193);color:white;
	list-style: none;
	border-left: solid 2px #CCC;
	border-bottom: solid 2px rgb(80,26,101);
	/*border-top: solid 1px rgb(96,82,163); #999;*/
	/*border-right: solid 1px #999; rgb(96,82,163)*/
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: rgb(207,214,46);color:black;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
	background-color: rgb(207,214,46);color:black;
	border-bottom: 2px solid rgb(96,82,163);
	border-left: solid 2px rgb(80,26,101);

}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
}
.TabbedPanelsTab #totals {
	
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	/*border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #999;*/
	/*border-right: solid 1px #999;
	background-color: #EEE;*/
}

.myHover {
	color: #000;
	background-color: rgb(207,214,46); /*eca0d;*/
	cursor: pointer;
}

.mySelected { font-weight:bold;color: rgb(0,0,0);background-color: rgb(207,214,46);  }

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding-top: 5px;float:left;width:100%;/*border:1px solid black;*/
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}