style.css

@charset "utf-8";


/* =General
--------------------------------------------------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	border: 0; vertical-align:top;
}


/* End General
--------------------------------------------------------------------------------------------------------*/

/* =Toolkit
--------------------------------------------------------------------------------------------------*/

/* Micro Clearfix Hack by Nicholas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */
/* For modern browsers */ 
.cf:before, .cf:after { content:""; display:table; }
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }
.clear {
  clear: both;
}

.clearfix:after {  content: "."; display:block; height:0; clear:both; visibility:hidden; }/* ----- clear fix for floats ----- */
.clearfix { display:inline-block; }		
* html .clearfix { height:1%; }/* hides clearfix from IE-mac */
.clearfix { display:block; }/* end hide from IE-mac */

/* general purpose classes */
.nodisplay { display:none; }
.alignleft { float:left; }
.alignright { float:right; }

/* Forms */
textarea {background:#c8c8c8;min-width:210px;font-family:Arial, Helvetica, sans-serif;font-size:12px;color: #6e6e6e;line-height:18px;vertical-align:top;padding-top:8px;padding-left:5px;}
input[type=text] , input[type=password], input[type=email]  ,input[type="number"]{
	  background:#c8c8c8;min-width:210px;font-family:Arial, Helvetica, sans-serif;font-size:12px;color: #6e6e6e; height:30px;line-height:25px;vertical-align:top; padding-left:5px;
  }

/*button*/
button, input[type="reset"], input[type="button"], input[type="submit"]{background: #252525 url(image/button-bg.png) repeat-x 0px 0px;border:0 none;color:#888888;padding:0px 5px;font-size:12px;font-family:Arial, Helvetica, sans-serif;text-shadow:1px 1px 1px #000;-moz-border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;cursor:pointer; border-radius:3px;padding:5px 5px 5px 5px;}
#contact-us button,#contact-us  input[type="reset"],#contact-us  input[type="button"],#contact-us  input[type="submit"] {
	float:right; margin-right:12px;
}

.idleField {border-radius:5px;border:solid 1px #000 ;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;}
.focusField {border-radius:5px;border:solid 1px #02AFE4;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;}
.largerinput{width:440px;}
/* End Toolkit
--------------------------------------------------------------------------------------------------*/

/* =Typography
--------------------------------------------------------------------------------------------------------*/

/* Setting up the fonts */
body {
 font: 13px/18px 'Quando', serif; color:#000000;
}

/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =Headings
--------------------------------------------------------------------------------------------------------*/
h1 {font-family: 'Quando', serif;color:#fff;font-size:40px;text-transform:capitalize; } 
h2 {font-family: 'Quando', serif;color:#07a6d3;font-size:16px;font-weight:normal;margin:0;text-shadow:1px 1px 1px #000;line-height:22px;}
h3 {font-family: 'Quando', serif;color:#07a6d3;font-size:14px;font-weight:normal;margin:0;text-shadow:1px 1px 1px #000;line-height:22px;}

/* End Headings
--------------------------------------------------------------------------------------------------------*/


/* =Links
--------------------------------------------------------------------------------------------------------*/
a { color:#03aae2;text-decoration:none;cursor:pointer;}
a:hover {  text-decoration:none;}

/* End Links
--------------------------------------------------------------------------------------------------------*/


/* =Branding
--------------------------------------------------------------------------------------------------------*/
p { padding:0 0 10px 0}

html, body {margin:0px;padding:0px;height:100%;}
 .slide {width:150px;display:block;top:45%;position:absolute;left:-2px;overflow: hidden;height:300px;}
	.slide .setting { margin:0;float:right;background:url(image/setting-icon.png) no-repeat;height:59px;width:34px;top:-200px;position:relative;text-indent:-99999px;z-index:9999;left:-3px;}
    .slide .inner {
    background:url(image/setting-panel.png) no-repeat;color: #333333;height: 36px;left:-48px;
    padding: 6px;display:block;
    position: absolute;
    width:76px;height:300px;
}
ul#colorchanger{display:block;margin:10px 0;padding:0px;list-style-type:none;width:50px;padding-top:25px;}
ul#colorchanger li{display:block;margin-bottom:7px;}
.checks {background:url(image/checks.png) no-repeat;}
.arch {background:url(image/arch.png) no-repeat;}
.square {background:url(image/square.png) no-repeat;}
.wooden {background:url(image/wooden.png) no-repeat;}
.curves {background:url(image/curves.png) no-repeat;}
.active{border-radius:5px;border: 1px solid red !important;}

.colorbox {
    border: 1px solid #050505;
    cursor: pointer;
    display: block;
    float: left;
    height: 20px;
    margin: 5px;
    width: 20px;border-radius:5px; }

#wrapper {background:url(image/top-gradient.png) repeat-x;width:100%;padding-top:8px;}
header#branding {width:960px;margin:0 auto;position:relative; padding-bottom: 35px;}

/*admin-panel*/
#admin-link{position:absolute;background:url(image/adminpanel-button.png) no-repeat;display:block;right:0px;padding-top:40px;padding-left:20px;color:#fff;font-size:10px; display:none;}
/*eof admin-panel*/

/*logo*/
hgroup{padding-top:15px;}
h1.logo {text-align:center;}
h1.logo a {color:#fff;  } 
h1.logo a > img {vertical-align:middle;}
/*eof logo*/

/* End Branding
--------------------------------------------------------------------------------------------------------*/




/* =Main Content
--------------------------------------------------------------------------------------------------------*/
section#content {background:url(image/section-seperator.png) center top no-repeat;padding:35px 0 25px;width:960px;margin:0 auto;} 
	#widecolumn {background:url(image/widecolunm-bg.png) no-repeat;display:block;width:688px;height:490px;margin:auto;} 
	
	.conatiner {position:relative;display:block;padding-top:60px;padding-bottom:40px;padding-left:40px;padding-right:80px;}
	#ribbon { cursor: pointer;display: block;height:114px;position: absolute;right:114px;top:39px;width:160px;z-index:100;background: url(image/mail.png) no-repeat scroll 0 0 transparent;}
	#ribbon.active { background:url(image/signup.png) no-repeat;}
	#ribbon > span{padding-left:54px;display:block;text-align:center;color:#fff;padding-top:20px;}
	#ribbon > span.signup{display:none;}
#count-dwn > h2{width:300px;text-align:center;margin-left:57px; margin-bottom:45px; margin-top:20px; font-family:'Quando',serif; font-size:22px;}
#signup-form{ position: relative;display:none; }
	


/*Canvas counter*/
.textClass{
	font-family: 'Quando', serif;
	font-size: 40px;
}

#canvascounter{margin:20px 0 55px;}
div#countDownCanvasDiv {
	color:#a8a6a6;font-size:14px;text-transform:uppercase;}
div#countDownCanvasDiv p {font-family:'Quando',serif; color:#fff; margin-top:5px;}

div#countDownCanvasDiv #countDownCanvas{
	position: relative;}
.timerFonts{position: absolute;color: white;font-family: 'Quando', serif;font-size: 38px;/*top:50px;left:25px;*/ top:-89px; left:-2px;line-height:40px; width:100%;}

.circular{margin-right: 10px;text-align: center;width: 130px;position: relative;}
#minVal.timerFonts{ left:10px; }
#secVal.timerFonts{ left:14px; }
/*
#dayVal{ left:22px !important; }
#hrsVal{ left:174px !important; }
#minVal{ left:325px !important; }
#secVal{ left:466px !important; }
*/
/*eof canvas counter*/

/*Subscription*/
#subscription{padding:15px 0 15px 29px;}
#subscription > h3 {float:left;width:147px;text-align:center;background:url(image/vertical-divider.png) repeat-y right 0;padding-right:20px;margin-right:15px; text-align:right; line-height:35px; font-size:16px; color:#888888; margin-top:2px;}

.email-form{position:relative;padding:3px 5px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;}
.email-form .subscription-email{width:270px;padding-right:60px; padding-left:5px;}
.email-form .subscription-button{position:absolute;top:7px;right:9px;}
/*eof subscription*/

/* Twitter Feed */
.twitterfeed { background:url(image/twitter-feed-bg.png) no-repeat right top; width:52%; padding-right:135px; margin-left:70px; color:#757a80; font-size:12px;}
.twitterfeed small { display:block; color:#03aae2;}
/*eod twitter feed */

/*Contact us*/
#signup-form h2{margin-left:70px;font-size:22px;margin-top:40px;}
#contact-us{margin-top:30px;margin-left:70px;background:url(image/contact-form-bg.png) repeat-x;padding:20px;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;}
.form-list {margin: 10px 0;}
.form-list li{margin:10px 0;display:block;}
.form-list .field{ float: left;width: 50%;}
.form-list .inputbox{  display: block;width: 200px;}
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =Secondary Content
--------------------------------------------------------------------------------------------------------*/

/* End Secondary Content
--------------------------------------------------------------------------------------------------------*/


/* =Footer
--------------------------------------------------------------------------------------------------------*/
footer {}

.social-icon {margin:15px 0;text-align:center;}
.social-icon a { background:url(image/social-icons.png) no-repeat 0 0; height:40px; width:50px; display:inline-block; text-decoration:none; margin:0 7px}
.social-icon .facebook { background-position:0 0px;}
.social-icon .facebook:hover { background-position:0 -40px;}

.social-icon .twitter { background-position:-44px 0;}
.social-icon .twitter:hover { background-position:-44px -40px;}

.social-icon .linkedin { background-position:-156px 0;}
.social-icon .linkedin:hover { background-position:-156px -40px;}

.social-icon .google-plus { background-position:-631px  0;}
.social-icon .google-plus:hover { background-position:-629px -38px;}

.social-icon .orkut { background-position:-253px 0;}
.social-icon .orkut:hover { background-position:-253px -40px;}

.social-icon .delicious { background-position:-371px 0;}
.social-icon .delicious:hover { background-position:-371px -40px;}

.social-icon .myspace { background-position:-529px 0;}
.social-icon .myspace:hover { background-position:-529px -40px;}

.social-icon .dribbble { background-position:-474px 0;}
.social-icon .dribbble:hover { background-position:-474px -40px;}

.social-icon .digg { background-position:-304px 0;}
.social-icon .digg:hover { background-position:-303px -39px;}

.social-icon .picasa { background-position:-687px 0;}
.social-icon .picasa:hover { background-position:-687px -40px;}

.social-icon .stumbleupon { background-position:-738px 0;}
.social-icon .stumbleupon:hover { background-position:-738px -40px;}

.social-icon .flickr { background-position:-423px 0;}
.social-icon .flickr:hover { background-position:-423px -40px;}

.social-icon .skype { background-position:-208px 0;}
.social-icon .skype:hover { background-position:-208px -40px;}

.social-icon .youtube { background-position:-98px 0;}
.social-icon .youtube:hover { background-position:-98px -40px;}

.social-icon .vimeo { background-position:-580px 0;}
.social-icon .vimeo:hover { background-position:-580px -40px;}


.copyright {
    color: #5e5e5e;
    font-family:'Quando',serif;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    /*text-shadow: 1px 1px 0 #4E555E;*/
    vertical-align: top;}
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =Forms
--------------------------------------------------------------------------------------------------------*/

fieldset {
  border: 0px solid transparent; background:none;  padding:0 ; margin:0;
}
fieldset p {}
fieldset label { }
fieldset .input { }
fieldset textarea {  }


/* End Forms
--------------------------------------------------------------------------------------------------------*/
.mail-message { position:absolute; width:50%; left:25%; display:block;padding:10px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; text-align:center; top:150px; z-index:999; font-size:16px;}
.mail-message.success { background:rgba(11, 144, 11, 0.6); border:1px solid #000;color:#fff;}
.mail-message.unsuccess {background:rgba(255, 0, 0, 0.6); border:1px solid #000; color:#fff;}