﻿/* BLOCK CURVED */

.block_curved
{
	 position: relative;
	 min-width: 8em;
	 max-width: 760px; /* based on image dimensions - not quite consistent with drip styles yet */
	 z-index: 1;
	 overflow: hidden;
}

.block_curved > .t
{
	position: relative;
}

.block_curved > .t > .l,
.block_curved > .t > .innr,
.block_curved > .b > .bl,
.block_curved > .b > .br
{
	background-repeat: no-repeat;
	background-position: top right;
}

.block_curved > .t > .l
{
	/* top+left vertical slice */
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px; /* top slice width */
	height: 100%;
	background-position: top left;
}

.block_curved > .t > .innr
{
	padding-top: 5px;
	margin-left: 5px;
	padding-right: 5px;
	zoom: 1;
}

.block_curved > .t > .innr > .ctnt_wrap
{
	margin: -4px;
	zoom: 1;
}

.block_curved > .t > .innr > .ctnt_wrap > .ctnt
{
	overflow: hidden;
	z-index: 1;
	position: relative;
	zoom: 1;
}

.block_curved > .b
{
	/* bottom */
	position: relative;
	width: 100%;
}

.block_curved > .b,
.block_curved > .b > .bl,
.block_curved > .b > .br
{
	height: 8px; /* height of bottom cap/shade */
	font-size: 1px;
}

.block_curved > .b > .bl,
.block_curved > .b > .br
{
	position: absolute;
}

.block_curved > .b > .bl
{
	background-position: bottom left;
	left: 0;
	width: 50.9%; /* slightly over 50% to fix a 1 pixel gap in safari and chrome */
}

.block_curved > .b > .br
{
	background-position: bottom right;
	right: 0;
	width: 50.9%; /* slightly over 50% to fix a 1 pixel gap in safari and chrome */
}

.block_curved > .t > .innr
{
	padding-top: 10px;
	margin-left: 10px;
	padding-right: 10px;
}

.block_curved > .b,
.block_curved > .b > .bl,
.block_curved > .b > .br
{
	height: 10px; /* height of bottom cap/shade */
}

.box_with_header
{
    font-size: 0.85em;
}

.box_with_header > .t > .l
{
	width: 26px;
}

.box_with_header > .t > .innr 
{
    margin-left: 26px;
}

.box_with_header > .t > .innr > .ctnt_wrap 
{
    margin-left: -20px;
}

.box_with_header .ctnt > .ctr
{
    display: none;
}


/* Default grey */

.block_curved > .t > .l,
.block_curved > .t > .innr,
.block_curved > .b > .bl,
.block_curved > .b > .br
{
	background-image: url(../../../api/box.ashx?radius=8&border=bfbfbf&width=1000&height=1000&weight=2);
}

.box_with_header > .t > .l
{
    background-image: url(../../../api/box.ashx?radius=26&border=bfbfbf&width=100&height=1000&weight=2);
}

.pageroot_default .block_curved > .t > .l,
.pageroot_default .block_curved > .t > .innr,
.pageroot_default .block_curved > .b > .bl,
.pageroot_default .block_curved > .b > .br
{
	background-image: url(../../../api/box.ashx?radius=8&border=0092CC&width=1000&height=1000&weight=2);
}

.pageroot_default .box_with_header > .t > .l
{
    background-image: url(../../../api/box.ashx?radius=26&border=0092CC&width=100&height=1000&weight=2);
}

.pageroot_aboutus-default .block_curved > .t > .l,
.pageroot_aboutus-default .block_curved > .t > .innr,
.pageroot_aboutus-default .block_curved > .b > .bl,
.pageroot_aboutus-default .block_curved > .b > .br
{
	background-image: url(../../../api/box.ashx?radius=8&border=ff0000&width=1000&height=1000&weight=2);
}

.pageroot_aboutus-default .box_with_header > .t > .l
{
    background-image: url(../../../api/box.ashx?radius=26&border=ff0000&width=100&height=1000&weight=2);
}

.pageroot_purchase-default .block_curved > .t > .l,
.pageroot_purchase-default .block_curved > .t > .innr,
.pageroot_purchase-default .block_curved > .b > .bl,
.pageroot_purchase-default .block_curved > .b > .br
{
	background-image: url(../../../api/box.ashx?radius=8&border=E7BFFF&width=1000&height=1000&weight=2);
}

.pageroot_purchase-default .box_with_header > .t > .l
{
    background-image: url(../../../api/box.ashx?radius=26&border=E7BFFF&width=100&height=1000&weight=2);
}

.pageroot_products-default .block_curved > .t > .l,
.pageroot_products-default .block_curved > .t > .innr,
.pageroot_products-default .block_curved > .b > .bl,
.pageroot_products-default .block_curved > .b > .br
{
	background-image: url(../../../api/box.ashx?radius=8&border=003f7a&width=1000&height=1000&weight=2);
}

.pageroot_products-default .box_with_header > .t > .l
{
    background-image: url(../../../api/box.ashx?radius=26&border=003f7a&width=100&height=1000&weight=2);
}

.pageroot_support-default .block_curved > .t > .l,
.pageroot_support-default .block_curved > .t > .innr,
.pageroot_support-default .block_curved > .b > .bl,
.pageroot_support-default .block_curved > .b > .br
{
	background-image: url(../../../api/box.ashx?radius=8&border=ff8400&width=1000&height=1000&weight=2);
}

.pageroot_support-default .box_with_header > .t > .l
{
    background-image: url(../../../api/box.ashx?radius=26&border=ff8400&width=100&height=1000&weight=2);
}


/* colour-specific */

/* home */

.pageroot_default .box_with_header h1 
{
	background-color: #0092CC;
}

/* about */

.pageroot_aboutus-default .box_with_header h1 
{
	background-color: #FF0000;
}

/* products */

.pageroot_products-default .box_with_header h1 
{
	background-color: #003f7a;
}

/* purchase */

.pageroot_purchase-default .box_with_header h1 
{
	background-color: #9F00FF;
}

/* support */

.pageroot_support-default .box_with_header h1 
{
	background-color: #FF8400;
}

/* admin */

.pageroot_admin-default .box_with_header h1 
{
	background-color: black;
}


/* fluid-border styles */

.atl_box .content,
.atl_box .t,
.atl_box .b,
.atl_box .b div 
{
	background-color: Transparent;
	background-repeat: no-repeat;
	background-position: top right;
}

.atl_box {
	margin:10px auto;
}

.atl_box h1,
.atl_box p {
	margin:0px;
	padding:0.5em 0px 0.5em 0px;
}

.atl_box h1 {
	padding-bottom:0px;
}

/* icon */

.atl_box .icon
{
	overflow: visible;
	display: block;
	position: absolute;
	z-index: 2;
	top: 3px;
	left: 3px;
}

/* atl_box */

.atl_box h1
{
	font-size: 100%;
	font-weight: bold;
}

.box_with_header h1 
{
	padding: 5px 5px 5px 28px;
	margin-top: 0px;
	margin-left: 20px;
	border-bottom: 2px solid white;
	color: White;
	background-image: url(content_tr.png);
	background-repeat: no-repeat;
	background-position: top right;
}

.box_with_header > .tl
{
    width: 26px;
    height: 26px;
}

.atl_box .ctnt
{
    padding: 5px;
    background: white url(box_bak.png) top left repeat-x;
    position: relative;
}


.box_with_header .ctnt
{
    padding: 1em 3em;
}


.atl_curvedcontainer.atl_box
{
    background: none;
}

.atl_box .ctnt > .cbr,
.atl_box .ctnt > .cbl,
.atl_box .ctnt > .ctr,
.atl_box .ctnt > .ctl
{
    width: 3px;
    height: 3px;
    background-color: White;
    position: absolute;
}

.atl_box .ctnt > .ctl
{
    left: 0;
    top: 0;
    background: url(content_tl.png) top left no-repeat;
}

.atl_box .ctnt > .ctr
{
    right: 0;
    top: 0;
    background: url(content_tr.png) top left no-repeat;
}

.atl_box .ctnt > .cbl
{
    left: 0;
    bottom: 0;
    margin-top: -3px;
    background: url(content_bl.png) top left no-repeat;
}

.atl_box .ctnt > .cbr
{
    right: 0;
    bottom: 0;
    margin-top: -3px;
    margin-left: -3px;
    background: url(content_br.png) top left no-repeat;
}

.atl_box .atl_command_block
{
    width: 150px; /* IE6 and 7 require static width :( */
}



/* Default black */

.box_with_header > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=26&width=2&segment=tl);
}
     
.pageroot_default .box_with_header > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=0092CC&radius=26&width=2&segment=tl);
}

.pageroot_aboutus-default .box_with_header > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff0000&radius=26&width=2&segment=tl);
}
          
.pageroot_purchase-default .box_with_header > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=E7BFFF&radius=26&width=2&segment=tl);
}

.pageroot_products-default .box_with_header > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=003f7a&radius=26&width=2&segment=tl);
}

.pageroot_support-default .box_with_header > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=26&width=2&segment=tl);
}

/* box layout */

.atl_box .buttons
{
    text-align: center;
    margin-top: 2em;
}

.atl_box .atl_look
{
    margin: 1em 0;
}

/* prod_box */

.prod_box .atl_command_block 
{
	width:115px;
}

.prod_box .cbitem
{
	float: none;
	margin-right: 0px;
}

.prod_box.block_curved > .t > .innr > .ctnt_wrap > .ctnt
{
    padding: 6px;
    overflow: visible;
}

.prod_box .box_img
{
    /*float: left;*/
    position: absolute;
    left: -33px;
    top: -25px;
}

.prod_box .info_panel
{
    /*float: left;*/
    float: right;
    width: 70%;
}

.prod_box .t .innr
{
	min-height: 227px;
}

.prod_box p
{
    clear: both;
}

.prod_box .atl_command_block ul
{
    padding-right: 0;
}

.prod_box
{
	overflow: visible;
	margin-top: 20px;
	margin-left: 20px;	
}

.prod_box .cbitem
{
    float: right !important;
}

/* login_box */

.login_box
{
    font-size: 1em;
}


/* atl_curvedcontainer */

.atl_curvedcontainer
{
    position: relative;
    background: #FFF;
    z-index: 0;
}

.atl_curvedcontainer .tl, 
.atl_curvedcontainer .tr, 
.atl_curvedcontainer .bl, 
.atl_curvedcontainer .br
{
    width: 8px;
    height: 8px;
    position: absolute;
    top: 0;
    left: 0;
}

.atl_curvedcontainer .tr
{
    left: 100%;
    margin-left: -8px;
}

.atl_curvedcontainer .bl
{
    top: 100%;
    margin-top: -8px;
}

.atl_curvedcontainer .br
{
    top: 100%;
    left: 100%;
    margin-left: -8px;
    margin-top: -8px;
}

.atl_curvedcontainer .curv_ctnt
{
    border-style: solid;
    border-width: 2px;
    padding: 6px;
    zoom: 1;
}

.atl_curvedcontainer .tl, .atl_curvedcontainer .bl,
.atl_curvedcontainer .tr, .atl_curvedcontainer .br
{
    width: 8px;
    height: 8px;
    z-index: 1;
	zoom: 1;    
}    


/* BLACK - the default */
.atl_curvedcontainer .curv_ctnt
{
    border-color: #bfbfbf;
}
          
.atl_curvedcontainer .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=tl);
}

.atl_curvedcontainer .tr
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=tr);
}

.atl_curvedcontainer .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=bl);
}

.atl_curvedcontainer .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=br);
}


/* Blue */
.pageroot_default .atl_curvedcontainer .curv_ctnt
{
    border-color: #0092CC;
}
          
.pageroot_default .atl_curvedcontainer .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=0092CC&radius=8&width=2&segment=tl);
}

.pageroot_default .atl_curvedcontainer .tr
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=0092CC&radius=8&width=2&segment=tr);
}

.pageroot_default .atl_curvedcontainer .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=0092CC&radius=8&width=2&segment=bl);
}

.pageroot_default .atl_curvedcontainer .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=0092CC&radius=8&width=2&segment=br);
}


/* Red */
.pageroot_aboutus-default .atl_curvedcontainer .curv_ctnt
{
    border-color: #ff0000;
}
          
.pageroot_aboutus-default .atl_curvedcontainer .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff0000&radius=8&width=2&segment=tl);
}

.pageroot_aboutus-default .atl_curvedcontainer .tr
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff0000&radius=8&width=2&segment=tr);
}

.pageroot_aboutus-default .atl_curvedcontainer .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff0000&radius=8&width=2&segment=bl);
}

.pageroot_aboutus-default .atl_curvedcontainer .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff0000&radius=8&width=2&segment=br);
}


/* PURPLE */
.pageroot_purchase-default .atl_curvedcontainer .curv_ctnt
{
    border-color: #e7bfff;
}
          
.pageroot_purchase-default .atl_curvedcontainer .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=e7bfff&radius=8&width=2&segment=tl);
}

.pageroot_purchase-default .atl_curvedcontainer .tr
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=e7bfff&radius=8&width=2&segment=tr);
}

.pageroot_purchase-default .atl_curvedcontainer .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=e7bfff&radius=8&width=2&segment=bl);
}

.pageroot_purchase-default .atl_curvedcontainer .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=e7bfff&radius=8&width=2&segment=br);
}


/* Green */
.pageroot_products-default .atl_curvedcontainer .curv_ctnt
{
    border-color: #003f7a;
}
          
.pageroot_products-default .atl_curvedcontainer .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=003f7a&radius=8&width=2&segment=tl);
}

.pageroot_products-default .atl_curvedcontainer .tr
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=003f7a&radius=8&width=2&segment=tr);
}

.pageroot_products-default .atl_curvedcontainer .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=003f7a&radius=8&width=2&segment=bl);
}

.pageroot_products-default .atl_curvedcontainer .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=003f7a&radius=8&width=2&segment=br);
}

.pageroot_products-default .atl_gridview
{
    border-color: #0092cc;
}

/* ORANGE */
.pageroot_support-default .atl_curvedcontainer .curv_ctnt
{
    border-color: #ff8400;
}
          
.pageroot_support-default .atl_curvedcontainer .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=tl);
}

.pageroot_support-default .atl_curvedcontainer .tr
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=tr);
}

.pageroot_support-default .atl_curvedcontainer .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=bl);
}

.pageroot_support-default .atl_curvedcontainer .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=br);
}


/* top attached */

.top_attached
{
    margin-left: 20px;
    margin-right: 40px;
    position: relative;
    overflow: visible;
    top: 2px;
    z-index: 1;
    float: left;
}

.top_attached .curv_ctnt
{
    padding: 1px;
    border-bottom: 1px dotted;
}

.top_attached > .bl
{
    margin-top: -8px;
    margin-left: -6px;
}

.top_attached > .br
{
    margin-top: -8px;
    margin-left: -2px;
}

.top_attached .atl_command_block li
{
    float: left;
    margin-right: 2px;
    margin-left: 2px;
}

.top_attached.controls
{
    width: 90%;
}

.top_attached.controls .curv_ctnt
{
    padding: 6px;
}

/* Black */

.top_attached > .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=br);
}

.top_attached > .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=bl);
}

/* Orange */

.pageroot_support-default .top_attached > .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=br);
}

.pageroot_support-default .top_attached > .br
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=bl);
}

/* right attached */

.right_attached
{
	width: 20%;
	float: right;
	/* styles to make it hug the box on it's left */
    position: relative;
    left: -2px;
    top: 15px;
    z-index: 1;    
}

.right_attached .curv_ctnt
{
    padding: 1px;
    border-left: 1px dotted;
}

.right_attached > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=bl);
    margin-top: -6px;
}

.right_attached > .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=bfbfbf&radius=8&width=2&segment=tl);
    margin-top: -2px;
}

.pageroot_support-default .right_attached > .tl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=bl);
}

.pageroot_support-default .right_attached > .bl
{
    background-image: url(../../../api/curve.ashx?outer=FFF&border=ff8400&radius=8&width=2&segment=tl);
}

