/* -------------------------------------------------------------- 
   
   main.css FOR WHATEVER COMPANY
   
   Contains:
   - All style gfx elements
   
-------------------------------------------------------------- */

body#home{
	position: relative;
	background: #f4f7f7 url('../../img/bg-home.gif') repeat-x 0 -1px;
}
body#about,
body#innovate,
body#solve,
body#guide,
body#press,
body#contact{
	position: relative;
	background: #f4f7f7 url('../../img/bg-about.gif') repeat-x 0 -1px;
}

/* -----
Wrap centered style	
----- */
div#wrap{
	width: 1000px;
	height:auto;
	margin: 0 auto;
	padding: 0;
}

/* -----
Header style
----- */
div.header-1{
	height: 215px;
	width: 100%;
	overflow:hidden;
	background: url('../../img/bg-header-shadow1.png') no-repeat 0 9px;
}
div.header-2{
	height: 173px;
	width: 100%;
	overflow:hidden;
	background: url('../../img/bg-header-shadow.png') no-repeat 0 9px;
}
/* -----
Main navigation
----- */
div.nav{
	background: transparent url('../../img/tab-menu.png') no-repeat -41px -1px;
	height: 45px;
	margin-bottom: 25px;
}
/* main-nav */
div.nav ul.main-nav{
	height:30px;
	padding: 7px 0 0 5px;
}
	ul.main-nav li{
		list-style-type: none;
		font-size: 0.75em;
		padding:5px 0 5px 0;
		color: #445C68;
	}
		ul.main-nav li a{
			color: #445C68;
		}
	ul.main-nav li.whatever{
		background: transparent url('../../img/whatever-logo.png') no-repeat 0 3px;
		display: inline;
		height:100px;
		padding-left:30px;
		color:white;
	}
		ul.main-nav li.whatever a{
			color:white;
		}
	ul.main-nav li.knowledge-plaza{
		display: inline;
		height:100px;
		list-style-type: none;
		padding-left:31px;
		background: transparent url('../../img/kp-logo-small.png') no-repeat 5px 3px;
		color:white;
	}
	ul.main-nav li.microplaza{
		display: inline;
		height:100px;
		list-style-type: none;
		padding-left:25px;
		background: transparent url('../../img/mp-logo-small.png') no-repeat 5px 3px;
		color:white;
	}

/* sub-nav */
div.nav ul.sub-nav{ 
	height: 30px;
	padding-top: 11px;
}
	ul.sub-nav li{
		display: inline;
		list-style-type: none;
		font-size: 0.75em;
		margin-left:7px;
		color: #445C68;
	}
		ul.sub-nav li a{
			color: #445C68;
			font-weight: bold;
		}
		ul.sub-nav li a:hover{
			color: #445C68;
			text-decoration:none;
			border-bottom:2px solid #cbebef;
			font-weight: bold;
		}
	ul.sub-nav .active{
		font-weight:bold;
		border-bottom:2px solid #cbebef;
	}
	
div.header-1 h2,
div.header-1 h3,
div.header-2 h2,
div.header-2 h3{
	text-align: center;
}
div.header-1 h3,
div.header-2 h3{
	color: #FF6600;
}
	div.header-1 h3 .learn-more{
		background:transparent url('../../img/big-next.png') no-repeat scroll 117px 10px;
		font-weight:normal;
		padding-right:20px;
	}

/* loading */
.twitter .loading{
	font-size: 0.75em;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	margin-bottom: 65px;
}
div.buzz-web .loading,
div.blog .loading{
	font-size: 0.75em;
	font-style: normal;
	font-weight: bold;
	text-align: center;
	padding-top: 20px;
}
/* -------------------------------------------------------------- 
   
   Home of Whatever Company website
   
-------------------------------------------------------------- */

/* -----
Introduction & copy header
----- */
div.head{
	width: 470px;
	margin: 0 auto;
	float: right;
	margin-left: 40px;
	margin-bottom: 40px;
}
div.head div.kp-wrap,
div.head div.mp-wrap{
	width: 470px;
}
	div.kp-wrap{
		margin-right: 35px;	
	}
	div.kp-wrap .kp-link,
	div.mp-wrap .mp-link{
		margin-right: 20px;
	}
	div.kp-wrap p.button-link a,
	div.mp-wrap p.button-link a{
		background: transparent url('../../img/learnmore-button.png') no-repeat 0px 0px;
		display: block;
		height: 0;
		overflow: hidden;
		padding-top: 28px;
		width: 92px;
	}
.title-link a,
.smart-title a,
.expert-title a{
	color:#5A585A;
}
	.title-link a:hover,
	.smart-title a:hover,
	.expert-title a:hover{
		text-decoration: underline ;
	}
.head-home {text-align:left;
}

/* -----
	Middle banner 4 column
----- */	
.middle-banner{
	height: 180px;
	padding: 20px 0 30px;
	width: 1000px;
}
.middle-banner .skills{
	margin-right:20px;
	width:490px;

}
.middle-banner .skills .first-skills{
	margin-right:20px;
	width:235px;
}
.middle-banner .skills .icon{
	text-align: center;
}
.skills .first-skills p a,
.skills .second-skills p a{
	background: transparent url('../../img/small-next.png') no-repeat 73px 5px;
	padding-right: 11px;
}
.middle-banner .get-intouch{
	background:transparent url('../../img/bg-getintouch.png') no-repeat 0 0;
	height:179px;
	padding: 15px 0;
	width:490px;
}
.middle-banner .get-intouch .contact{
	background:transparent url('../../img/contact-us.png') no-repeat 0 -8px;
	margin-right:20px;
	padding:0 0px 15px 0;
	text-align:center;
	width:235px;
}
.middle-banner .get-intouch .contact .info-contact{
	text-indent: -9999px;
}
.middle-banner .get-intouch .contact .mail-contact{
	margin: 40px 0 0 15px;
}
.middle-banner .get-intouch .twitter{
	background:transparent url('../../img/quote-end.png') no-repeat 180px 0;
	padding:5px 0 0 0;
	text-align:center;
	font-style: italic;
	width:210px;
}
.middle-banner.left-column .get-intouch .twitter .follow-us{
	text-align: center;
	margin: 0;
}
.twitter #twitter-status{
	display: block;
	min-height: 75px;
}

/* -----
	Whitepaper
----- */
div.whitepaper div.whitepaper-inner p.whitepaper-icon{
	margin: 10px 15px 10px 10px;
}
div.whitepaper div.whitepaper-inner p{
	margin: 15px 15px 0 0;
}
/* -----
	Buzz
----- */

/* Buzz from web */
.left-column{
	width: 490px;
	margin-right:20px;
}
.left-column h4,
.right-column h4{
	padding:20px 20px 0 20px;
}
.left-column h4 .more{
	font-size:0.625em;
}
.right-column .buzz-web h5,
.left-column .buzz-web h5{
	margin:0 0 10px 0;
}
.right-column .buzz-web .buzz-press,
.left-column .buzz-web .buzz-press,
.right-column .blog .blog-items{
	padding: 10px 20px 5px 20px;
}
.buzz-press li:first-child,
.blog-items li:first-child{
	list-style-type: none;
	border: 0 none;
	/*min-height: 138px;*/
}
.buzz-press li,
.blog-items li{
	list-style-type: none;
	border-top: 1px solid #eeeeee;
	overflow: hidden;
	padding: 10px 0;
}
.buzz-press .date,
.blog-items .date{
	font-size: 0.8em;
	font-weight: normal;
	color: #ccc;
	white-space: nowrap;
}
ul.buzz-press div.buzz-img{
	float:left;
	display: inline;
	margin: 0 15px 0 0;
}

/* -----
	Happy user & Blog sytle
----- */
div.right-column{
	width: 490px;
}

/* Happy users style */

div.right-column h4 .more{
	font-size:0.625em;
}
div.left-column div.buzz-web,
div.left-column div.whitepaper,
div.right-column div.happy-users,
div.right-column div.blog,
div.left-column div.missions,
div.right-column div.contact-office,
div.right-column div.contact-box,
div.right-column div.slideshow,
div.left-column div.temple{
	background: transparent url('../../img/bg-bottom-box.png') no-repeat 0 bottom;
	padding-bottom: 20px;
	margin-bottom: 20px;
}
	div.buzz-web div.buzz-web-inner,
	div.whitepaper div.whitepaper-inner,
	div.happy-users div.happy-users-inner,
	div.blog div.blog-inner,
	div.missions div.missions-inner,
	div.contact-office div.contact-office-inner,
	div.contact-box div.contact-box-inner,
	div.slideshow div.slideshow-inner,
	div.temple div.temple-inner{
		background: transparent url('../../img/bg-top-box.png') no-repeat 0 0;
		overflow: hidden;
	}
		div.happy-users .happy-users-inner ul{
			padding: 20px 0 0 17px;
			overflow : hidden;
		}
			div.happy-users .happy-users-inner ul li{
				list-style: none;
			}
				div.happy-users-inner ul li p.logo-brand{
	margin: 0 20px 15px 0;
				}
				
/* Blog style */

.left-column h4{
	padding:20px 20px 0 20px;
}
.left-column .blog{
	padding-bottom: 20px;
}
.blog .rss{
	margin:-20px 20px 0 0;
}
.blog #blog-items{
	background: #FFFFFF;
	margin-top: -10px;
	padding: 20px 20px 0 20px;
}
.blog #blog-items li:first-child{
	list-style: none;
	border: 0 none;
}
.blog #blog-items li{
	list-style: none;
	border-top:1px solid #eee ;
	padding: 10px 0;
}
#blog-items .learn-more a{
	padding-right: 15px;
	background: transparent url('../../img/small-next.png') no-repeat 73px 4px;
}

.button-column{
	margin-right: 20px;
	text-align: right;
}

/* -------------------------------------------------------------- 
   
   end Home of Whatever Company website
   
-------------------------------------------------------------- */


/* -------------------------------------------------------------- 
   
   About of Whatever Company website
   
-------------------------------------------------------------- */

.middle-banner .about-info{
	width:490px;
	margin-right:20px;
}
.middle-banner .about-info li{
	list-style:none;
}
.middle-banner .about-info .creation-info{
	width:235px;
	margin-right:20px;
}
.middle-banner .about-info .location-info{
	width:235px;
}
.about-info a{
	background: transparent url('../../img/small-next.png') no-repeat 73px 4px;
	padding-right: 15px;
}
.middle-banner .interview{
	width:490px;
	height:179px;
}
.middle-banner .interview .testimonial{
	background:transparent url('../../img/quote-end.png') no-repeat 0 120px;
	width:235px;
	margin-right:20px;
	padding:0 0px 15px 0;
	text-align:center;
}
.interview .video{
	padding-top: 5px;
}
.video .vimeo-info{
	display: block;
	font-size: 0.75em;
	font-weight: bold;
	color: #5A585A;
	text-align: right;
	padding:5px 65px 0 0;
}
.vimeo-video li .vimeo-info{
	color:  #5A585A;
	font-weight: bold;
}
/* -----
	3 Missions style
----- */

.left-column .missions .inner-missions{
	padding:10px 20px 0 20px;
	list-style-type: none;
}

/*
.left-column .missions .inner-missions li{
	height: 90px;
}*/

div.mission-innovate,
div.mission-solve,
div.mission-guide{
	margin: 5px 15px 30px 0;
}
.description p:first-child{
	font-size: 1em;
}
/* -----
	4 Contact-Office sytle
----- */
.our-team h4,
.contact-office h4{
	padding:20px 20px 0 20px;
}
.our-team,
.missions,
.contact-office{
	padding-bottom: 25px;
	margin-bottom: 20px;
}
.contact-office .inner-office .info-office p{
	margin-top: -10px;
	font-weight: normal;
	font-size: 0.75em;
	color: #5A585A;
}
.contact-office .inner-office .info-office a{
	padding-right: 20px;
	background:transparent url(../../img/small-next.png) no-repeat scroll 162px 4px;
}
.contact-office .info-office{
	padding:20px 20px 15px 0 ;
}
.contact-office .picts-office{
	padding:0 20px 0 0 ;
}
.contact-office .picts-office .m-m-old{
	padding:0 10px 0 0 ;
}

/* -------------------------------------------------------------- 
   
   end About of Whatever Company website
   
-------------------------------------------------------------- */

/* -------------------------------------------------------------- 
   
   Missions of Whatever Company website
   
-------------------------------------------------------------- */

#header-intro-guide {
	margin:0 auto;
	padding-top:30px;
	text-align:center;
	width:auto;
}

/* -----
	Sub missions menu style 
----- */
#sub-menu-missions {
	height:40px;
	margin:0 auto;
	width:200px;
}
#sub-menu-missions .sub-menu-innovate {
	background:transparent url(../../img/bg-mission-innovate.png) no-repeat scroll 0 0;
	height:40px;
	margin-top:-18px;
	padding-top:6px;
	width:200px;
}
#sub-menu-missions .sub-menu-solve {
	background:transparent url(../../img/bg-mission-solve.png) no-repeat scroll 0 0;
	height:40px;
	margin-top:-18px;
	padding-top:6px;
	width:200px;
}
#sub-menu-missions .sub-menu-guide {
	background:transparent url(../../img/bg-mission-guide.png) no-repeat scroll 0 0;
	height:40px;
	margin-top:-18px;
	padding-top:6px;
	width:200px;
}
#sub-menu-missions ol li {
	color:white;
	display:inline;
	font-size:0.75em;
	font-weight:bold;
	padding-left:14px;
}
/*---------- 
	1. Innovate
----------*/
.middle-banner .innovate-info .intro-info {
	width: 490px;
	font-size: 1em;
	font-weight: bold;
}
.innovate-info .intro-info:first-child{
	color: #445C68;
	margin-right: 20px;
	font-size: 1em;
	font-weight: bold;
}
.innovate-info .icon{
	text-align: center;
	margin-top: 15px;
}

div.middle-column {
	height:auto;
	margin-top:-10px;
	width:1020px;
}
div.middle-column h4 {
	display:none;
}
div.middle-column .solve {
	display:block;
	height:auto;
	margin:0;
	padding:0;
	width:1000px;
}
.solve .needs,
.solve .settings,
.solve .rolling,
.solve .supports {
	list-style-type:none;
	text-align: center;
	width:235px;
}
.solve .needs,
.solve .settings,
.solve .rolling {
	margin-right:20px;
}
.solve .needs .icon{
	margin-top: 24px;
}
.solve .needs .icon,
.solve .settings .icon,
.solve .rolling .icon,
.solve .supports .icon {
	margin-bottom:15px;
}
.solve .settings .icon,
.solve .supports .icon {
	margin-top:30px;
}

/*---------- 
	2. Solve
----------*/
.middle-banner .solve-info .intro-info {
	width: 490px;
	font-size: 1em;
	font-weight: bold;
}
.solve-info .intro-info:first-child{
	margin-right: 20px;
	font-size: 1em;
	font-weight: bold;
	color: #445C68;
}
.solve-info .icon{
	text-align: center;
	margin-top: 15px;
}

#middle-column {
	height:auto;
	margin-top:-10px;
	width:1000px;
}
#middle-column h4 {
	display:none;
}
#middle-column .solve {
	display:block;
	height:auto;
	margin:0;
	padding:0;
	width:1000px;
}
.solve .needs,
.solve .settings,
.solve .rolling,
.solve .supports {
	list-style-type:none;
	text-align: center;
	width:235px;
}
.solve .needs,
.solve .settings,
.solve .rolling {
	margin-right:20px;
}
.solve .needs .icon{
	margin-top: 5px;
	margin-bottom: 21px;
}
.solve .settings .icon,
.solve .rolling .icon,
.solve .supports .icon {
	margin-top: 11px;
}
.solve .settings .icon,
.solve .rolling .icon,
.solve .supports .icon {
	margin-bottom:15px;
}
.solve .needs-description .info,
.solve .settings-description .info,
.solve .rolling-description .info,
.solve .support-description .info {
	text-align:left;
}
/*---------- 
	3. Guide
----------*/
#header-intro-guide h3{
	color: #FF6600;
}
.middle-banner.middle-banner .guide-info .intro-info{
	width: 235px;
}
.middle-banner .guide-info .web-searching-info {
	width: 490px;
	margin-right: 20px;
}
.middle-banner .guide-info .web-searching-info h5{
	margin: 3px 0 16px 0;
	font-size: 1em;
	color: #435c68;
}
.guide-info .web-search {
	margin:10px 15px;
}
.guide-info .web-searching-info .web-searching{
	margin: 0 0 0 -18px;
}
.middle-banner .guide-info .intro-info {
	margin-right:20px;
	color: #445C68;
}
.guide-info .intro-info .learn-more {
	padding-right: 20px;
	background:transparent url(../../img/small-next.png) no-repeat scroll 122px 4px;
}
.guide-info .web-searching-info .learn-more {
	padding-right: 20px;
	background:transparent url(../../img/small-next.png) no-repeat scroll 126px 4px;
}

.middle-banner .web-searching-list{
	width: 235px;
	padding-top: 5px;
}
.web-searching-list .download-leaflet{
	width: 235px;
	margin-right: 20px;
}
.web-searching-list .download-leaflet .get-more {
	margin: 10px 0 0 -3px;
}
.middle-banner .searching-list {
	width: 235px;
}
.middle-banner .web-searching-list li {
	font-size:0.75em;
	font-weight:bold;
	list-style-image:url(../../img/check-list.png);
	list-style-position:outside;
	margin-left:20px;
	padding-bottom:5px;
}
.web-searching-list .download-leaflet .info-leaflet {
	color:#445C68;
	margin-top:-5px;
	text-align:center;
}

/* -----
	Middle column usages style
----- */

#middle-column {
	height:auto;
	margin-top:-10px;
	width:1000px;
}
#middle-column h4 {
	display:none;
}
#middle-column .usages {
	display:block;
	height:auto;
	margin:0;
	padding:0;
	width:1000px;
}
.usages .ff,
.usages .rss,
.usages .vertical-search,
.usages .social-networking {
	list-style-type:none;
	width:235px;
}
.usages .ff, .usages .rss, .usages .vertical-search {
	margin-right:20px;
}
.usages h5 {
	color:#FF6600;
	margin-bottom:10px;
	text-align:center;
}
.usages .ff .icon,
.usages .rss .icon,
.usages .vertical-search .icon,
.usages .social-networking .icon {
	margin-bottom:13px;
	text-align:center;
}
.usages .ff .info > p,
.usages .rss .info > p,
.usages .vertical-search .info > p,
.usages .social-networking .info > p {
	text-align:left;
	word-spacing: 1px;
}
.usages .ff .info a,
.usages .rss .info a,
.usages .vertical-search a,
.usages .social-networking a {
	padding-right: 20px;
	background:transparent url(../../img/small-next.png) no-repeat scroll 130px 4px;
}
.ff .ff-description .info .ff-list,
.rss .rss-description .info .rss-list,
.vertical-search .vertical-description .info .vertical-list,
.social-networking .sn-description .info .social-list {
	display:block;
	padding:0 10px;
	width:220px;
}
.ff-description .info .ff-list li,
.rss-description .info .rss-list li,
.vertical-description .info .vertical-list li,
.sn-description .info .social-list li {
	font-size:0.75em;
	font-weight:bold;
	list-style-image:url(../../img/check-list.png);
	margin-left:20px;
	padding-top: 10px;
}

/* -------------------------------------------------------------- 
   
   end Missions of Whatever Company website
   
-------------------------------------------------------------- */

/* -------------------------------------------------------------- 
   
   Press of Whatever Company website
   
-------------------------------------------------------------- */
.middle-banner .press-intro .press-intro-icon{
	text-align: center;
}
.middle-banner .press-intro{
	width: 235px;
	margin-right: 20px;
}
.press-info .vimeo-video{
	width: 745px;
	margin-top: 5px;
}
.press-info .vimeo-video li:first-child{
	display: inline-block;
	list-style-type: none;
	padding-left: 0;
	height: 150px;
}
.press-info .vimeo-video li{
	display: inline-block;
	list-style-type: none;
	padding-left: 15px;
	height: 200px;
}
.vimeo-video li .vimeo-info {
	font-size: 0.75em;
	display: block;
	width: 235px;
	text-align: center;
}
.right-column .slideshow{
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.right-column .slideshow .slide-inner{
	padding-top: 20px;
}

/* -------------------------------------------------------------- 
   
   end Press of Whatever Company website
   
-------------------------------------------------------------- */

/* -------------------------------------------------------------- 
   
   Contact of Whatever Company website
   
-------------------------------------------------------------- */

.middle-banner .office-info{
	width:490px;
	font-weight: bold;
	margin-right: 20px;
}
.middle-banner .office-info .google-map{
	margin-top: 10px;
	text-align: center;
}
.middle-banner .pictures{
	width:490px;
}
.pictures .office-picture:first-child{
	width: 235px;
	margin-right: 20px;
}
.pictures .office-picture{
	width: 235px;
}

/* -----
	Visit our temple of knowledge
----- */

/* Temple of knowledge style */
.left-column .temple{
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.temple .temple-info{
	padding: 10px 20px 0 20px;
}
.temple .temple-picture:first-child{
	width: 215px;
	margin: 10px 15px 15px 0;
}
.temple .temple-picture{
	width: 215px;
	margin: 10px 0 15px 0;
}

/* -----
	Contact-Office style
----- */
.contact-office h4,
.contact-box h4{
	padding:20px 20px 0 20px;
}
.contact-office,
.contact-box{
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.contact-office .inner-office{
	padding: 10px 0 0 20px;
}
.contact-office .download-vcard{
	margin: -40px 15px 0 0 ;
}	
.inner-office p:first-child{
	font-weight: bold;
	font-size: 1em;
	color: #FF6600;
}
.right-column .contact-box{
	width: 490px;
}
.contact-box form label {
	clear:right;
	text-align:right;
	font-size: 0.85em;
}
.contact-box form input {
	height:15px;
	padding:5px;
	width:290px;
}
.contact-box form input.btn {
	background: transparent url('../../img/button-send.png') no-repeat;
	border: 0 none;
	float:left;
	display: inline;
	font-size:12px;
	font-weight:bold;
	height:29px;
	margin:0 0 0 180px;
	color: white;
	cursor: pointer;
}
.contact-box #contact_form .required{
	color: #FF6600;
}

div#mc_embed_signup form .mc-field-group{
	clear: both;
	margin: 10px 20px;
	overflow: hidden;
}
	div#mc_embed_signup form .mc-field-group label{
		font-weight: bold;
		display: block;
		margin: 0.3me 0px;
	}
	div#mc_embed_signup form .mc-field-group input{
		float: left;
		margin-right: 1.5em;
		padding: 0.2em 0.3em;
		width: 95%;
		z-index: 999;
	}
	div#mc_embed_signup form .mc-field-group .comment-field{
		float:left;
		height:70px;
		margin-right:1.5em;
		padding: 0.2em 0.3em;
		width:95%;
		z-index:999;
	}
		.mc-field-group input .input-group{
			font-size:0.9em;
			padding: 0.7em 0.7em 0.7em 0px;
		}
		.mc-field-group input .input-group ul{
			margin: 0;
			padding: 0;
		}
div#mce-responses{
	clear: both;
	float: left;
	margin: 0px 5%;
	overflow: hidden;
	padding: 0em 0.5em;
	top: -1.4em;
	width: 90%;
}
div#mce-error-response{
	background-color:#FBE3E4;
	color:#D12F19;
	display:none;
	float:left;
	font-weight:bold;
	margin: 1em 0;
	padding: 1em 0.5em 0.5em 0;
	top:-1.5em;
	width:80%;
	z-index:1;
}
div#mce-success-response{
	background-color:#FBE3E4;
	color:#529214;
	display:none;
	float:left;
	font-weight:bold;
	margin: 1em 0;
	padding: 1em 0.5em 0.5em 0;
	top:-1.5em;
	width:80%;
	z-index:1;
}
/* -------------------------------------------------------------- 
   
   end Contact of Whatever Company website
   
-------------------------------------------------------------- */
/* -----
	Footer & sub-navigation
----- */
#footer{
	background: transparent url('../../img/filet-footer.gif') no-repeat 0 0;
	width:1000px;
	height:auto;
	margin-top: 20px;
	padding:15px 0 0 0;	
	text-align:center;
}

/* Sub navigation style*/
#footer .nav-footer{
	margin-top: -10px;
}
#footer .nav-footer li:first-child{
	display:inline;
	list-style-type: none;
	font-size: 0.75em;
	padding-left: 0;
}
#footer .nav-footer li{
	display:inline;
	list-style-type: none;
	font-size: 0.75em;
	padding-left: 5px;
}
#footer .nav-footer a{
	color: #445C68;
}