@charset "UTF-8";
/* CSS Document */


/*** GENERAL ***/

body {
	
	margin: 0;
	padding: 0;
	
	min-width: 972px;
	
	background-image: url(images/content_background2.png);
	background-repeat: repeat;
}

* {
	
	font-family: Myriad Pro, Helvetica, Arial, sans-serif;
}

a {
	
	color: #019fc3;
	text-decoration: none;
}

ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type:disc;
}

ol {
	list-style: decimal;
	padding-left: 25px;
}

/* FORMS */
form {
		
	}
		
		label {
			
			display: block;
			
			font-size: 12px;
			margin: 5px 0;
		}
		
		label.for-checkbox {
			
		}
		
		input, textarea {
			
			
			
			background: none;
			border: dashed #7ccee3 1px;
			font-size: 12px;
			
			margin-bottom: 10px;
		}
		
		input.cloud-button {
			height: 46px;
			padding: 0 0;
			
			font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
			
			width: 180px;
		}
		
		input.text {
			width: 180px;
		}
		
		input.float-check {
			float:left;
			margin-top: 8px;
		}



/*
a:hover {
	
	color: #019fc3;
	text-decoration: underline;
	
	border-bottom: 1px solid #a3d6e2;
}
*/

p a:hover, footer a:hover { 
	
	color: #fff;
	background: #00b2d7;
	
	padding: 0.25em;
	margin: -0.28em -0.25em;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

#header_space h1 {
		
		width: 244px;
		height: 57px;
		
		margin-left: 35px;
		margin-top: 0;
		
		background-image: url(images/studio_ludens_logo2.png);
	}
	
		#header_space h1 span {
			display: none;
		}

#content h1 {
	font-family: ITC Lubalin Graph Std, serif;
	font-size: 30px;
	color: #019fc3;
}


em {
	font-weight: bold;
	font-variant: small-caps;
}


h2, h3, h4 {
	font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
}



h2.quoted {
	font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
	
	line-height: 1.3em;
	
	font-size: 22px;
	color: #019fc3;
	width: 440px;
	margin: 9px 0 20px 0px;
	clear: right;
	padding: 0;
}

h2.quoted.wide {
	width: 660px;
}

h2 a, h3 a, h4 a {
	font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
}



/* image styles */

img.valign {
	vertical-align: middle;
	margin: 4px 4px 4px 0;
}

h3 {
		padding: 20px 0 10px 0;
		color: #019fc3;
		/*color: #54b124;*/
		
		/*font-weight: normal;*/
	}
	
	h3.large {
		
		font-size: 22px;
	}
	
	h3.giant {
		font-size: 36px;
	}

h4 {
	font-size: 14px;
	color: #019fc3;
	margin: 10px 0 8 px 0;
}


p {

	font-size: 13px;
	line-height: 18px;
	margin: 10px 0;
	
	text-align: left;
}



.speech-bubble {

	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border: solid 1px #999;
	
	background-color: #FFF;
	
	padding: 10px;
	
	float: left;
	margin: 10px 30px 10px 0;
	
	/*font-family: ITC Lubalin Graph Std, serif;*/
	font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
	font-weight: bold;
}


	.bubble-anchor-right {
		
		position: relative;
		float: right;
		
		width: 23px;
		height: 26px;
		
		margin-right: -33px;
		
		background-image: url(images/bubble_anchor_right.png);
		background-position: right;
		background-repeat: no-repeat;
	}
	
	.bubble-anchor-left {
		
		position: relative;
		float: left;
		
		width: 23px;
		height: 26px;
		
		margin-left: -30px;
		
		background-image: url(images/bubble_anchor_left.png);
		background-position: left;
		background-repeat: no-repeat;
	}
	
	.speech-bubble .testimonial-text {
		
		font-size: 12px;
		font-weight: bold;
		margin: 0;
	}
	
	.speech-bubble .testimonial-person {
		
		font-size: 12px;
		font-weight: bold;
		font-style: italic;
		margin: 0;
		text-align: right;
	}
	
	.speech-bubble .testimonial-person:before {
		
		content: "- ";
	}



.cloud-button {
	
	width: 164px;
	height: 30px;
	min-height: 30px;
	
	background-image: url(images/cloud_button_medium.png);
	background-position: top;
	background-repeat: no-repeat;
	
	border: none;
	
	margin: 8px 0 3px 4px;
	padding-top: 14px;
	
	color: #FFF;
	font-size: 14px;
	font-family: ITC Lubalin Graph Std, serif;
	text-align: center;
	
	font-weight: bold;
}

a.cloud-button {
	display: block;
}

a.cloud-button:hover {
	width: 164px;
	min-height: 30px;
	
	background-image: url(images/cloud_button_medium.png);
	background-position: top;
	background-repeat: no-repeat;
	
	border: none;
	
	margin: 8px 0 3px 4px;
	padding-top: 14px;
	
	color: #FFF;
	font-size: 14px;
	font-family: ITC Lubalin Graph Std, serif;
	text-align: center;
	
	font-weight: bold;
	background-color: none;
}

.cloud-button input {
	color: #FFF;
	font-size: 14px;
	font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
	
	border: none;
}

	.cloud-button a {
		
		color: #fff;
		font-family: ITC Lubalin Graph Std, Myriad Pro, Helvetica, Arial, sans-serif;
	}
	
	
	#content .cloud-button a:hover {
		
		background: none;
		border: none;
		
		margin: 0;
		padding: 0;
	}




/*** HEADER ***/


#header {

	width: 100%;
	height: 144px;
	
	/*background-image: url(images/content_background.png);*/
	background-repeat: repeat;
}

#header_small {
	width: 100%;
	height: 100px;
	background-repeat: repeat;
}

#go_home {
	position: absolute;
	left: 300px;
	top: 68px;
	
	font-size: 12px;
}

#go_home a {
	color: #000;
}

#go_home a:hover {
	text-decoration: underline;
}

	#header_top {
		
		width: 100%;
		height: 42px;
		
		background-image: url(images/header_top3.png);
		background-repeat: repeat-x;
	}
	
	#header a:hover {
		
		background: none;
	}

	#header_space {
		
		width: 100%;
		height: 65px;
	}
	
		
	#feedback_sheep {
		
		width: 255px;
		height: 65px;
		
		position: absolute;
		
		margin-top: -45px;
		right: 20px;
		
		background-image: url(images/feedback_sheep.png);
		z-index: 5;
	}
	
		#feedback_sheep span {
			display: none;
		}
		
	
	#header_menu_container {
		
		width: 100%;
		min-width: 972px;
		height: 55px;
		
		position: absolute;
		
		margin-top: -7px;
		margin-bottom: -7px;
		
		background-image: url(images/header_menu_bar.png);
		background-position: top left;
		background-repeat: repeat-x;
		
		z-index: 100;
	}
	
		#header_menu {
			
			width: 972px;						
			margin: 0 auto;
		}
	
		#header_menu ul {
			
			vertical-align: top;
			
			display: block;
		}
			
		
		#header_menu li.menu-item {
		
			height: 30px;
			padding-top: 20px;
			margin-right: -5px;
			
			list-style: none;
			
			display: block;
			float: left;
			vertical-align: top;
		}
		
		#header_menu li.menu-selected-item {
		
			height: 30px;
			padding-top: 20px;
			margin-right: -5px;
			
			list-style: none;
			
			display: block;
			float: left;
			vertical-align: top;
		}
	
			#header_menu li a {
				
				height: 23px;
				
				
				font-family: ITC Lubalin Graph Std, serif;
				font-weight: bold;
				text-decoration: none;
				text-align: center;
				/*text-shadow: 1px -4px 1px #000;*/
				
				letter-spacing: 1px;
			}
			
			
			


/* drop down menu */

.drop-down-menu {
	
	display: none;
	
}

	.drop-down-menu ul {
		
		background-color: #019fc3;
		
		padding: 10px 20px;
		
		display: inline-block;
	}
	
	.drop-down-menu img {
		margin-right: 15px;
		margin-left: -10px;
	}
	
	.drop-down-menu span {
		display:block;
		width: 115px;
		font-size: 13px;
		background-color: #019fc3;
		padding: 10px;
		color: #FFF;
		
	}
	
	.drop-down-menu ul#designtools {
		
		background-color: #019fc3;
		
		padding-bottom: 10px;
		
		text-align: left;
	}
	
	#header_menu li.menu-selected-item > a {
		
		color: #FFF;
	}
	
	#header_menu li.menu-item > a {
		
		color: #FFF;
	}

	#header_menu li a {
		
		/*display: block;*/
		
		border: none;
	}

	#header_menu .submenu-item, #header_menu .submenu-selected-item {
		
		/*display: block;*/
		height: 15px;
		
		padding: 10px;
		list-style: none;
		
		color: #FFF;
		font-size: 14px;
	}


		#header_menu li li a {
			
			
			text-align: left;
			/*font-family: ITC Lubalin Graph Std, serif;
			*/
			font-family: Myriad Pro, Helvetica, Arial, sans-serif;
			font-weight: normal;
			
			letter-spacing: .05em;
			
			color: #d1e9ee;
		}
		
		#header_menu li li a:hover {
			
			
			color: #FFF;
		}


	.menu-item-selector {
		
		height: 37px;
		margin-top: -1px;
		
		display: block;
	
		background-image: url(images/menu_item_select.png);
		background-position: bottom left;
		background-repeat: repeat-x;
	}
	
	.menu-item > .menu-item-selector {
		display: none;
	}
	
	.menu-selected-item .drop-down-menu .menu-item-selector {
		display: none;
	}
	



/* width of menu items */
/* fixed link widths (1/5 * n) */

.default-menu-link {
	width: 135px;
}
#design_tool_link {
	
	width: 243px;
}

#store_link {
	
	width: 135px;
}

#about_link {
	
	width: 108px;
}

#blog_link {
	
	width: 108px;
}

#menu_spacer {
	
	width: 243px;
}

#business_link {
	
	width: 135px;
}

#contact_link {
	
	width: 108px;
}





/*** CONTENT ***/

/** page name header **/
.page-name-header {
	position: absolute;
	margin-left: 240px;
	margin-top: 15px;
	/*left: 238px;
	top: 160px;*/
	z-index: -1;
}
	
.page-name-header  h2, .page-name-header-c3 h2 {
	color: #BEE7F1;
	font-size: 90px;
	text-transform: lowercase;
}

.page-name-header-c3 {
	position: absolute;
	margin-left: 490px;
	margin-top: 15px;
	/*left: 478px;
	top: 160px;*/
	z-index: -1;
}


#content {

	width: 972px;
	/*width: 100%;*/
	margin: 0 auto;
	min-height: 300px;
}

.four-column-dashed-lines {
	
	/*background-image: url(images/background_lines.png);
	background-repeat: repeat-y;*/
}

	.column {
		
		width: 201px;
	 
		padding: 60px 20px 20px 20px;
		
		/*background-image: url(images/dash_line.png);*/
		background-repeat: repeat-y;
		background-position: right;
		
		float: left;
		
		z-index: 99;
	}
	
	
	.two-columns {
		
		width: 500px;
		padding: 0;
		/*float: left;*/
	}
	
	/* for displaying a two-column wide block inside a normal column */
	.two-columns-inside {
		
		width: 440px;
		padding: 0;
		
	}
	
	.three-columns {
		
		position: relative;
		
		width: 690px;
		padding: 0;
		padding-bottom: 30px;
		
		margin-left: 20px;
	}
		
		.three-columns .column-text-box {
			width: 200px;
		}
		
		.three-columns .float-left {
			float: left;
		}
		
		.three-columns .float-right {
			float: right;
		}
		

	/**
	this is kind of dangerous, as it overrides pretty much anything
	**/
	#content ul {
		/**
		EDIT: Alex
		commented this
		**/
		//margin: 10px 10px 10px 20px;
		
		font-size: 13px;
	}
	
	.column li {
		margin: 5px 0px 10px 0px;
		line-height: 17px;
		
		//list-style-type: circle;
	}
	
	.sub-h4 {
		
		margin-top: -10px;	
	}
	
	
	.polaroid-left {
		
		padding: 10px;
		background-color: #FFF;
		border: 1px #cccccc solid;
		
		margin: 10px 0 32px 0;
	
		-webkit-transform: rotate(-2deg);
		-moz-transform: rotate(-2deg);
		
		display: inline-block;
	}
	
	.polaroid-middle {
		
		padding: 10px;
		background-color: #FFF;
		border: 1px #cccccc solid;
		
		margin: 10px 0 32px -10px;
		
		display: inline-block;
	}
		
		.wp-caption-text {
			
			margin: 10px 0 0 0;	
		}
	
	.polaroid-right {
		
		padding: 10px;
		background-color: #FFF;
		border: 1px #cccccc solid;
		
		margin: 10px 0 20px 0;
	
		-webkit-transform: rotate(2deg);
		-moz-transform: rotate(2deg);
		
		display: inline-block;
	}
	
	
	.pre-header-image {
		
		display: block;
		margin: 60px auto 50px;
		text-align: center;
	}
	
	
	.arrow-link {
		
		text-align: right;
	}
	
	
	
	.large-message {
		
		font-size: 18px;
		font-weight: lighter;
		font-style: italic;
		letter-spacing: 1px;
		line-height: 22px;
		
		text-align: center;
		
		margin: 20px 0;
	}
	
	
		large-message.quoted:before {	
			content: '" ';
		}
		large-message.quoted:after {	
			content: ' "';
		}
	
	
	.action-text {
		
		font-size: 14px;
		text-align: center;
		
		margin: 15px 0 20px 0px;
	}
	
	#content .action-list, #content .action-list-big {
		
		margin: 15px 15px 20px 0;
		line-height: 27px;
		color: #A30134;
		
		text-align: right;
	}
	
	
	
		#content .action-list li, #content .action-list-big li {
			
			list-style: none;
			list-style-position: inside;
			
			
		}
			#content .action-list li a , #content .action-list-big li a {
				color: #A30134;
				
			}
			
			#content .action-list li a span, #content .action-list-big li a span{
				
				
				font-family: ITC Lubalin Graph Std, serif;
				letter-spacing: 0.05em;
				font-weight: bold;
				
				display: block;
				
				background-repeat: no-repeat;
				background-position: 34px 0;
				text-transform: lowercase;
			}
			
			#content .action-list-big li a span {
				height: 48px;
				padding: 4px 4px;
				font-size: 23px;
			}
			#content .action-list li a span {
				height: 32px;
				font-size: 16px;
				padding: 7px 0;
			}
			
			
			
			
			/* BIG navigation button with text */
			
			/* page item */
			#content .action-list-big li.page_item a {
				
				
				display: block;
				height: 37px;
				background-image: url(images/buttons/button_big_square.png);
				background-repeat: no-repeat;
				background-position: 20px 0;
				width: 195px;
				
				padding: 14px 50px 25px 0;
			}
			
			/* current page item */
			#content .action-list-big li.current_page_item a {
				background-image: url(images/buttons/button_big_selected.png);
				background-position: -142px 0;
				
				color: #fff;
				
			}
			/*hover */
			#content .action-list-big li.page_item a:hover {
				
				
				background-image: url(images/buttons/button_big.png);
				background-repeat: no-repeat;
				background-position: -142px 0;
				
			}
			
			/* SMALL navigation button */
			
			/* page item */
			#content .action-list li.page_item a {
				
				
				display: block;
				height: 17px;
				background-image: url(images/buttons/button_normal_square.png);
				background-repeat: no-repeat;
				background-position: 25px 0;
				width: 150px;
				
				padding: 10px 47px 24px 0;
			}
			
			/* current page item */
			#content .action-list li.current_page_item a {
				background-image: url(images/buttons/button_normal_selected.png);
				background-position: -182px 0;
				
				color: #fff;
				
			}
					
			/* hover */
			#content .action-list li.page_item a:hover {
				
				
				background-image: url(images/buttons/button_normal.png);
				background-repeat: no-repeat;
				background-position: -182px 0;
				
			}
			
			

			
			#content .action-list li a:hover, #content .action-list-big li a:hover { 
				
				color: #019FC3;
				
				
				
			}
			
	
	
	
	
	

/*** FOOTER ***/

#footer_container {
	
	width: 100%;
	
	background-image: url(images/footer_top.png);
	background-color: #FFF;
	background-repeat: repeat-x;
}

#footer {
	
	width: 972px;
	height: 220px;
	margin: 0 auto;
	
	/*
	background-image: url(images/footer_top.png);
	background-color: #FFF;
	background-repeat: repeat-x;
	*/
}




#birdie {
	
	width: 104px;
	height: 45px;
	
	position: absolute;
	
	margin-left: 20px;
	margin-top: 20px;
	
	background-image: url(images/birdie.png);
}

#birdie:hover {
	
	-webkit-transform: rotate(-5deg);
 	-moz-transform: rotate(-5deg);	
}


#newsletter_bubble {
	
	position: absolute;
	width: 170px;
	height: 110px;
	
	margin-left: 110px;
	margin-top: 50px; 	
}


.email-input {
	
	position: absolute;
	
	width: 140px;
	margin: 0 0 7px 6px;
	padding: 3px;
	 
	border: dashed 1px #999;
}

#subscribe_container {
	
	margin: 45px 0 0 0;
}

	
	

#sitemap {

	position: absolute;

	margin-left: 350px;
	padding-top: 35px;
	padding-bottom: 60px;
	
	color: #222;
}



#footer ul {
	
	display: block;
	float: left;
	vertical-align: top;
	list-style-type: none;
	
	margin-top: 30px;
	margin-right: 40px;
}

#footer .lh a {
	
	display: block;
	
	font-family: ITC Lubalin Graph Std, serif;
	font-weight: bold;
	
	font-size: 12px;
	
	margin-bottom: 16px;
	
	color: #000;
}

#footer .lh a:hover {
	
	text-decoration: underline;
}

#footer li {
	
	font-size: 12px;
	margin-bottom: 6px;
}

#footer li a {
	
	color: #000;
}

#footer li a:hover {
	
	text-decoration: underline;
}



#footer_bottom {

	width: 100%;
	height: 250px;
	
	position: relative;
	
	
	background-color: #89d2e1;
}

#water_surface {
	
	height: 61px;
	
	top: -10px;
	
	background-image: url(images/water_surface3.png);
	background-repeat: repeat-x;
}

#water_logo {

	width: 265px;
	height: 137px;

	position: absolute;

	right: 100px;
	bottom: 0;
	background-image: url(images/water_logo2.png);
}


/*** HOME PAGE ***/

.home-app-button {
	float: left;
	margin: 4px 17px 4px 25px;
}

.home-app-button a {
	color: #fff;		
	font-family: ITC Lubalin Graph Std, serif;
	letter-spacing: 0.05em;
	font-weight: bold;
	font-size: 14px;
	display: block;
	
	background-image: url(images/buttons/button_big_fixed.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-transform: lowercase;
	height: 77px;
	width: 206px;
}

.home-app-button a span {
	font-family: ITC Lubalin Graph Std, serif;
	letter-spacing: 0.05em;
	font-weight: normal;
	font-size: 14px;
	display: block;
	text-align: right;
	line-height: 120%;
	
	margin-right: 18px;
	
	width: 185px;
	padding: 22px 0 18px 0;
}

.home-app-button img {
	
	
	margin: -4px 0 0 -36px;
	padding: 0 6px 0 0;
	float: left;	
	
}
 f