/*
CSS file created with:Instant Blueprint - Create a web project framework in seconds.
http://instantblueprint.com

Project: Widdit
File: css/style.css
Last edited: July 5, 2011, 4:37 am
*/

/* typography */

a {
	color:#509dd1;
	text-decoration:none;
}

a:hover {
	color:#509dd1;
	text-decoration:underline;
}

p { 
	line-height:22px;
	color:#595959; 
}
 
.medium { 
	font-size:18px;
	line-height:26px; 
}

h1 { 
	font-size:48px;
	color:#509dd1;
	font-weight:100;
	margin-bottom:26px;
}

h2 {
	font-size:24px;
	font-weight:100;
}

h3 { 
	font-size:16px; 
	font-weight:100;
	line-height:21px;
}

h4 {
	font-size:18px;
	line-height:22px;
	font-weight:bold;
}

h5 {
	font-size:20px;
	line-height:23px;
	margin-bottom:5px;
}

.blue { color:#509dd1; }
.darkblue { color:#1f557a; }
.grey {color:#595959;}

/* layout */

.hp-btn-box {
	padding-left:27px;
	width:300px;
	height:302px;
	background:url(../images/btn-box-bg.png) no-repeat 0px 11px;
	margin-right:46px;
}

.hp-paragraph {
	width:473px;
	padding:0 0 30px 20px;
}

.two-cloumns {
	width:455px;
	padding-bottom:30px;
}

.three-quartes {
	width:640px;
}

.quarter {
	width:270px;
	padding-left:50px;
}

.clear { 
	clear:both;
}

.left { float:left; }

.right { float:right; }

.padding-standard { padding:50px 0; }

.padding-header { padding-bottom:15px;}


/*  Main  */


body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}

.content {
	position:relative;
}

.wrapper {
 	margin:0 auto;
	width:960px;
}

#header {
	padding:27px 0 27px 0;
}

#menu, #menu-home {
	float:right;
	margin-right:0px;
}

#home { 
	float: right;
	background:url(../images/home.png) no-repeat center;
	width:45px;
	height:38px;
}

a:visited { color:none; }

#home a {
	display:block;
	width:45px;
	height:38px;
}

#logo {
	float:left;
}

#hp-logo {
	margin-bottom:16px;
}

#blue-pannel {
	background:url(../images/pannel-bg.gif) repeat;
	height:280px; 
}

#blue-pannel-small {
	background-color:#509dd1;
	width:100%;
	padding:27px 0 1px 0px;
	margin-bottom:30px;
}

#blue-pannel-small p {
	font-size:18px;
	width:393px;
	line-height:26px;
	font-style:italiss;
	font-weight:bold;
}

.grey-italic {
	font-size:18px;
	line-height:26px;
	font-style:italic;
	font-weight:bold;
	padding-bottom:15px;
}

#pannel-content {
	width:700px;
	margin:0 auto;
	padding:50px 0;
}

.pannel-number {
	float:left;
	height:89px;
	margin-top:21px;
	width:138px;
	padding:23px 0 0 70px;
}

#number-container {
	margin:0 auto;
	width:665px;
}

#illustration-addon {
	position: absolute;
	right: -20px;
	top:20px;
}

#illustration-w4w {
	position: absolute;
	right:0px;
	top:20px;
}

#company-illus {
	position:absolute;
	right: 10px;
	top:0;
}

#about-illus {
	position:absolute;
	right:-20px;
	top:50px;
}

#footer-illus {
    position: absolute;
    right: 50%;
    bottom: 178px;
    z-index: -1;
    height: 75px;
    left: 56%;

}

#features-list li {
	float:left;
	width:214px;
	margin-right:34px;
}

#features-list li h3{
	padding-top:7px;
}

.no-margin { margin:0!important; }

#features-list li span {
	float:left;
	margin-right:15px;
} 

#features {
	border-bottom: solid #cccccc 1px;
}

#help-list {
	padding-left:20px;
	color:#595959;
}

#help-list li {
	font-size:20px;
	padding-left:20px;
	color:#595959;
	text-decoration:underline;
	line-height:35px;
	background:url(../images/list-bullet.gif) no-repeat 0px 12px;
}

#help-list li a:link, #help-list li a:visited {
	text-decoration:none;
	color:#595959;
	text-decoration:underline;
}


#footer {
	background-color:#333333;
	height:178px;
	position:relative;
	bottom:0px;
	
}


#footer p {
	text-align:center;
	line-height:16px;
}

#blue-strip {
	background-color:#4ca0d9;
	height:65px;
}

#footer-content {
	width:960px;
	margin:0 auto;
	padding-top:40px;
}

#footer-content ul {
	float:left;
	padding-top:5px;
}

#footer-content li {
	float:left;
	color:#509dd1;
	font-size:15px;
	background:url(../images/help-bullet.gif) 6px 4px no-repeat;
	line-height:20px;
	padding-left:18px;
	font-weight:bold;
	letter-spacing:2px;
	
}

#footer-content li a:link {
	color:#509dd1;
	text-decoration:none;
}

#footer-content li a:hover {
	color:#509dd1;
	text-decoration:underline;
}

.case-logo { margin-bottom:20px; }

.case-studies{ margin:30px 0 0 0}

.case-item { margin-bottom:30px; }


/* dynamic rounded */

.rounded {
	position:relative;
	width:332px;
	padding:30px 35px;
	background:url(../images/middle-rounded.gif) repeat-y;
}
.rounded .top, .rounded .bottom{
	position:absolute;
	left:0;
	width:402px;
	
}
.rounded .top{
	top:-4px;
	background:url(../images/top-round.gif) no-repeat;
	height:4px;
}
.rounded .bottom{
	height:5px;
	bottom:0px;
	background:url(../images/bottom-round.gif) no-repeat;
}

.rounded .content{
	position:relative;
}


/*  top menu */

#menu-home li, #menu li {
 	float:left;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	height:42px;
	line-height:42px;
 }
 
#menu li.middle, #menu-home li.middle  {
	background:url(../images/menu-middle.gif) no-repeat 0px 0px; 
    width:80px;
 }


#menu li.right, #menu-home li.right { 
 	background:url(../images/menu-right.gif) no-repeat 0px 0px; 
	width:82px;
}

#menu a, #menu-home a {
	display:block;
	width:80px;
	height:42px;
	color:#595959;
}


#menu li.right a { width:82px; }
#menu li.right a:hover, #menu-home li.right a:hover { background:url(../images/menu-right.gif) 0px -42px no-repeat; width:82px; }

#menu li.middle a:hover, #menu-home li.middle a:hover { background:url(../images/menu-middle.gif) 0px -42px no-repeat;  }
#menu li.selected, #menu-home li.selected { background-position:0px -42px;}

#menu-home li.selected-left  { background-position:0px -42px; width:81px; padding-right:1px; }
#menu-home li.left a:hover { background:url(../images/menu-left.gif) 0px -42px no-repeat; width:80px; }
#menu-home li.left a { width:80px; }
#menu-home li.left  { background:url(../images/menu-left.gif) no-repeat 0px 0px; width:80px; }
#menu-home li.right a { width:82px; }

#menu li a:link, #menu-home li a:link { color:#595959; }
#menu li a:hover, #menu-home li a:hover { text-decoration:none; }



/* Menu Home */

#menu li.left  { 
 	background:url(../images/home.png) no-repeat 0px 0px; 
	width:43px;
}

#menu li.left a { width:43px; }
#menu li.left a:hover { background:url(../images/home.png) -0px -42px no-repeat; width:43px; }
#menu li.selected-left  { background-position:0px -42px; width:43px; padding-right:1px; }




#hp-banner {
	padding:19px 25px 74px;
}

.hp-btn {
	margin:30px 0;
}

.hp-btn p {
	padding-left:5px;
	}

#hp-features {}

#hp-features li {
	float:left;
	color:#FFF;
	width:190px;
	margin-right:66px;
}

#hp-features li img {
	margin-bottom:27px;
}

#hp-features p {
	color:#FFF;
}

.pannel-hp {
	background-color:#4ca0d9;
}

#used-by {
	border-top:#3274a2 solid 1px;
	padding-top:65px;
}

#used-by p {
	padding-top:50px;
	font-size:24px;
	color:#FFF;
	font-style:italic;
	font-weight:bold;
	line-height:28px;
}
	
#websites a{
	display:block;
	width:284px;
	height:60px;
	background:url(../images/hp-websites-btn.png) no-repeat 0px 0px;
}

#addon a{
	display:block;
	width:284px;
	height:60px;
	background:url(../images/hp-addon-btn.png) no-repeat 0px 0px;
}

#websites a:hover, #addon a:hover  {
	background-position:0 -60px;
}

#add-on-acount{
	display:block;
	width:176px;
	height:62px;
	background:url(../images/button-addon.png) no-repeat 0px 0px;
}

#add-on-acount a{
	display:block;
	width:176px;
	height:62px;
	background:url(../images/button-addon.png) no-repeat 0px 0px;
}

#add-on-acount a:hover{
	background-position:0px -62px;
}

#web-acount a{
	display:block;
	width:176px;
	height:62px;
	background:url(../images/button-w4w.png) no-repeat 0px 0px;
}

#web-acount a:hover{
	background-position:0px -62px;
}



* {
    margin: 0;
}
html, body {
    height: 100%;
}
.main-wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -178px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 178px; /* .push must be the same height as .footer */
}


.ribbon .text{
    text-align: center;
}