@charset "UTF-8";
/* Design kreazione Kolective 2010 All Rights Reserved */
/* #######################  GENERAL SETTINGS ############################ */
html{ height:auto;}

body{
	margin:0;
	padding:0px;
	height:auto;
font-family:'TitilliumText22LThin', Verdana, Geneva, sans-serif;
size:14px;
color:#333;

}
p{
	font-family:'TitilliumText22LThin', Verdana, Geneva, sans-serif;
	font-size:14px;
}
h1.fontface {font: 60px/68px 'TitilliumText22LRegular', Arial, sans-serif;letter-spacing: 0;}

		p.style1 {font: 14px 'TitilliumText22LThin', Arial, sans-serif; line-height:19px; text-indent:3px;}
		p.style9 {font: 13px 'TitilliumText22LThin', Arial, sans-serif; line-height:18px; text-indent:3px;}
		p.style7 { color:#FFF;font: 14px 'TitilliumText22LThin', Arial, sans-serif;}
		p.style8 { color:#FF0;font: 14px 'TitilliumText22LThin', Arial, sans-serif; text-indent:14px;}
		p.style2 { color:#FFF;font: 14px 'TitilliumText22LLight', Arial, sans-serif;}
		p.style3 {font: 18px/27px 'TitilliumText22LRegular', Arial, sans-serif;}
		p.style4 {font: 18px/27px 'TitilliumText22LMedium', Arial, sans-serif;}
		p.style5 {font: 18px/27px 'TitilliumText22LBold', Arial, sans-serif;}
		.style6 {
	font: 16px 'TitilliumText22LThin', Arial, sans-serif;
	line-height:5px;
	background-image:url(http://www.kreazione.net/images/patternyellowdot.png);
	background-repeat: repeat;
	background-position:center;
	border-right-width: 1px;
	border-bottom-width: 0.5px;
	border-right-style: dotted;
	border-bottom-style: dotted;
	border-right-color: #FFF;
	border-bottom-color: #FFF;
}
p.style0 {
	font: 16px 'TitilliumText22LThin', Arial, sans-serif;

	background-image:url(../images/patternyellow.png);
	background-repeat: repeat-x;
	background-position: center;

}
.style7 {
	color:#666;
	font: 10px 'TitilliumText22LThin', Arial, sans-serif;

}
.style13{font: 28px 'TitilliumText22LThin', Arial, sans-serif; color:#000;line-height: 0.4em; background-image:url(http://www.kreazione.net/images/patternyellow.png); background-repeat:repeat; padding-left:13px; padding-right:13px;}
/*  Heading Formatting */
h1 {
	font-family:TitilliumText22LThin, Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#FFF;}
h2 {font-size:1.7em;line-height: 0.8em;font-weight: 900;color: #000;}
h3 {font-size:1.5em;line-height: 0.8em;font-weight: 900;color: #000;}
h4 {font-size:1.4em;line-height: 0.8em;font-weight: 900;color: #000;}
h5 {font-size:1.3em;line-height: 0.8em;font-weight: 900;color: #000;}
h6 {font-size:16px; color: #fff;}

.black{color:#f00;}
.red{ color:#000;}

/*links*/
a:link {color: #333333; text-decoration:none;}
a:hover {color: #FF0066; text-decoration:none;}
a:visited {color: #FF0066; text-decoration:none;}
img {border: 0 none;}

/* Clears Divs */
.clr{clear: both;}

/* #######################  END GENERAL SETTINGS ############################ */
.container {
	margin:0;
	padding:0px;
	width: 100%;
	height:100%;
	background-image:url(../images/pattern.png);
	background-repeat:repeat;
	
}

.mainone {
	padding-left:5px;
	padding-right:5px;
	margin:0 auto;
	background-image: url(../images/bg.png);
	background-repeat:repeat;
	width: 1024px;
}

.header {
	top:0px;
	background-image: url(../images/headerpx.png);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	height: 94px;
	width: 100%;
	position: relative;
}
.logo {
	background-image: url(../images/logo.png);
	background-repeat:no-repeat;
	margin: 0px;
	padding: 0px;
	height: 48px;
	width: 357px;
	position: relative;
	left: 20px;
	top: 20px;
}
.mail {

	background-image: url(../images/mail.png);
	background-repeat: no-repeat;
	background-position:right;
	margin: 0px;
	padding: 0px;
	height: 13px;
	width: 155px;
	position: relative;
	top:0px;
	left: 800px;
}

.mainnav {
	margin: 0px;
	padding: 0px;
	height: 18px;
	width: 549px;
	position: relative;
	left: 30px;
	top: 0px;
	
}
.nav{
	position:relative;
	margin:0;
	padding:0;
	width:549px;
	height:25px;
	text-decoration:none;
	list-style:none;
	
	}
.nav li{
	float:left;


	}
.nav li a{
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	display: block;
	height: 25px;
	background: url(../images/btnera.png) no-repeat;
	text-indent: -9999px;
    overflow: hidden;
	}
	
	/*up state*/
	
li.home a{
	left: 0px;
	width: 102px;
	background-position: 0px 0px;
	background-repeat:no-repeat;
	}
li.about a{
	left: 102px;
	width: 102px;
	background-position: -102px 0px;
	background-repeat:no-repeat;
	}
li.work a{
	left: 204px;
	width: 102px;
	background-position: -204px 0px;
	background-repeat:no-repeat;
	}
li.downloads a{
	left: 306px;
	width: 60px;
	background-position: -306px 0px;
	background-repeat:no-repeat;

	}
li.contact a{
	left: 400px;
	width: 90px;
	background-position: -400px 0px;
	background-repeat:no-repeat;

	}
	
	/*hover state*/
	
li.home a:hover{
	left: 0px;
	width: 102px;
	background-position: 0px -26px;
	background-repeat:no-repeat;
	}
li.about a:hover{
	left: 102px;
	width: 102px;
	background-position: -102px -26px;
	background-repeat:no-repeat;
	}
li.work a:hover{
	left: 204px;
	width: 102px;
	background-position: -204px -26px;
	background-repeat:no-repeat;
	}
li.downloads a:hover{
	left: 306px;
	width: 60px;
	background-position: -306px -26px;
	background-repeat:no-repeat;

	}
li.contact a:hover{
	left: 400px;
	width: 90px;
	background-position: -400px -26px;
	background-repeat:no-repeat;

	}

/*slider starts here*/

/* main vertical scroll */

.banner {
	position:relative;
	top:0px;
	margin: 0px;
	padding: 0px;
	height: 250px;
	width: 1024px;
}

#main {
	
	top:31px;
	left:33px; 
	position:relative;
	overflow:hidden;
	height: 262px;
}

/* root element for pages */
#pages {
	position:absolute;
	height:100%;
}
/* root element for horizontal scrollables */
.scrollable {
	position:relative;
	overflow:hidden;
	width: 891px;
	height: 254px;
}

/* root element for scrollable items */
.scrollable .items {
	width:20000em;
	position:absolute;
	clear:both;
}

	/* single scrollable item */
	.item {
		
		float:left;
		cursor:pointer;
		width:891px;
		height:254px;
		padding:0px;
	}
	
	/* main navigator */
	#main_navi {
		position:relative;
		top:50px;
		float:left;
		padding:0px !important;
		margin:0px !important;
	}
	
	#main_navi li {
		background-color:#fff;
		border-top:1px solid #fff;
		border-left:1px solid #fff;
		clear:both;
		color:#333;
		font-size:12px;
		height:75px;
		list-style-type:none;
		padding:3px;
		width:93px;
		cursor:pointer;
	}
	
	#main_navi li:hover {
		background-image:url(../images/yellowstip.png);
		background-repeat:repeat;
	}
	
	#main_navi li.active {
		background-image:url(../images/pinkstip.png);
		background-repeat:repeat;
	}
	
	#main_navi img {
		float:left;
		margin-right:10px;
	}
	
	#main_navi strong {
		display:block;
	}
	
	#main div.navi {
		
		margin-left:366px;
		cursor:pointer;
	}
	.navi {
	margin-left:328px;
	width:200px;
	height:20px;
}


.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;     
} 	



/*slider ends here*/

/*mid body starts here*/
.midtitle{
	margin-top:50px;
	width:600px;
	height:25px;
	text-decoration:overline 5px #FF0;
	}

.midcon{
	width:100%;
	height:520px;
	position:relative;
	top:0px;
	margin-left:3px;
}
.preabout{
	padding:3px;
	padding-right:17px;
	width:265px;
	position: absolute;
	float:left;
	border-right:1px dotted #000;}
	
.demo {
	display:block;
	background-repeat:no-repeat;
	float:left;
	margin: 0px;
	padding: 0px;
	height: 494px;
	width: 720px;
	position: absolute;
	left: 301px;
	top:0px;
	cursor: pointer;

}
/*mid body ends here*/

/*footer starts here*/
.footer {
	color:#FFF;font: 14px 'TitilliumText22LThin', Arial, sans-serif;
	top:0px;
	position: relative;
	overflow:hidden;
	background-image:url(../images/fooimg.gif);
	background-repeat:repeat-x;
	width:1024px;
	height:215px;
}
.tweets img{
	position:relative;
	top:10px;
	left:25px;}
.tweets {

	position:relative;
	float: left;
	height: 200px;
	width: 250px;
	border-right:1px dotted #ddd;
	padding:3px;
}
#posts{
	top:22px;
	float:left;
	position:relative;
	width:250px;
	height:150px;
	
}
.post{
	border-bottom:1px dotted #ddd;
	padding:10px;
	background-image:url(../images/flecha.png);
	background-position:left;
	background-repeat:no-repeat;


}
.follow {
	float:left;
	padding: 3px;
	width: 150px;
	height:200px;
	border-right:1px dotted #ddd;
}
.viral {
	position: absolute;
	left:17px;
}
.testi {
	float:left;
	padding:3px;
	height: 200px;
	width: 300px;
	border-right:1px dotted #ddd;
}
.contakt {
	float: left;
	height: 200px;
	width: 250px;
	padding:3px;
}
.scrollablet {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 290px;
	height:150px;
	left:4px;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollablet .itemst {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.itemst div {
	float:left;
}

/* form style */
#myform {
	top:-170px;
 	left:750px;
	padding:15px 20px; 
	color:#eee;
	width:250px;
	margin:0;
	position:relative;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;	
} 

/* nested fieldset */
#myform fieldset {
	border:0;
	margin:0;
	padding:0;

}

/* typography */
#myform h3 	{ color:#eee; margin-top:0px; }
#myform p 	{ font-size:11px; }


/* input field */
#myform input {
	border:1px solid #444;
	background-color:#666;
	padding:5px;
	color:#ddd;
	font-size:12px;
	
	/* CSS3 spicing */
	text-shadow:1px 1px 1px #000;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;	
}

#myform input:focus 		{ color:#fff; background-color:#777; }
#myform input:active 	{ background-color:#888; }


/* button */
#myform button {
	outline:0;
	border:1px solid #666;	
}


/* error message */
.error {
	height:15px;
	background-color:#FFFE36;
	font-size:11px;
	border:1px solid #E1E16D;
	padding:4px 10px;
	color:#000;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px; 
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-topleft:0;	
	-webkit-border-bottom-left-radius:0; 
	-webkit-border-top-left-radius:0;
	
	-moz-box-shadow:0 0 6px #ddd;
	-webkit-box-shadow:0 0 6px #ddd;	
}

/* field label */
label {
	display:block;
	font-size:11px;
	color:#ccc;
}

#terms label {
	float:left;
}

#terms input {
	margin:0 5px;
}

.copyright {
	color: #666;
	margin-top: 5px;
	margin-bottom:-5px;
	padding: 0px;
	font-size:10px;
	text-align:center;
	width: 1024px;
	position: relative;
}