﻿/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background-color:#d6d6d6; /*#5c87b2;*/
    font-size: 14px;
    font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color:#696969;
}

a:link {
    color: #034af3;
    text-decoration: underline;
}

a:visited {
    color: #505abc;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #12eb87;
}

p, ul {
    margin-bottom: 20px;
    line-height: 1.6em;
}

header,
footer,
nav,
section {
    display: block;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #000;
}

h1 {
    font-size: 2em;
    padding-bottom: 0;
    margin-bottom: 0;
}

h2 {
    padding: 0 0 10px 0;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page {
    margin: 0 auto;
    width: 1200px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    
}

header, #header {
    position: relative;
    margin-bottom: 0px;
    color:#000;
    padding: 0;
    background-color:#fff;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;    
}

header h1, #header h1 {
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color:#000;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}

#main {
    padding: 0px 30px 15px 0px;
    background-color: #d6d6d6;
}

footer, 
#footer {
    background-color: #d6d6d6;
    color: Black;
    padding: 20px 0;
    text-align: center;
    line-height: normal;
    margin: 0 0 30px 0;
    font-size: .9em;
}

#HomeContent,#CustomiseContent
{
    margin-top:30px; 
    margin-left:30px;
    background-color: #fff;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}
/* TAB MENU   
----------------------------------------------------------*/
ul.menu {
    border-bottom: 1px #eeeeee solid;
    padding: 0 10px 0 10px;
    position: relative;
    margin: 0;
    text-align: right;
}
ul.MenuItem
{
    padding-left: 20px;
}
ul.MenuMaintenanceSubItem {
    
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    position: relative;
    
}

ul.MenuSubItem {
    
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 5px;
    position: relative;
    
}

ul.menu li {
    display: inline;
    list-style: none;
    color: Black;
}

ul.MenuItem li, ul.MenuMaintenanceSubItem li, ul.MenuSubItem li {
    display: block;
    list-style: none;
    color: Black;
}
ul.menu li#greeting, ul.MenuMaintenanceSubItem li#greeting, ul.MenuSubItem li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul.menu li a {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    background-image: url('../Content/images/NonSelectedButton.jpg');
    color: Black;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    font-size: 12px;
}

ul.menu li a:hover, ul.MenuMaintenanceSubItem li a:hover, ul.MenuSubItem li a:hover {
    color: White;
    background-image: url('../Content/images/HoverOverButton.jpg');
    text-decoration: none;
}

ul.menu li a:active, ul.MenuMaintenanceSubItem li a:active, ul.MenuSubItem li a:active {
    background-image: url('../Content/images/SelectedButton.jpg');
    text-decoration: none;
}

ul.menu li.selected a, ul.MenuMaintenanceSubItem li.selected a, ul.MenuSubItem li.selected a {
    background-image: url('../Content/images/SelectedButton.jpg');
    color: White;
}

.MenuSubItem li a, .MenuMaintenanceSubItem li a
{
    height: 13px;
	width: 100px;
	display: block;
	text-decoration: none;
	text-align: center;
	background-image: url('../Content/images/NonSelectedButton.jpg');
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 15px;
    color: Black;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    font-size: 12px;	
} 


/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {
    border: 1px solid #ddd;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

textarea {
    min-height: 75px;
}

input[type="text"], 
input[type="password"] {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
    width: 200px;
}

select {
    border: 1px solid #ccc;
    padding: 2px;
    font-size: 1.2em;
    color: #444;
}

input[type="submit"] {
    font-size: 1.2em;
    padding: 5px;
}

/* TABLE
----------------------------------------------------------*/

table {
    border: solid 1px #e8eef4;
    border-collapse: collapse;
    width: 885px;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: 20px;
}

table td {
    padding: 5px;
    border: solid 1px #e8eef4;
}

table th {
    padding: 6px 5px;
    text-align: left;
    background-color: #e8eef4;
    border: solid 1px #e8eef4;
}

/* MISC  
----------------------------------------------------------*/
.clear {
    clear: both;
}

.error {
    color: Red;
}

nav, 
#menucontainer {
    margin-top: 45px;
}

div#title {
    display: block;
    float: left;
    text-align: left;
    margin-left: 10px;
    width:262px;
    height:63px;

}

#phone {
    display: block;
    float: left;
    text-align: right;
    margin-left: 250px;
    color: blue;
    font-size:large;
    font-style:italic;
    text-decoration: none;
    

}

#logindisplay {
    font-size: 1.1em;
    display: block;
    text-align: right;
    margin: 10px;
    color: Black;
}

#logindisplay a:link {
    color: Black;
    text-decoration: underline;
}

#logindisplay a:visited {
    color: Black;
    text-decoration: underline;
}

#logindisplay a:hover {
    color: Black;
    text-decoration: none;
}

#pic{
	background-image:url('images/body.jpg');
	height:274px;
	width:1200px;
	background-repeat:no-repeat;
	margin-top: 5px;
	margin-bottom:15px;
	margin-right: auto;
	margin-left: auto;
	}


/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
}

.text-box {
    width: 30em;
}

.text-box.multi-line {
    height: 6.5em;
}

.tri-state {
    width: 6em;
}

#IndexProductsContainer
{
    position:relative;
}

/*Custom CSS*/
#TitleiComStore
{
    position: absolute;
    left: 500px;
    top: 0px;
}

.RefineYourSearch
{
    float:left;
    width: 200px;
}

#TableIndexProducts
{
    width:900px;
    position:relative;
    top: 0px;
}
#TableIndexRanks
{
    Width:300px;
    position:relative;
    top: 0px;
}
#ProductsContainer
{
    float:left;
    width: 940px;
    left: 200px;
    min-height: 200px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;      
}

.ProductImage
{
    width:210px;
    margin-left: 50px;
    float:left;
}

.ProductDetails
{
    width:480px;
    float:left;
    padding-right: 10px;
}
.ReviewDetails
{
    float:left;
    padding-right: 10px;
}

.ProductButtons
{
    width:120px;
    float:left;
}

#SearchResults
{
    font-size:large;
    position:relative;
    height:108px;
    padding-top:100px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-left: 20px;
}

#ShoppingCartContainer
{
    position:absolute;
    right: 10px;
    top: 20px;
    width: 205px;
}

.ShoppingCartImage
{
    float:left;
}

a.ShoppingCart
{
    float:right;
    padding-top: 15px;
    color:Black;
    font-size:larger;
}

.ButtonRefreshContainer
{
    position:relative;
    padding-top: 10px;
}

#TableHomeDeals
{
    width: 860px;
    margin-bottom: 0px;
}

#TableHomePage
{
    width: 1105px;
    margin-bottom: 0px;
}

#TableOverview, #TableWhatWeDo, #TableCareer
{
    width: 860px;
    margin-bottom: 0px;
}

#TableOurProject
{
    width: 825px;
    height:500px;
    margin-bottom: 0px;
}

td.ColumnOurProject
{
    width: 578px;
}

#HomeOurProject
{
    padding-left:60px;
    padding-top: 24px;
}

#HomeLaptop
{
    padding-left:47px;
}

#HomeDesktop
{
    padding-left:62px;
}

.ButtonCheckoutContainer
{
    padding-top: 10px;
}

#OrderTotalAmount
{
    padding-top: 10px;
    margin-left: 820px;
}

.RefineYourSearch
{
    float:left;
    width: 200px;
}

.SideMenuContainer
{
    float:left;
    width: 200px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0; 
}

#ChangePasswordHeading
{

    padding-left: 20px;
}

.FieldsetFields
{
    float:left;
    clear:both;
}

.FieldsetError
{
    float:left;
}

.MaintenanceContainer
{
    float:left;
    width:800px;
}

#footer
{
    clear:both;
}

#OrderSummary
{
    display: inline-block;
    float:left;
}

#PaymentSummary
{
    width:860px;
    padding-left:20px;
    display: inline-block;
    float:left;
}

.HomeDescriptionHeading, .HomeDescription
{
    padding-left:17px;
}

#HeadingRightBorder
{
    position:absolute;
    margin-top: -122px;
    margin-left: 1200px;
    width: 5px;
    height: 127px;
}

#HeadingBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1200px;
    height: 5px;
}

#HomeContentRightBorder
{
    position:absolute;
    margin-top: -340px;
    margin-left: 1140px;
    width: 5px;
    height: 345px;
}

#HomeContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

#CustomiseContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

#CustomiseContentRightBorder
{
    position:absolute;
    margin-left: 1140px;
    width: 5px;
}

img
{
    border: 0;
}

#PopularDealsContainer
{
    float: left;
    width: 925px;
    margin-left: 15px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

#PopularDealsContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 925px;
    height: 5px;
}

#PopularDealsContentRightBorder
{
    position:absolute;
    margin-top: -660px;
    margin-left: 925px;
    width: 5px;
    height: 665px;
}

.HeadingPopularDeals
{
    padding-left: 25px;
}

#ProductsContentBottomBorder
{
    position:inherit;
    margin-top: 0px;
    width: 940px;
    height: 5px;
    margin-bottom: -9px;
}

#ProductsContentRightBorder
{
    position:absolute;
    margin-left: -5px;
    width: 5px;
}

#LogOnContainer
{
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;       
}

#LogOnDescription
{
    padding-left: 20px;
    padding-top: 20px;
}
#LogOnContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

#LogOnContentRightBorder
{
    position:absolute;
    margin-top: -310px;
    margin-left: 1140px;
    width: 5px;
    height: 315px;
}

.FieldsetContent
{
    margin-bottom:0px;
    clear:both;
}

#RegisterContainer
{
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;       
}

#RegisterDescription1
{
    padding-top: 20px;
    padding-left: 20px;
}

#RegisterDescription2
{
    padding-left: 20px;
}
#RegisterContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

#RegisterContentRightBorder
{
    position:absolute;
    margin-top: -570px;
    margin-left: 1140px;
    width: 5px;
    height: 575px;
}

#AccountContainer
{
    float: left;
    width: 925px;
    margin-left: 15px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

#AccountContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 925px;
    height: 5px;
}

#ChangePasswordContentRightBorder
{
    position:absolute;
    margin-top: -420px;
    margin-left: 925px;
    width: 5px;
    height: 425px;
}

#UpdateProfileContentRightBorder
{
    position:absolute;
    margin-top: -522px;
    margin-left: 925px;
    width: 5px;
    height: 527px;
}

#HeadingUpdateProfile,  #HeadingViewUsers
{
    padding-left: 20px;
}

.ConfirmSuccess
{
    min-height: 10px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;     
}

.ConfirmSuccessDescription
{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-bottom: 0px;
}

.ConfirmSuccessContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

.ConfirmSuccessContentRightBorder
{
    position:absolute;
    margin-top: -45px;
    margin-left: 1140px;
    width: 5px;
    height: 50px;
}

#OrderContainer, #ContactContainer, #ReportContainer
{
    float: left;
    width: 925px;
    margin-left: 15px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

#OrderContentBottomBorder, #ContactContentBottomBorder, #ReportContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 925px;
    height: 5px;
}

#RankContentBottomBorder
{
    margin-top: 0px;
    width: 1140px;
    height: 5px;
    position: relative;
    top: -17px;
}


.HeadingOrder, .OrderResult, .ResultMessage, .SubHeadingMaintenance, .HeadingReport
{
    padding-left: 20px;
}

#MaintenanceContainer
{
    float: left;
    width: 925px;
    margin-left: 15px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

.SideMenuContainerBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 200px;
    height: 5px;
}

.SideMenuContainerRightBorder
{
    position:absolute;
    margin-left: 200px;
    width: 5px;
}

#MaintenanceContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 925px;
    height: 5px;
}

#MaintenanceContentRightBorder
{
    position:absolute;
    margin-left: 925px;
    width: 5px;
}

#myGrid, #trProductItems
{
    width: inherit;
}

#OrderContentRightBorder,#ContactContentRightBorder, #ReportContentRightBorder
{
    position:absolute;
    margin-left: 925px;
    width: 5px;
}
#RankContentRightBorder
{
    margin-left: 1140px;
    width: 5px;
}

#ConfirmOrderContainer,#ConfirmRankContainer,#ConfirmContactContainer
{
    float: left;
    width: 1140px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

#ConfirmOurProcessContainer
{
    float: left; 
    text-align:justify;
    width: 1140px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

#AddToCartContentRightBorder
{
    position:absolute;
    margin-left: 1140px;
    width: 5px;
}

#AddToCartContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

#myGridAddToCart
{
    width: 1100px;
    padding-top: 20px;
    padding-left: 20px;
}

#myGridRank,#GridRank
{
    width: 325px;
    padding-top: 20px;
    padding-left: 20px;
    float:left;
}
#Grida
{
    padding-top: 20px;
    padding-left: 20px;
    float:left;
    clear:both;
    
}

#myGridReview
{
    width: 350px;
    padding-top: 20px;
    padding-left: 20px;
    float:left;
    overflow:scroll;  
    overflow:auto;
    height:360px;
}
#IndexAddToCartContent
{
    padding-left: 20px;
}

#MakePaymentContent
{
    float: left;
    width: 1140px;
    background-color: White;
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;    
}

#MakePaymentContentRightBorder
{
    position:absolute;
    margin-left: 1140px;
    width: 5px;
}

#MakePaymentContentBottomBorder
{
    position:absolute;
    margin-top: 0px;
    width: 1140px;
    height: 5px;
}

#FieldsetMakePayment
{
    margin-top: 20px;
    margin-bottom: 0px;
}

.PageDataContainer
{
    float: left;
    width:  295px;
}

#HeadingAddress, #HeadingContactUs, #HeadingFeedbackUs
{
    padding-left: 20px;
}

#TableCustomise
{
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    margin-bottom: 0px;
    width: 1100px;
}

.ProductContainer
{
    margin-top: 20px;
}

#CustomiseProductDescription
{
    clear:both;
    padding-top: 20px;
}

.CustomiseProductDetails
{
    width:700px;
    float:left;
    padding-right: 10px;    
}

.AddToCartGrid
{
    width: 1060px;
}


.entry
{
	width: 160px;
	background-color: #E1E1E2;
	padding: 4px 0 5px 22px;
	margin: 0 0 0 11px;
	line-height: 17px;
}
.entryTable
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #DDDDDD;
	margin-right:20px;
	width:835px;
}
.entryTableHeader
{
	font-size: 13px;
	color: #FFFFFF;
	background-color: #7BA8C9;
	font-weight: bold;
	background-position: center;
}

.entryTable .content
{
	background-color: #FFFFFF;
}

#paypal_checkout
{
	float: left;
	margin-left: 640px;
}

#divider
{
	float: left;
	margin-left: 580px;
}
#direct_transfer,#paypal_transfer
{
	float: left;
	margin-left: 10px;
}
#deposit_transfer
{
	float: left;
}

.UserPageDataContainer
{
    float: left;
    width: 270px;
}

#ConfirmRankContainer
{
    height: 405px;
}

#ProductReviewTable
{
    width: 290px;
}

#TwitterContainer
{
    clear: both;
    float: left;
    padding-top: 20px;
}


/*
	Slideshow
*/

slides {
	position:absolute;
}

/*
	Slides container
	Important:
	Set the width of your slides container
	Set to display none, prevents content flash
*/

.slides_container {
	width:550px;
	height:450px;
	overflow:hidden;
	position:relative;
	display:none;

}

/*
	Each slide
	Important:
	Set the width of your slides
	If height not specified height will be set by the slide content
	Set to display block
*/

.slides_container img {
	display:block;
}

/*
	Next/prev buttons
*/

#slides .next,#slides .prev {
	position:absolute;
	top:57px;
	left:-39px;
	width:24px;
	height:43px;
	display:block;
	/*z-index:0;
	 z-index:101; */
}

#slides .next {
	left:800px;
}


/*
	Page style */

#sshowcontainer, #sshowexample  {
	width:500px;
	height:500px;
	margin:0 auto;
	position:relative;
	z-index:0;
}



#container, #example  {
	width:1140px;
	height:275px;
	margin:0 auto;
	position:relative;
	z-index:0;
}


/*
	Pagination
*/

.pagination {
    margin-top:5px;
    margin: 5px auto 0;
	width:205px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url(../../Content/themes/base/img/pagination.png);
	background-position:0 0;
	float:left;
	overflow:hidden;
}

.pagination li.current a {
	background-position:0 -12px;
}


#map_canvas
{
    height:270px; 
    width:550px; 
    margin:0 20px 0 20px;  
}