@charset "utf-8";
/* CSS Document */

body{font-family:Calibri; margin:0; padding:0;}
#container{width:1000px; margin:0 auto; overflow:hidden;}

h1,h2,h3,h4,h5,h6,p{margin:0; padding:0;}
a{outline:none;} a:hover{outline:none;}


.top{background:none;}
.logo{float:left; width:250px; margin:5px 0;}
.newicon{  width:370px; float:left; margin-left:529px;float:right; line-height:20px; margin-top:-37px;}
.line {}
.newicon span { font-size:22px; color:#000;text-align:right; font-weight:bold;}
.tele { width:36px; height:36px; display:inline-block; float:left; margin-top:-10px; margin-left:10px; float:left; border-right:2px solid #fff;background-color:#0094DC;padding:5px; border-radius:3px;}


.menu{width:750px; float:right;}


.whyshopwithus{background:#f7f7f7; border-bottom:1px solid #cfcfcf; border-top:1px solid #cfcfcf;}
.shop-left{width:180px; float:left; background:#0094dc url(../images/blue-arrow.jpg) right no-repeat; font-size:18px; text-transform:uppercase; color:#FFFFFF; line-height:35px; padding-left:10px;}
.freedelivery{background:url(../images/seperator.jpg) right no-repeat; width:240px; float:left; }
.installation{background:url(../images/seperator.jpg) right no-repeat; width:380px; float:left; }
.bestprice{width:190px; float:left;}
.icon{float:left; width:40px; margin:3px 0 0 25px;}
.text{float:left; font-size:16px; color:#131212; text-transform:uppercase; line-height:35px;}

.banner{background:none;}
.slides{float:left; width:1000px; background:#0000CC; margin:10px 0 10px 0;}


.search{background:url(../images/searchbg.jpg) top left repeat-x;}
.searchbutton-top{width:1000px; float:left}
.searchbutton{background:#5aaeef; border:1px solid #bdbebe; border-bottom:none; float:left; font-size:18px; color:#FFFFFF; padding:8px 10px 8px 10px; }
.search-form{width:1000px; float:left;}
.search-left{float:left; width:250px; font-size:16px; color:#FFFFFF; margin:8px 0 15px 0;}
.submitbutton{background:#000000; color:#FFFFFF; font-size:16px; text-transform:uppercase; padding:10px; border:none; font-family:Calibri; margin:12px 0 0 0;}
.searchtext{width:210px; color:#323333; height:30px;}

.content{background:none; margin-top:15px;}
.content-left{width:670px; float:left; margin-right:20px;}
.content-right{width:310px; float:left;}
.batteryinstallation{float:left; padding:10px; /**-webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.79);
-moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.79);
box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 0.79); -webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px; margin-top:10px**/}
.content-left h1{font-size:24px; color:#0c34b8; text-transform:uppercase; border-bottom:1px solid #dddcdc; font-weight:normal;}
.gensetscroll{width:670px; float:left; margin-bottom:15px;}


.content-bottom{width:1000px; float:left; margin:15px 0 0 0;}

.content-bottom h2{background:#e8e6e6; padding-left:10px; line-height:35px; color:#000000; font-size:16px; width:990px; margin-bottom:15px; font-weight:normal;}
.content-bottom p{font-size:14px; line-height:22px; color:#080808; margin:0 0 15px 0;}
.content-bottom a{font-size:14px; color:#0000CC; text-decoration:none;}

.footer-top{background:#0094dc;}
.footerblock{width:200px; float:left; margin-bottom:15px;}
.footerblock h3{font-size:16px; color:#FFFFFF; margin:10px 0 10px 0; text-transform:uppercase; font-weight:normal;}
.footerblock ul{margin:0; padding:0; float:left; width:210px;}
.footerblock li{list-style:url(../images/footer-arrow.jpg); list-style-position:inside;}
.footerblock li a{text-decoration:none; color:#FFFFFF; font-size:14px; line-height:24px;}
.footerblock li a:hover{text-decoration:underline; color:#000000; font-size:14px;}

.footer-bottom{background:#FFFFFF;}
.paymentoptions{width:460px; float:left; font-size:16px; text-transform:uppercase; color:#000000; line-height:30px; margin-bottom:10px;}
.social{width:200px; float:left; font-size:16px; text-transform:uppercase; color:#000000; line-height:30px;}
.copyright{width:300px; float:right; font-size:14px; color:#4f4d4d; text-align:right; line-height:20px; margin-top:10px;}
.copyright a{font-size:14px; color:#000099; text-decoration:none;}

.number{width:310px; float:left; text-align:center; margin-bottom:10px;}

/************ inner pages **************************************/
.innercontent{width:1000px; float:left;}
.innercontent h2{background:#e8e6e6; padding-left:10px; line-height:40px; color:#000000; font-size:24px; width:990px; margin-bottom:15px; font-weight:normal;}
.innercontent p{font-size:14px; line-height:22px; color:#080808; margin:0 0 15px 0;}
.innercontent a{font-size:14px; color:#0000CC; text-decoration:none;}
.sub-caption{font-size:20px; color:#0033CC; line-height:30px; font-weight:normal;}
.sub-caption1{font-size:20px; color:#0033CC; line-height:30px; font-weight:normal; margin-top:10px; float:left; width:1000px;}
.sub-caption2{font-size:18px; color:#0033CC; line-height:22px; font-weight:normal; float:left; width:1000px;}

.table-left{width:300px; float:left;}
.table{width:670px; float:left; margin:5px 20px 0 0px;}
.shadowimg{float:left; padding:10px; -webkit-box-shadow: 0px 0px 4px 0px rgba(30, 30, 30, 0.29);
-moz-box-shadow:    0px 0px 7px 0px rgba(30, 30, 30, 0.29);
box-shadow:         0px 0px 7px 0px rgba(30, 30, 30, 0.29); margin:8px; border:1px solid #CCCCCC;}
.tabele-heading{font-size:16px; font-weight:normal; color:#000000; padding:5px;}
.tabele-text{font-size:14px; font-weight:normal; color:#333333; padding:5px;}
.enquirenow a{background:#52a6e9; text-align:center; font-size:16px; color:#FFFFFF; padding:10px; text-decoration:none; text-transform:uppercase; float:left; width:93%; margin:10px 0 0 6px;}
.description{width:1000px; float:left;}
.description p{font-size:14px; line-height:22px; color:#080808; margin:0 0 15px 0; padding:0;}
.description-small p{font-size:12px; line-height:22px; color:#666666; margin:0 0 15px 0; padding:0; width:800px;}
.imgleft{float:left; padding:0 15px 0 0;}
.imgright{float:right; padding:0 0 0 15px;}


.description ul{margin:0; padding:0;}
.description li{list-style:disc; list-style-position:inside; line-height:19px; color:#000000; margin-bottom:10px;}
.description span{color:#0000CC;}

.download{float:left; text-align:center; font-size:14px; color:#0000CC; line-height:24px; margin:10px 0 0 0; background:#003399; width:100%;}
.battery{width:320px; float:left; padding:5px;}
.battery-top{width:330px; float:left;}

.battery-bottom{width:330px; float:left; font-family:Calibri;}
.battery-bottom h4{font-size:18px; color:#000000; line-height:24px; font-weight:normal;}
.price{font-size:14px; color:#999999; text-decoration:line-through; color:#FF0000; line-height:14px;}
.battery-bottom p{font-size:16px; color:#333333; font-weight:normal; line-height:18px;}
.battery-bottom span{font-size:14px; color:#999999; font-weight:normal; line-height:16px;}

.xpress{width:1000px; float:left;}


.enquiry{width:480px; float:left; border:1px solid #CCCCCC; padding:10px; margin-bottom:15px;}
.enquiry-caption{width:470px; float:left; background:#0066CC; color:#FFFFFF; padding-left:10px; line-height:45px; font-size:20px; font-weight:normal; margin-bottom:15px;}
.enquiry-left{float:left; width:120px;}
.enquiry-right{float:left;}
.row1{width:480px; float:left; padding:0 0 10px 0;}
.enquiry-textbox { 
    background: white; 
    border: 1px solid #DDD; 
    border-radius: 5px; 
    box-shadow: 0 0 5px #DDD inset; 
    color: #666; 
    outline: none; 
    height:22px;
	width:220px;
   } 
   .enquiry-textarea { 
    background: white; 
    border: 1px solid #DDD; 
    border-radius: 5px; 
    box-shadow: 0 0 5px #DDD inset; 
    color: #666; 
    outline: none;
	width:250px;
   } 
   
   .enquiry-button { 
    background:#145fbb; 
    border-radius: 5px;  
    color: #FFFFFF; 
    outline: none;
	border:none;
	padding:12px;
	font-size:16px;
   } 


.enquiryform { margin-top:21px;}
.enquiryform input { padding:13px; width:270px; border-radius:4px; margin-bottom:20px; border:1px solid #666666; font-size:12px;}
.enquiryform select { padding:13px; width:300px; border-radius:4px; margin-bottom:20px; border:1px solid #666666; font-size:12px;}
.enquiryform p a { display:inline-block; width:90px; padding:10px; background-color:#0094dc; text-align:center; color:#fff; text-decoration:none; border-radius:4px;}
.enquiryform .easy{ color:#666666; font-size19px; margin-bottom:20px;}

.reachus{background:#f7f7f7; margin:15px 0 0 0; padding:20px 0 20px 0; border-top:1px solid #ddd4e1; border-bottom:1px solid #ddd4e1;}
.reachus-left{ width:300px; float:left;}
.reachus-right{width:700px; float:left;}
.reachus-left h1{font-size:22px; color:#333333; line-height:22px; font-weight:normal; text-transform:uppercase; margin-bottom:10px;}
.reachus-left p{font-size:16px; color:#333333; line-height:22px; font-weight:normal;}
.map{border:5px solid #FFFFFF; float:left; width:690px;}


.reachus-social{width:1000px; float:left;}
.reachus-social h1{font-size:40px; color:#333333; text-align:center; font-weight:normal; text-transform:uppercase; border-bottom:1px solid #ddd4e1; margin-bottom:15px;}
.social-icon{width:142px; float:left; text-align:center; font-size:16px; line-height:20px; color:#333333; margin:10px 0 10px 0;}
.social-icon span{color:#000000; font-size:18px;}

.easyway{
width:272px;
border:1px solid #cecece;
float:left;
margin-left:18px;
}
.easyway-content{
width:252px;
float:left;
margin:10px;
}
.easywaycaption{
width:252px;
float:left;
line-height:22px;
font-size:16px;
color:#4b4c4c;
font-family:Calibri;
margin-bottom:4px;
}
.texttbox{
width:252px;
margin-bottom:6px;
float:left;
}
.textboxstyle{
border:1px solid #e9eae9;
height:23px;
font-family:Calibri;
color:#8a8a8a;
line-height:25px;
font-size:14px;
width:240px;
padding-left:5PX;
}
.submit-button{
width:70px;
float:left;
}
.submit{
background:#036bc2;
height:27px;
color:#FFFFFF;
font-family:Calibri;
font-size:14px;
width:70px;
border:none;
}


.eflform input { width:247px; 28px; padding:5px 5px; margin-bottom:10px; margin-left:20px;}

.eflform  p  a{ background:#00abcd; display:inline-block; padding:10px 60px; color:#fff; font-size:20px; text-decoration:none; margin-left:35px; margin-top:15px;}

.gensetbat p { font-size:14px; line-height:22px; color:#080808; margin:0 0 15px 0;}
.gensetbat p b { font-size:18px; font-weight:bold;}
.sub-captionss { font-size:20px; color:#0033cc; line-height:30px;}


<!--.................................................................flipclock....................................-->

@import compass

// animation vars
$duration: 0.35s
$bounce: cubic-bezier(0.375, 1.495, 0.610, 0.780)

// dimensions
$height: 300px
$width: 200px

.count
	box-shadow: 0 10px 5px -5px rgba(#000, 0.2)
	height: $height
	left: 50%
	line-height: $height
	margin: -($height / 2) 0 0 -($width / 2)
	+perspective(500px)
	position: absolute
	text-align: center
	top: 50%
	+translateZ(0)
	width: $width

	// the basic "card"
	//    there are four of these: top current, top next, bottom current, and bottom next
	span
		background: #202020
		color: #f8f8f8
		display: block
		font-size: 250px
		left: 0
		position: absolute
		top: 0
		text-shadow: 0 1px 0 (#000 + 40), 0 2px 0 (#000 + 30), 0 3px 0 (#000 + 20), 0 4px 0 (#000 + 10), 0 5px 0 #000, 0 0 10px rgba(#000, 0.8)
		+transform-origin(0, 150px, 0)
		width: 100%

		// the dividing line in the center
		&:before
			border-bottom: 2px solid #000
			content: ''
			left: 0
			position: absolute
			width: 100%

		// a shadow fill that adds some convexity on the card surfaces
		&:after
			box-shadow: inset 0 0 60px rgba(#000, 0.35)
			content: ''
			height: 100%
			left: 0
			position: absolute
			top: 0
			width: 100%

	// two-digit numbers get the 'small' class
	.small
		font-size: 175px

	.top
		// top card sit above the bottom ones, so if we give them the same
		//   border radius they'll create some crunchiness.
		//   instead, go one pixel smaller
		border-top-left-radius: 11px
		border-top-right-radius: 11px

		// creating a light shine on the top of the card
		box-shadow: inset 0 2px rgba(#000, 0.9), inset 0 3px 0 rgba(#fff, 0.4)

		// top cards are only 50% height, and overflow-hidden
		//   so they only show the top of their number
		height: 50%
		overflow: hidden

		&:before
			bottom: 0

		&:after
			// top card needs to get darker as it curves downward
			+background(linear-gradient(rgba(#000, 0), rgba(#000, 0.15)))
			border-top-left-radius: 11px
			border-top-right-radius: 11px

	.bottom
		// bottom cards are 100% height, but their top half is hidden by "top" cards
		//   this was the best way I could think of to show the bottom cards in half, but
		//   there's probably another way using display: table-cell and vertical-align.
		//   ew.
		border-radius: 10px
		height: 100%

		&:before
			top: 50%

		&:after
			border-radius: 10px
			+background(linear-gradient(rgba(#fff, 0.1), rgba(#fff, 0.1) 50%, rgba(#fff, 0)))

	// styles that only apply when counting "down"
	&.down
		.top
			// use a higher number than the bottoms to prevent crunchy border radiuses
			border-top-left-radius: 11px
			border-top-right-radius: 11px
			height: 50%

			&.current
				// required to prevent safari bug: https://bugs.webkit.org/show_bug.cgi?id=61824
				+transform-style(flat)
				z-index: 3

			&.next
				// when counting down, the next top card is rotated towards the user (and invisible)
				+transform(rotate3d(1, 0, 0, -90deg))
				z-index: 4

		.bottom
			border-radius: 10px

			&.current
				z-index: 2

			&.next
				z-index: 1

		&.changing
			.bottom.current
				box-shadow: 0 75px 5px -20px rgba(#000, 0.3)
				+transform(rotate3d(1, 0, 0, 90deg))

				// the current bottom card rotates up to hide itself, and reveal the next one
				+transition(transform $duration ease-in, box-shadow $duration ease-in)

		&.changing,
		&.changed
			.top.next
				// and the next top card rotates into view (after $duration)
				+transition(transform $duration ease-out $duration)
				+transform(none)

	&.up
		.top
			height: 50%

			&.current
				z-index: 4

			&.next
				z-index: 3

		.bottom
			&.current
				z-index: 1

			&.next
				box-shadow: 0 75px 5px -20px rgba(#000, 0.3)

				// when counting "up", the next bottom card begins pointed at the user...
				+transform(rotate3d(1, 0, 0, 90deg))
				z-index: 2

		&.changing
			.top.current
				// and the current top card does the rotating
				+transform(rotate3d(1, 0, 0, -90deg))

				// when the card is "dropping" it should be faster
				+transition(transform $duration * 0.75 ease-in, box-shadow $duration * 0.75 ease-in)

		&.changing,
		&.changed
			.bottom.next
				box-shadow: 0 0 0 0 rgba(#000, 0)

				// add a little bounce at the moment the card finishes falling
				+transition(box-shadow $duration / 2 $bounce $duration, transform $duration $bounce $duration)
				+transform(rotate3d(1, 0, 0, 0))

	&.changed
		.top.current,
		.bottom.current
			display: none

// presentation styles
@import url(http://fonts.googleapis.com/css?family=Oswald)

html,
body
	height: 100%
	width: 100%

body
	background: #202020 url(https://my.cl.ly/content/040I101f1i0I) 50% 50%
	background-origin: 50% 50%
	+background-size(cover)
	font-family: 'Oswald'