/* General styles */
    body {
        margin:0;
        padding:0;
        border:0;			/* This removes the border around the viewport in old versions of IE */
        width:100%;
        background:#eee;/*url(backblend.jpg); /**/
        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; }


	/* Header styles */
    #header {
        clear:both;
        /*float:left;*/
        width:100%;background:url(../assets/swoop-top.jpg) ; 
	height:240px;
    }
	#header img{
		border:0;margin:0;
	}
	#header p,
	#header h1,
	#header h2 {
	    padding:.4em 15px 0 15px;
        margin:0;
	}
	#header .hdrmenu { 	   
		/*left:265px;top:30px;*/
		/* margin:30px 0 0 0;*/
 		}
	#header ul, #footer ul {
	    clear:left;
	    float:left;
	    width:100%;/*148px;*/
	    list-style:none;
	top:50px;
	margin:0px 0 0 0;
	    padding:0;
	}
	#header ul li, #footer ul li {
	    display:inline;
	    list-style:none;
	    margin:0 0 0 1px;
	    padding:0;
	}
	#header ul li a, #footer ul li a {
	    display:block;
	    float:left;
	    margin:0 0 0 1px;
	    padding:3px 0;
	    text-align:center;
	    background:url(../assets/connections.gif) no-repeat; /*#eee;*/
	    color:#eee;
	    text-decoration:none;
	    position:relative;
	    height:24px;width:148px;
	left:250px;/*399px;top:30px;*/

		/*line-height:1.3em;*/
	}
	#header ul li a:hover, #footer ul li a:hover {
	    background:url(../assets/connections-hov.gif) no-repeat; /*rgb(194,187,228);*/
		color:#fff;
	}
	#header ul li a.active,
	#header ul li a.active:hover,
	#footer ul li a.active,
	#footer ul li a.active hover {
	    color:#fff;
	    background:url(../assets/connections-act.gif) no-repeat;
	    font-weight:bold;
	}
	#header ul li a span {
	    display:block;
	}

	/* 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 10px 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;
	}
	.col2 { padding-top:0px; }
	/* 3 Column settings */
	.threecol {
		background:#fff; /*rgb(194,187,228);*/ /*#915287;*/		/* right column background colour */

	}
	.threecol .colmid {
		right:181px;
		/*right:25%;*/				/* width of the right column */
		background:#fff;		/* center column background colour */

	}
	.threecol .colleft {
		right:535px;
		/*right:50%;*/				/* width of the middle column */
		background:#fff; 		/* left column background colour */
	}
	.threecol .col1 {
		/*overflow:auto;*/
		width:519px;
		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:9pt;
		width:280px;
		left:197px;
		/*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 {
		color:black;
		font-family:arial,helvetica,sans-serif;
		font-size:9pt;
		width:176px;
		left:732px;
		/*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) */
	}
	.threecol .col1 p {
		font-family:arial,sans-serif;font-size:10pt;letter-spacing:1pt;color:#585180;line-height:14pt;
	}
	.threecol .col2 .backg {
		margin:0;border:0;
	    	/*background:url(swoop-nose.jpg) no-repeat ;*/

	}
	.threecol .col2 p.comm, 	.threecol .col3 p.comm { 
		/*font-family:tahoma,arial,san-serif;font-size:10pt;letter-spacing:1pt;line-height:14pt;*/color:#585180;padding:0 12px 0 10px;
	}
	.threecol .col2 p.sign, 	.threecol .col3 p.sign { 
		font-weight:bold;color:black;padding:0 12px 0 10px;padding-bottom:5px;
	}

	.threecol .col2 .productCats a	{
		font-size:8pt;font-weight:bold;color:white;padding:0;	
	}
	.threecol .col2 a:hover	{
		color:black;
	}
	/* Footer styles */
	#footer {
        clear:both;
        float:left;
        width:100%;
		border-top:1px solid #000;
	background:url(../assets/footer.jpg) no-repeat;height:160px;
    }
    #footer p {
        padding:10px;
        margin:0;
    }

	/* Product panel */


	.col3 img { border: 1px solid white; margin-top:4px;}


	.productCats	{
		height:425px;width:182px;overflow:auto;border:1px solid black;padding-left:3px;line-height:8pt;
	}
	.col2 { color:white;	}
	.col2 .productCats a	{
		color:white;
	}
	.col2 .productCats a:hover	{
		color:yellow;
	}
	
	.col2 p, .col3 p	{
		margin:2px 0 4px 0;
	}

	.col3 form	{ margin:0; padding: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;
	}
.col3 .totalcallout	{
	font-family:verdana, sans-serif;font-size:10pt;font-weight:bold; height:140px;text-align:center; 
	color:rgb(80,26,101);background:#E1CA3E;/*padding:5px;*/margin-top:5px;
	}
.totalcallout img	{
	border:0; /*margin: 0 auto;*/position:absolute;top:106px;left:23px;
	}
.totalcallout div	{
	padding-top:5px;
	}
#totalright	{
	font-size:9pt;color:rgb(80,26,101);padding-top:10px;width:100%;
	}
.OrderBtn	{
	float:right;margin:5px;
	}
.orderItem img	{
	cursor:pointer;
	}
.buttoner {
	float:right;margin:0;padding:0;
}


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: 10px 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:160px;
	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:black;*/
	background:url(../assets/connections.gif) repeat-x; 
	list-style: none;
	border-left: solid 2px #CCC;
	border-bottom: solid 1px #ccc;
	border-top: solid 1px rgb(96,82,163); /*#999;*/
	border-right: solid 1px rgb(96,82,163); /*#999;*/
	-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:url(../assets/connections-hov.gif) repeat-x; 
}

/* 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:url(../assets/connections-act.gif) repeat-x; 
	border-bottom: 1px solid #EEE;
}

/* 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: #fff;
	text-decoration: none;
}
.TabbedPanelsTab #totals {
cursor:pointer;	
}

/* 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(255,155,205); /*eca0d;*/
	cursor: pointer;
}

.mySelected { font-weight:bold;color: rgb(0,0,0);background-color: rgb(162,153,204);  }

/* 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: 4px;float:left;width:98%;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 {
}

/*EXTRANAV*/
#extranavcontainer { width:176px; text-align:left; margin: 10px 10px 10px 9px; }
#extranav_top { width:176px; height:7px; background:url(../assets/bg_extranav_top.gif) top left no-repeat; margin: 0px; }
#extranav_nextsteps {text-align:center;font:bold 12px/12px Verdana, Arial;color:#fff;width:176px;height:20px; background:url(../assets/bg_extranav_nextsteps.gif) top left no-repeat; margin: 0px;padding-top:5px;}
#extranav_nextstepsred { text-align:center;font:bold 12px/12px Verdana, Arial;color:#fff;width:176px; height:20px; background:url(../assets/bg_extranav_nextstepsred.gif) top left no-repeat; margin: 0px; padding-top:5px;}
#extranav_nextstepsgreywh { text-align:center;font:bold 12px/12px Verdana, Arial;color:#fff;width:176px; height:20px; background:url(../assets/bg_extranav_nextsteps_greywh.gif) top left no-repeat; margin: 0px; padding-top:5px;}
#extranav_bottom { width:176px; height:19px; background:url(../assets/bg_extranav_bottom_wh.gif) top left no-repeat; margin: 0px;}
#extranav_bottom.bg { background:url(../assets/bg_extranav_bottom_tan.gif) top left no-repeat; }
#extranav { background: url(../assets/bg_extranav_center.gif) top left repeat-y;  }
#extranav h1 { font: normal 14px/14px Verdana, Arial; color:#F10; }
#extranav h3 { font: bold 14px/14px Verdana, Arial; color:#000; padding:3px 3px 4px 0px; border-bottom:1px solid #CCC; }
#extranav ul { list-style: none; padding:0 1px 0 1px; color:#000; }
#extranav li { padding: 4px 0px 4px 0px; border-bottom:0px; }
#extranav p { padding: 4px 15px 4px 15px; }
#extranav img.icon {margin:3px 5px 0 15px;vertical-align:middle;}
#extranav a:link, #extranav a:visited {font-weight:bold;padding-left:15px; }
#extranav a.blue  { text-decoration: none; color:#015ba7; }
#extranav a:hover { color:#F10; text-decoration:none; }
#extranav a:hover.blue { color:#F10; text-decoration:none; }
#extranav a span { display:block; color:#000; border-bottom:0px; }
#extranav a:hover span { color:#F10; background-color:#FFF; border-bottom:0px; }

.productitem {font:bold 12px/12px Verdana, Arial;color:#000; clear:both;height:auto; }
.productitem div { padding:3px 0 0 0;}
.productitem ul { display:block;list-style: none; margin:0;padding:0 1px 0 1px; color:#000; }
.productitem li { padding: 4px 0px 4px 0px; border-bottom:0px; }
.productitem p { padding: 4px 15px 4px 15px; }
.productitem img.icon {margin:3px 5px 0 15px;vertical-align:middle;cursor:pointer;}