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

Title:			main.css
Browser(s): 	All 

Website:		http://www.innova.gi
Company:		

******************************************************************************************************
*/

/*-------------------------------DEFINE BODY PROPERTIES----------------------------------------*/

* {
	margin: 0 auto 0 auto; /* GLOBAL RESET */
	padding: 0;
}

body{
	margin:0;
	font-size: 62.5%; 
	font-family: Arial, Sans-Serif; /*change font*/
	color:#4b4d4a; /*change font color*/
	background: #D2D2D0 url(i/bg_sub.png) repeat-x top center; }

div, p, ul, img{
	padding:0px; margin:0px; border:none;
}
ul{
	list-style-type:none;
}

.spacer{
	clear:both; 
	font-size:0px; 
	line-height:0px;
}

a { outline:none; /* Remove Firefox's dotted borders */ text-decoration:none; color:#d05606; padding:0; margin:0;}
a img { border:none;} /* Remove IE's blue borders */

h1 {font-size: 2.4em;}
h2 {font-size: 2.2em; line-height:1.2em; font-weight:normal; border:none; margin:0 0 35px 0; padding:0; color:#333;}
h3 {font-size: 3.2em; line-height:1.2em; font-weight:normal; border:none; margin:0; color:#09C;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.8em;}
h6 {font-size: 1.2em;}

.hr{ border-bottom:1px solid #fff; border-left:none; border-right:none; border-top:none; margin:5px 0 20px 0; }
.left{ float:left;}
.left_margin_right{ float:left; margin:0 10px 0 0; font-size:1.2em;}
.left_margin_right_top{ float:left; margin:4px 10px 0 0;}
.right{ float:right;}
.right_margin_top{ margin:20px 0 0 0;}
.right_margin_right{ float:right; margin:0 20px 0 0;}

/*------------------------------GLOBAL TYPOGRAPHY--------------------------------*/
p  {font-size: 1.2em; padding:0; line-height:1.4em;}
.gray {color: #666; font-size:1em; font-style:normal;}
.fat{font-weight:bold;}
.small  {font-size: 1.1em; padding:0; line-height:1.4em;}
.big {font-size: 1.8em;	padding:0;	line-height:1.2em;	color:#666;	padding: 10px 10px 0 0;	margin:0 0 22px 0;}
.quote1 {font-size: 1.8em;	line-height:1.0em; padding:0; color:#666;}
.white {font-size: 1.2em; padding:0 10px 0 0; line-height:1.4em; color:#fff;}
.title{ font-size:1.1em; font-style:italic; color:#227ab0; padding-left: 30px;}
.stroke { border:0px solid #fff;}
.just-text{ text-align:justify;}

/*------------------------------CONTENT--------------------------------*/
#header{ background: url(i/bg_header.png) top center repeat-x; height:100px;}
#featured{ background: url(i/bg_featured_sub.png) top center repeat-x; height:100px;}
#footer{ background: url(i/bg_footer.png) top center repeat-x; height:357px;}
#footer_nav{ background: url(i/bg_footernav.png) top center repeat-x; height: auto;}

#page_seo #main{ background: url(i/bg_main.png) top center repeat-x; height: auto;}
#page_ppc #main{ background: url(i/bg_main.png) top center repeat-x; height: auto;}
#page_portfolio #main{ background: url(i/bg_main.png) top center repeat-x; height: 1650px;}
#page_web-design #main{ background: url(i/bg_main.png) top center repeat-x; height: auto;}
#page_website-hosting #main{ background: url(i/bg_main.png) top center repeat-x; height: auto;}
#page_consulting #main{ background: url(i/bg_main.png) top center repeat-x; height: auto;}
#page_contact .big {font-size: 2.4em; line-height:1.2em; color:#fff; padding: 10px 10px 0 0; margin:0 0 22px 0; font-weight:bold; float:right; } 
#page_contact .big2 {font-size: 2.4em; line-height:1.2em; color:#fff; padding: 10px 10px 0 0; margin:0 0 22px 0; font-weight:bold; float:left; padding-left:10px;} 
#page_contact #main{
	background: url(i/bg_main.png) top center repeat-x;
	height: auto;
	font-family: Arial, Sans-Serif;
}

#page_testimonials #main{ background: url(i/bg_main.png) top center repeat-x; height: auto;}
#page_testimonials .big2 {font-size: 2.4em; line-height:1.2em; color:#fff; padding: 10px 10px 0 0; margin:0 0 22px 0; font-weight:bold; float:left; padding-left:10px;} 



#page_website-hosting .portofolio_main{width: 895px; padding: 20px; margin: 10px 0 0 0; overflow: hidden; border: 1px solid #cdcbcb; background-color: #f0f0f0;}

#page_consulting .portofolio_main{width: 895px; padding: 20px; margin: 10px 0 0 0; overflow: hidden; border: 1px solid #cdcbcb; background-color: #f0f0f0;}

.center{ width:960px; height:100%; margin:0 auto; padding:0;}
.center  h2 {float:left; color:#FFF; font-family: Helvetica, Arial, sans-serif; font-size:24px; margin:8px 0 0 5px; }


.center_footer{ width:960px; height:100%; margin:0 auto; padding:0; background:transparent url(i/overlay_footer.jpg) top center no-repeat;}

h1 a { float:left; margin:7px 0 0px 0; display:block; width:350px; height:92px; background: transparent url(../images/logo.png) no-repeat; text-indent:-9999px; overflow:hidden;}

		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

/* Menu Body */
ul#menu {
width:80%;
height:32px;
list-style:none;
margin:0;
padding:0;

}
/* Float LI Elements - horizontal display */
ul#menu li {
float:left;
}
/* Link - common attributes */
ul#menu li a {
background:url(i/sprite.png) no-repeat scroll top left;
display:block;
position:absolute;
top:10px;
left:110px;

height:33px;
position:relative;
}


ul#menu li a.seo {
width:180px;
}

ul#menu li a.webdesign {
width:180px;
background-position:-180px 0px;
}

ul#menu li a.hosting{
width:180px;
background-position:-360px 0px;
}

ul#menu li a.consulting{
width:180px;
background-position:-540px 0px;
}

ul#menu li a span {
background:url(i/sprite.png) no-repeat bottom left;
display:block;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:100;
opacity: 0;

}

ul#menu li a span:hover {
cursor:cursor;
}

ul#menu li a.seo span {
background-position:0px -33px;
}
ul#menu li a.webdesign span {
background-position:-180px -33px;
}
ul#menu li a.hosting span {
background-position:-360px -33px;
}
ul#menu li a.consulting span {
background-position:-540px -33px;
}


/*NAVIGATION*/


.nav ul {margin:7px 0 0 0; padding: 0; list-style: none; float:right; }
.nav ul li{float: left; display: block; margin: 0 10px 0 0; padding: 0;}

.nav ul li a.button {
/* Sliding right image */
display: block;
float: left;
height: 88px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 0px;
padding-right: 7px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #333333;
font-size:1.2em;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;

}
.nav ul li a.button span {
/* Background left image */ 

display: block;
line-height: 88px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding:15px 0 0 7px;
} 

.nav ul li a.button:hover {
/* Sliding right image */
background: transparent url(i/button_nav_right.png) no-repeat scroll top right; 
display: block;
float: left;
height: 88px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 0px;
padding-right: 7px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #000000;
font-size:1.2em;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;

}
.nav ul li a.button:hover span {
/* Background left image */ 
background: transparent url(i/button_nav_left.png) no-repeat; 
display: block;
line-height: 88px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding:15px 0 0 7px;
}

.nav ul li.selected a {
/* Sliding right image */
background: transparent url(i/button_nav_right.png) no-repeat scroll top right; 
display: block;
float: left;
height: 88px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 0px;
padding-right: 7px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #333333;
font-size:1.2em;
font-family: Helvetica, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;

}
.nav ul li.selected a span {
/* Background left image */ 
background: transparent url(i/button_nav_left.png) no-repeat; 
display: block;
line-height: 88px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
padding:15px 0 0 7px;
} 



/* 
	FOOTER CONTENT
*/

div.feedburnerFeedBlock ul li span.headline {
font-weight:bold;
display:block;
margin:10px 0 5px 0;
font-size: 1.3em;
}

.column  a{color:#fff;}
.column  a:hover{color:#BFBFBF;}

div#creditfooter {
display: none;
text-align: justify;
margin: -5px;
}


/* Latest Blog Posts */

.column { width:225px; padding:0 15px 0 0; margin:18px 0; float:left; color:#f0f0f0;}
.column h5{ font-size:1.4em; letter-spacing:1px; color:#FFF;}
.column h6 { margin:0 0 5px 0;}
.column h6 a { margin:0 0 5px 0; color:#fafafa;}
.column h6 a:hover { margin:0 0 5px 0; color:#BFBFBF;}
.column .date{ float:left; width:60px; height:17px; padding:2px 0 0 4px; margin:5px 10px 0 0; background:transparent url(i/ico_date.png) no-repeat; font-size:1.1em; font-weight:bold;}
.column p {font-size:1.1em;}
.column p.lead {font-size:1em; margin:0 0 8px 0;}

/* END Latest Blog Posts */

.column_odd { width:225px; padding:0; margin:18px 0; float:left; color:#f0f0f0;}
.column_odd p {font-size:1.1em;}
.column_odd h5{ font-size:1.4em; letter-spacing:1px; color:#FFF;}
.column_odd #twitter { width:190px; height:210px; padding:10px 20px 10px 20px; position:relative; font-size:1.4em; color:#333; font-family:"Times New Roman", Times, serif; font-style:italic;}
.column_odd #twitter a.twitter {font-weight:bold; margin:80px 0px 5px 5px; }
.column_odd #twitter a.follow { position:absolute; bottom:70px; left:0; padding:0 0 0 20px; color:#fff; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;}
.column_odd #twitter a.follow:hover { position:absolute; bottom:70px; left:0; padding:0 0 0 20px; color:#d05606; font-family:Arial, Helvetica, sans-serif; text-decoration:underline; font-size:0.8em; font-style:italic;}
.column_odd #twitter p.posted { font-size:0.8em; margin:2px 0 0 0; color: #999;}


.column .fport { float:left; display:block; width:215px; height:105px; border:1px solid #fff; padding:4px 4px 5px 4px; margin:0 0 15px 0; background:#fff;}
.column .fport:hover { float:left; display:block; width:215px; height:105px; border:1px solid #fff; padding:4px 4px 5px 4px; margin:0 0 15px 0; background:#00D2EB;}

.column a.comment { display:block; font-size:0.9em; margin:5px 0 0 0; color:#f0f0f0;}
.column a.comment:hover {display:block; font-size:0.9em; margin:5px 0 0 0; color:#d05606;}

/* TAG CLOUD */

	.tags ul{text-align: justify; }
	.tags li{	margin:0; padding:0; list-style:none; display:inline; line-height:1.3em;}
	.tags li a{text-decoration:none; color:#fff;}
	.tags li a:hover{color:#d05606;}		
	.tag1{font-size:100%;}
	.tag2{font-size:120%;}
	.tag3{font-size:140%;}
	.tag4{font-size:160%;}
	.tag5{font-size:180%;}
	
/* // TAG CLOUD */




/* 
	FOOTER NAVIGATION
*/

#footer_nav .center a.footer_logo{ float: left; display:block; width:66px; height:47px; padding: 0 15px 0 0; background: transparent url(../images/footer_logo.png) no-repeat; background-position: 0% 50%; text-indent:-9999px; overflow:hidden; }
#footer_nav .center p { float:left; font-size:1.1em; color:#848484; padding:20px 0 0 0; }
#footer_nav .center ul { float:right;}
#footer_nav .center ul li{ float:left; margin:20px 20px 0 0; }
#footer_nav .center ul li a { font-size:1.1em; text-transform:uppercase; color:#848484;}
#footer_nav .center ul li a:hover { color:#505457;}
#footer_nav .center ul li a:active { color:#505457;}


/* 
	PORTFOLIO
*/

	.gallery .roundit2 {
			width:237px;
			height:134px;
			margin:0 auto;
			margin-bottom:10px;
		}


ul#filter { float: left; font-family: Helvetica, Arial, sans-serif; font-size:18px; list-style: none; position: absolute; top:145px; padding-left: 240px; }
ul#filter li { 
	border-right: 1px solid #fff;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }
ul#filter a { color: #fff; text-decoration: none; }
ul#filter li.current a, ul#filter a:hover { text-decoration: underline; }
ul#filter li.current a { color: #fff; font-weight: bold; }

ul#portfolio { float: left; list-style: none; margin-left: 35px; width: 900px; }
ul#portfolio li { 
	border: 1px solid #00D2EB; 
	float: left; 
	margin:10px 5px 10px 7px;
	padding: 5px;
	width: 272px;
}
ul#portfolio li:hover { border: 1px solid #333;}
ul#portfolio a { display: block; width: 100%; text-align:center; font-weight:bold; font-size:12px;}
ul#portfolio a:hover { text-decoration: underline; }
ul#portfolio img { border: 1px solid #dedede; display: block; padding-bottom: 5px; }


.center_box{width:939px; margin:0 auto; padding: 10px 10px 35px 10px; overflow:hidden; background-color: #fff; background: #FFF; top center no-repeat;}

.center_right{float: left; width: 760px; padding: 20px 50px 0 70px;}
.center_right h3{font-size: 1.8em; color: #4b4d4a; padding: 0 0 4px 0; margin: 0px;}
.center_right .title{font-size: 1.8em; line-height: 20px; color: #d56b26; font-weight: normal; padding: 25px 0 20px 0; font-style: normal;}
.center_right p{font-size: 1.2em; line-height: 20px; font-weight: normal; padding: 0 0 10px 0;}


.center_right .publish{font-size: 1.1em; line-height: 28px; color: #4b4d4a; padding: 0 0 30px 0; margin: 0px;}
.center_right .publish a{color: #db8146; font-weight: bold;}



/*Portofolio*/
.portofolio{position: relative;}
.portofolio_main{width: 760px; padding: 20px; margin: 10px 0 0 0; overflow: hidden; border: 1px solid #cdcbcb; background-color: #f0f0f0;}
.portofolio_main h3{color: #4b4d4a; font-size: 2.2em; padding: 0 0 5px 0;}
.portofolio_main .publish{color: #4b4d4a; font-size: 1.1em; padding: 0 0 10px 0;}

.featured2{width:407px; height:237px; padding:17px 0 0 13px;position: absolute; background: url(i/featured.png) top left no-repeat; top: 112px; left: 68px; margin: 0px 0 0 0;}
.div_image{float: left; border: 1px solid #cdcbcb; width: auto; padding: 10px; margin-right: 20px; background-color: #ffffff;}

.blog_thumb{width: 100%; padding: 20px; margin: 20px 0 0 0; border: 1px solid #cdcbcb; overflow: hidden; background-color: #f4f4f4;}
.blog_thumb img{border: 1px solid #cdcbcb; margin-right: 30px;}
.blog_thumb h2{width: 455px; font-size: 1.6em; padding: 0; margin: 0 0 20px 0; line-height: normal;}
.div_image{float: left; border: 1px solid #cdcbcb; width: auto; padding: 10px; margin-right: 20px; background-color: #ffffff;}


/*Contact*/

#contact p, label, legend {
	font: 1.5em "Helvetica", "Helvetica", Arial, sans-serif;
	font-family: Arial, Helvetica, sans-serif;
}

#contact { margin-bottom:10px; }

#contact h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; }
#contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; }

#contact {
	display: block;
	width: 750px;
	height: auto;
	margin: 0 10px 10px 10px auto;
	padding: 15px;
	border: 1px solid #cbcbcb;
	background-color: #FFF;
	-webkit-border-radius:5px;
	font-family: Arial, Sans-Serif;
}

/* Form style */

#contact label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 155px; font-size: 1.5em; -webkit-border-radius:5px; }
#contact input, textarea, select { width: 300px; margin: 0; padding: 5px; color: #666; background: #f5f5f5; border: 1px solid #ccc; margin: 5px 0; font:1.5em "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; webkit-border-radius:5px; }   
#contact input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; }
#contact input.submit { width: 85px; cursor: pointer; border: 1px solid #222; background:#333; color:#fff; }
#contact input.submit:hover { background:#444; }
#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset {
	padding:20px;
	border:1px solid #eee;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	font-size: 1.0em;
}
#contact legend { padding:7px 10px; font-weight:bold; color:#000; border:1px solid #eee; -webkit-border-radius:5px; -moz-border-radius:5px; margin-bottom:0 !important; margin-bottom:20px; }

#contact img{border: 1px solid #cdcbcb; margin-right: 30px;}

#contact span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */

#message { margin: 10px 0; padding: 0; }

.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../images/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4; -webkit-border-radius:5px; }

.loader { padding: 0 10px; }

#contact #success_page h1 { background: url('../images/success.gif') left no-repeat; padding-left:22px; }

acronym { border-bottom:1px dotted #ccc; }

/*Pricing*/
.pricing_main{width:918px; padding: 20px;}
.pricing_main h2{margin: 0 0 10px 0; font-size:2.8em; font-weight:bold;}
.pricing_main .subscribe{padding: 30px 0 30px 0; font-size: 1.4em; font-weight: bold; color: #4b4d4a;}
.pricing_main p{padding: 0px 0 20px 0;}

.pricing_header{overflow: hidden; width: 100%;}
.pricing_header_left{float: left; width: 630px;}
.pricing_header_left .title{font-size: 2.2em; line-height: normal; color: #7d807c; padding: 0 0 20px 0; font-style: normal;}
.pricing_header_right{float: left; width: 223px; padding: 0 0 0 65px;}
.pricing_header_right .card{font-size: 1.4em; line-height: normal; color: #7d807c; font-weight: bold; padding: 0 0 10px 0;}

.pricing_table{width: 915px; margin: 20px 0 20px 0; padding: 20px 10px 15px 10px; overflow: hidden; border: 1px solid #cdcbcb; background-color: #f3f3f3;}
.pricing_table .thumb{float: left; width: 195px; padding: 10px 10px 10px 15px; border-right: 1px solid #cdcbcb;}
.pricing_table .thumb .subtitle{ font-size: 1.3em; color: #5c6458; padding: 0 0 15px 0;}
.pricing_table .thumb_last .subtitle{ font-size: 1.3em; color: #5c6458; padding: 0 0 20px 0;}
.pricing_table .thumb_last{float: left; width: 195px; padding: 10px 10px 10px 15px;}
.pricing_table .thumb .price{font-size: 2.2em; font-weight: bold; color: #d15806; line-height: normal;}
.pricing_table .thumb_last .price{font-size: 2.2em; font-weight: bold; color: #d15806; line-height: normal;}
.pricing_table .thumb .price span{font-size: 11px; font-weight: normal; color: #b1b1b1 ;line-height: normal;}
.pricing_table .thumb_last .price span{font-size: 11px; font-weight: normal; color: #b1b1b1; line-height: normal;}
.thumb a, .thumb_last a{float: left; width: 160px; height: 40px; display: block; margin: 20px 0 10px 0; background: url(i/buynow.png) top left no-repeat; text-indent: -9999px;}

.pricing_table .thumb ul.listing, .pricing_table .thumb_last ul.listing{float:left; padding: 30px 0px 0px 0px; margin:0;}
.pricing_table .thumb ul.listing li{list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 5px 30px; margin:0 0 5px 0; font-size:1.2em;}
.pricing_table .thumb_last ul.listing li{list-style-image: none; background-image:url(i/ico_li.png); background-repeat: no-repeat; background-position: left center; padding:0 0 5px 30px; margin:0 0 5px 0; font-size:1.2em;}
.pricing_table .thumb ul.listing li.no{list-style-image: none; background-image:url(i/no.png); background-repeat: no-repeat; background-position: left center; padding:0 0 5px 30px; margin:0 0 5px 0; font-size:1.2em;}
.pricing_table .thumb_last ul.listing li.no{list-style-image: none; background-image:url(i/no.png); background-repeat: no-repeat; background-position: left center; padding:0 0 5px 30px; margin:0 0 5px 0; font-size:1.2em;}


.pricing_table h4.professional{width: 100%;float: left; line-height: 47px; margin: 0 0 0 0; padding: 0; background: url(i/professional.png) center left no-repeat; text-indent: -9999px;}
.pricing_table h4.basic{width: 100%; float: left;line-height: 47px; margin: 0 0 35px 0; padding: 0 0 0 0; background: url(i/basic.png) center left no-repeat; text-indent: -9999px;}
.pricing_table h4.advanced{width: 100%;float: left; line-height: 47px; margin: 0 0 0 0; padding: 0; background: url(i/advanced.png) left center no-repeat; text-indent: -9999px;}
.pricing_table h4.nitro{width: 100%; float: left;line-height: 47px; margin: 0 0 0 0; padding: 0; background: url(i/nitro.png) center left no-repeat; text-indent: -9999px;}

.pricing_table_footer{font-size: 1.2em; color: #949494; font-style: italic;}


/*GOOGLE MAP*/

.map {
    width: 710px;
    height: 300px;
    border: 10px solid #273035;
    overflow: hidden;
}

.tooltip {
    font-family: "Lucida Sans", "Lucida Sans Unicode", arial;
    font-size: 9pt;
    width: 170px;
    overflow: hidden;
}

.tooltip .top{
    background: url(../images/bubble.png) no-repeat;
    height: 5px;
    overflow: hidden;
}

.tooltip .middle{
    background: url(../images/bg.png) repeat;
    background-position: -173px top;
    padding: 0px 5px;
    color: #FFF;
}

.tooltip .middle img{
    margin: 5px 0px;
    clear: both;
}

.tooltip .bottom{
    background: url(../images/bubble.png) no-repeat;
    height: 25px;
    background-position: left bottom;
    overflow: hidden;
}

.tooltip .IE6 {
    background: url(../images/bubble.gif) no-repeat;
}

.tooltip .BOTTOMIE6 {
    background: url(../images/bubble.gif) no-repeat left bottom;
}

.tooltip .MIDDLEIE6 {
    background: #1A1A1A;
}