/* CSS Document */

body {
	
	background-color: #ffffff;
	text-align: left;/* to ensure it aligns left in all browsers fingers crossed*/
	font-family: Arial, Helvetica, sans-serif;
	line-height: 100%; 	
}


/*Top Page Elements-------------------------------------------------*/
#TopBox {
	width: 780px; /*Width of main container*/
	margin: 0 auto; /*Centres container on page*/
	vertical-align:top;
	margin-bottom:0;
}

#HeaderLeft
{
	float: left;
	width: 190px;
	height: 60px;
	background-image: url('../images/Shop_header_text.png');
	background-repeat: no-repeat;	
}


#HeaderLeftBus
{
	float: left;
	width: 190px;
	height: 60px;
	background-image: url('../images/shop-title_bus.png');
	background-repeat: no-repeat;	
}


#Progress
{
	float: right;
	width: 580px;
	height: 60px;
	background-image: url('../images/top_BG.png');
	background-repeat: no-repeat;	
	margin-bottom:0;
}

/*The list-----------------*/
#List {
	color: #424242;
	padding-top: 20px;
	padding-left: 15px;
	margin-bottom: 0px;
	}

#List ul {
	margin: 0;
	padding: 0;
	display: inline;
	border: none;
	} 

#List ul li {
	margin: 0;
	padding: 2px;
	border: none;
	list-style: none;
	display: inline;
	}

/*Basic Structure Elements for Layout Don't change chaos will ensue-------------------------------------------------*/


#MainBox {
	width: 780px; /*Width of main container*/
	margin: 0 auto 0 auto; /*Centres container on page*/
}

#ContentWrap {
	float: left;
	width: 100%;	
}

#ContentColumn {
	margin: 0 190px 0 190px; /*Margins for content column. Should be "0 and RightColumnWidth 0 and LeftColumnWidth*/
}

#LeftColumn {
	float: left;
	width: 190px; /*Width of left column in pixel*/
	margin-left: -780px; /*Set margin to minus value of MainBox -(MainBox)*/
	background-image: url('../images/BG_line.png');
	background-repeat: repeat-y;
}

#RightColumn {
	float: left;
	width: 190px; /*Width of right column*/
	margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
	margin-top: 2px;
	background-image: url('../images/BG_line.png');
	background-repeat: repeat-y;
}

.InnerTube{
	margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
	margin-top: 2px;
}

#HeaderRight
{
	width: 190px;
	height: 40px;
	background-image: url('../images/Shop_header.png');
	background-repeat: no-repeat;	
	padding-top: 5px;/*covers the lines at the top and makes a gap*/
}

#HeaderCentre
{
	width: 380px;
	height: 40px;
	background-image: url('../images/Shop_header_centre.png');
	background-repeat: no-repeat;	
	padding-top: 5px;/*covers the lines at the top and makes a gap*/
}

#HeaderCentreCentre
{
	width: 380px;
	height: 30px;
	background-image: url('../images/Shop_centre_centre.png');
	background-repeat: no-repeat;	
}

#Footer
{
	width: 190px;
	height: 30px;
	background-image: url('../images/BG_bottom.png');
	background-repeat: no-repeat;
}

.deliveries{
	float: right;
	clear: both;
	margin-left: 5px;
}

#MiddleFooter
{
	width: 380px;
	height: 30px;
	background-image: url('../images/Shop_centre_bottom.png');
	background-repeat: no-repeat;
}

/*Text Elements-------------------------------------------------*/

h1 {
	font-size: 13px;
	font-weight: bold;
	color: #072b61;
	padding-top: 5px;
	padding-bottom: 5px;
}

h2 {
	font-size: 12px;
	font-weight: bold;
	color: #666666;
	padding: 0px;
	margin: 0px;
}

h3 {
	font-size: 14px;
	font-weight: bold;
	color: #999999;
}

h4 {
	font-size: 12px;
	font-weight: bold;
	color: #3f5980;
}

h5 {
	font-size: 12px;
	font-weight: bold;
	color: #f36f20;
	text-align: center;
}

.BoxTitles {
	font-size: 12px;
	font-weight: normal;
	color: #424242;
	margin-left: 30px;
	padding-top: 7px;	
}

.BoxTitlesBlue {
	font-size: 14px;
	font-weight: bold;
	color: #072b61;
	margin-left: 30px;
	padding-top: 7px;	
	text-align:left;
}

.InfoText {
	font-size: 12px;
	font-weight: normal;
	color: #424242;
}

.Attention {
	font-size: 12px;
	font-weight: bold;
	color: #cc0000;	
	text-align: center;
}

/*Left hand side links-------------------------------------------------*/

#SideLinks
{
	width: 150px;
	height: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 15px;/*adjust left and right margins respectively relative to the width*/
	margin-right: 25px;
}

.SideLinks a:link,
.SideLinks  a:visited {
	font-size: 12px;
	color: #424242;
	font-weight: normal;
	text-decoration: none;
	background-image: url('../images/arrow_gray.png'); 
	background-repeat: no-repeat;
	background-position: 0px 3px;
	text-indent: 5px;
	padding-left: 15px;
	
}

.SideLinks  a:hover{
	font-size: 12px;
	color: #072b61; 
	font-weight: normal;	
	text-decoration: none;
	background-image: url('../images/arrow.png'); 
	background-repeat: no-repeat;
	background-position: 0px 3px;
	padding-left: 15px;	
}

.SideLinks  a:active {
	font-size: 12px;
	color: #424242; 
	font-weight: normal;	
	text-decoration: none;	
	background-image: url('../images/arrow_gray.png'); 
	background-repeat: no-repeat;
	background-position: 0px 3px;
	padding-left: 15px;/*makes sure text stays out from the arrow edge*/
}

/*Order total Style*/

.OrderTotal {
	font-size: 12px;
	font-weight: bold;
	color: #cc0000;
	text-align: left;
	padding-top: 8px;
	padding-bottom: 8px;
}

/*CENTRE LAYOUT DON'T CHANGE-------------------------------------------------*/

/*Products Middle Bit*/
.Group { 	
	float:left; 	
	width:380px; 
	padding-bottom:5px;	
	border-bottom:1px #cccccc solid; 
}

.GroupTop 
{
	float:left; 	
	width:380px; 	
	padding-bottom:5px;
	border-bottom:1px #cccccc solid; 
}

.GroupBase { 	
	float:left; 	
	width:380px; 
	
}

.ItemImg { 	
	height: 90px; 
}

.ItemImgBig:hover { 	
	height: 120%; 
}

.tinylink{
	font-size: 11px;
	font-weight: normal;
	color: #f36f20;
}

.Item { 	
	float: left;	
	width: 29%; /*If you change this value you must change valuse of Item2*/	
	margin: 1%; 
	padding: 1%; 	
	text-align: center; 	
	border-right: 1px #efefef solid; 
} 

.Item2 { 	
	float: left; 	
	width: 31%; /*If you change this value you must change valuse of Item1*/		
	/*margin: 1%; */
	/* padding: 1%; */ 
	padding: 1%;
	text-align: center; 
}

.Item3 { 	/*for the larger lopsided boxes with drop down menus and more info*/	
	float: left; 	
	width: 40%; /*If you change this value you must change valuse of Item4*/		
	margin: 1%; 	
	padding: 1%; 	
	text-align: center; 
	border-right: 1px #efefef solid; 
}

.Item4 { 	
	float: left; 	
	width: 50%; /*If you change this value you must change valuse of Item3*/		
	margin: 1%; 	
	padding: 1%; 	
	text-align: center; 
}

/*New to Blueface?----------------------------------------------*/

.GroupNew { 	
	float:left; 	
	width:380px; 	
	border-bottom:1px #cccccc solid; 	
}

.ItemNewImg { 	
	height: 82px; 
}

.ItemNew { 	
	float: left;	
	width: 29%; /*If you change this value you must change valuse of Item2*/	
	margin: 1%; 	
	padding: 1%; 	
	text-align: center; 	
	border-right: 1px #efefef solid; 
} 

.ItemNew2 { 	
	float: left; 	
	width: 27%; /*If you change this value you must change valuse of Item1*/		
	margin: 1%; 	
	padding: 1%; 	
	text-align: center; 
}


/*Top Middle Bit----------------------------------------------*/

#middle { 	
	margin-top: 0px; /* ie5win fudge ends */ 
	text-align: center;
	height: 20px; 
	border-bottom: 1px #cccccc solid; 	
} 

#middle-left { 	
	padding-top: 0px; 	
	width: 100%; 	
	float: left; 
}


#middle-right-img { 	
	float:left; 	
	width:70px; 	
	padding: 5px;
	padding-top: 25px;
	padding-bottom: 35px; 	 
}


middle-right-text { 	
	padding-right:10px;
}

#Add
{
	clear: both;/* forces the footer below other elements */
}



/*Order Summary box ----------------------------------------------------------*/


#ItemSummary
{
	height: auto;
	border-bottom:1px solid #e7e7e8;
	padding-top: 5px;
	padding-bottom: 5px;
}

.Price {
	font-size: 12px;
	font-weight: normal;
	color: #f36f20;	
	vertical-align:super;
	margin-left:10px
}

.Total {
	font-size: 12px;
	font-weight: normal;
	color: #f36f20;	
	margin-right: 10px;
}


.AreaCode {
	font-size: 11px;
	font-weight: normal;
	color: #424242;	
	vertical-align:super;
	margin-left:10px
}

.ItemID {
	font-size: 12px;
	font-weight: normal;
	color: #424242;	
}

.ShoppingCart {
	font-size: 11px;
	font-weight: normal;
	color: #424242;	
	text-align:left;	
}

.ItemImageShoppingCart{
	margin-left:10px;
}


#Remove
{
	float: right;
	width: 16px;
	height: 15px;	
}


a.Remove { /**** Rollover for the proceed button ****/
	
	display: block;
	width: 16px;
	height: 15px;
	background: url("../images/remove.png") 0 0 no-repeat;
	text-decoration: none;
}
 
a:hover.Remove {
    background-position: -16px 0;
}


#CheckOut
{
	width: 160px;
}


/*Text Syling-----------------------------*/


.ShopNotice {
	font-size: 11px;
	font-weight: normal;
	color: #f36f20;
	text-align:left;	
}

.ShopText {
	font-size: 11px;
	height: 90px;
	font-weight: normal;
	color: #424242;
	text-align:center;	
}

.ShopButton {
	font-size: 11px;
	font-weight: normal;
	color: #424242;	
}

.TopLink{
	font-size: 12px;
	font-weight: normal;
	color: #f36f20;	
	text-decoration: none;
}

.ShopPrice {
	font-size: 11px;
	font-weight: normal;
	color: #072b61;			
}


.ShopDeviceCategory {
	font-size: 11px;
	font-weight: normal;
	color: #4888AA;	
	text-align:center;		
}

.ShopTextSide {
	font-size: 11px;
	font-weight: normal;
	color: #424242;	
}

.ShopTextCenter {
	font-size: 11px;
	font-weight: normal;
	color: #424242;
	text-align:center;	
}

.ProgressTextBig {
	font-size: 11px;
	font-weight: bold;
	color: #072b61;	
}

.iphoneProgressTextBig {
	font-weight: bold;
	color: #00b4f0;	
}

.NoBorder
{
	border:dashed 0px #000;
}