/* General CSS */

/*****************/
/* CONFIG 		  ********************************************************************/
/*****************/

	html, body {
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}
	
	body {
		min-width:1060px;
		background:#FFF;
		color:#666;
		font:14px Arial, Helvetica, sans-serif;
	}
	p, li {
		font:14px Arial, Helvetica, sans-serif;
	}

/*****************/
/* GENERAL LAYOUT ********************************************************************/
/*****************/

	/* GENERAL LAYOUT : config */
		/* GENERAL : config : common tags */
			img { border:0; }
			img.border {
			   padding:1px;
			   border:1px solid #999;
			}
			hr {
				display:block;
				border:0;
				border-top:1px solid #CCC;
				background:#FFF;
				height:1px;
				padding:0;
				margin:15px 0;
				clear:both;
			}
				hr.sub {
					margin:15px 15px;
				}
			
			div.clear {
				display:block;
				clear:both;
				width:1px;
			}
			
			sup {
				font-size:9px;
				color:#7e7e7e;
				padding-left:3px;
			}
			
			p.credits {
				display:block;
				padding:2px 0;
				margin:1px 0;
			}
				p.credits, p.credits a {
					font-size:10px;
					font-style:italic;
					color:#7e7e7e;
				}
			
			/* GENERAL : config : common tags : lists */
				ul.arrow-list {
					margin:5px;
					padding:0;
				}
					ul.arrow-list li {
						margin:3px 0;
						padding:0;
					}
						ul.arrow-list li:before {
							content: "»";	
						}
						
			/* GENERAL : lists : nList (normal lists) */
				ul.nList {
					display:block;
					clear:both;
					margin:3px 15px;
				}
				ul.nList, ul.nList>li {
					float:none;
					clear:both;
					padding:3px;
					border-left:0;
					border-right:0;
				}
				ul.nList>li {
					margin:2px;
					text-align:left;
				}
			
			/* GENERAL : config : common tags : blockquote */
				blockquote {
					border-left:15px solid #CCC;
					margin:15px;
					padding:15px;
				}
					blockquote.block {
						background-color:#CCC;
					}
				blockquote span.sig {
					font-style:italic;
					text-align:right;
				}
			
		/* GENERAL LAYOUT : config : headers */
			h1, h2, h3, h4 {
				margin:2px 0;
				padding:1px 0;
			}
			h1 {
				font:32px Book Antiqua;
				color:#2C2B2B;
				line-height:28px;
			}
			h2 {
				font:24px Book Antiqua;
				color:#666;
				line-height:20px;
			}
			h3 {
				font:21px Book Antiqua;
				color:#666;
				line-height:17px;
			}
			h4 {
				font:18px Book Antiqua;
				color:#666;
			}
			
		/* GENERAL LAYOUT : config : links */
			a {
				font:14px Arial, Helvetica, sans-serif;
				color:#06C;	
				text-decoration:none;
			}
			a:hover {
				color:#039	
			}
				a.external{
					padding-right:12px;
					background:url('http://indezign.net/layout/images/links/ico_external.gif') no-repeat 100% 50%;
				}
			
			/* GENERAL LAYOUT : config : links : rounded buttons */
				div.rounded-buttons {
					display:block;
					width:100%;
					padding:5px 0;
					margin:5px 0;
				}
					div.rounded-buttons a {
						display:inline-block;
						float:left;
						background:#538cff;
						padding:8px;
						margin-right:5px;
						color:#FFF;
					}
					div.rounded-buttons a:hover {
						background:#3e6fd2;
					}
				
		/* GENERAL LAYOUT : config : other */
			.rounded-corners, blockquote, div.rounded-buttons a {
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				-khtml-border-radius:5px;
				border-radius:5px;
			}
			div#followButtons {
				margin:-12px 0;	
			}
	
	/* GENERAL LAYOUT : wrapper */
		div#wrapper {
			min-height:100%;
			position:relative;
		}
	
	/* GENERAL LAYOUT : header */
		div#header-wrap {
			display:block;
			width:100%;
			height:117px;
			background:#333 url('http://indezign.net/layout/images/template/topnav.jpg') bottom repeat-x;
			color:#666;
		}
			div#header-wrap div#header {
				display:block;
				width:1000px;
				height:117px;
				background:#333 url('http://indezign.net/layout/images/template/topnav.jpg') bottom repeat-x;
				margin:0 auto;
				position:relative;
			}
			
				div#header a#main-logo {
					display:block;
					width:174px;
					height:100px;
					background:url('http://indezign.net/layout/images/template/logo.jpg') no-repeat bottom;
					position:absolute;
					bottom:0;
					left:0;
				}
				div#header span {
					display:block;
					height:30px;
					position:absolute;
					top:50px;
					left:190px;
					font:italic 16px Book Antiqua;
					color:#666;
				}
				div#header ul#nav {
					margin:0;
					padding:0;
					list-style:none;
					position:absolute;
					bottom:0;
					right:0;
				}
					div#header ul#nav li {
						display:inline-block;
						float:left;	
						height:33px;
						margin:0;
						padding:0;
					}
						div#header ul#nav li a {
							font:14px Book Antiqua;
							color:#333;
							text-decoration:none;
							padding:7px 30px 8px 30px;
							border-right:1px solid #c2c2c2;
							border-left:1px solid #a7a7a7;
							position:relative;
							top:7px;
							left:0;
						}
							div#header ul#nav li.first {
								border-left:1px solid #a7a7a7;
							}
							div#header ul#nav li.last {
								border-right:1px solid #a7a7a7;
							}
							div#header ul#nav li.first a {
								border-left:1px solid #c2c2c2;
							}
							div#header ul#nav li a:hover, div#header ul#nav li a.current {
								background:url('http://indezign.net/layout/images/template/topnav_hover.jpg') repeat-x top;
							}
							
	/* GENERAL LAYOUT : subnav */
		ul#subnav {
			display:block;
			width:997px;
			height:31px;
			background:#484848 url('http://indezign.net/layout/images/template/subnav_left.jpg') no-repeat top left;
			margin:0 0 10px 0;
			padding:0 0 0 3px;
		}
			ul#subnav>li {
				display:inline-block;
				float:left;
				height:31px;
				margin:0;
				padding:0;
				list-style:none;
			}
				ul#subnav>li.first {
					margin-left:150px; /* default margin left */
				}
				ul#subnav>li a {
					display:block;
					padding:7px 15px;
					font:13px Arial, Helvetica, sans-serif;
					color:#CCC;
					text-decoration:none;
					border-right:1px solid #666;
				}
					ul#subnav>li.first a {
						border-left:1px solid #666;	
					}
					ul#subnav>li a:hover, ul#subnav>li a.current {
						background:#333;
					}
			ul#subnav>li.last {
				width:3px;
				float:right;
				background:#484848 url('http://indezign.net/layout/images/template/subnav_right.jpg') no-repeat top right;
			}
	
	/* GENERAL LAYOUT : body */
		div#body-wrap {
			display:block;
			width:1000px;
			margin:0 auto;
			padding-bottom:45px; /* height of footer */
			position:relative;
		}

	/* GENERAL LAYOUT : footer */
		div#footer-wrap {
			display:block;
			float:none;
			width:100%;
			height:45px;
			background:#333;
			color:#666;
			position:absolute;
			bottom:0;
			left:0;
		}
			div#footer-wrap div#footer {
				display:block;
				width:1000px;
				height:45px;
				background:#333;
				margin:0 auto;
			}
				div#footer-wrap div#footer div#content {
					padding:15px;	
				}

/*****************/
/* BLOCKS 		  ********************************************************************/
/*****************/
	
	ul.blocks {
		display:block;
		width:100%;
		margin:2px 0;
		padding:0;
		clear:both;
		position:relative;
		min-height:100%;
	}
		ul.blocks>li {
			display:inline-block;
			float:left;
			margin:0;
			padding:10px;
			border-right:1px solid #CCC;
			text-align:left;
		}
			ul.blocks>li.first {
				border-left:0;
			}
			ul.blocks>li.last {
				border-right:0;
			}
			
	/* BLOCKS : thirds, two-thirds */
		ul.blocks>li.thirds, ul.thirds>li {
			/*width:240px;*/
			width:310px;
		}
		ul.blocks>li.two-thirds {
			width:440px;				
		}
		

		
/*****************/
/* #right-nav	 ********************************************************************/
/*****************/
	
	div#right-nav {
		display:block;
		width:300px;
		padding:20px 0 20px 20px;
		position:absolute;
		top:45px;
		right:0;
		border-left:1px solid #CCC;
	}
		div#right-nav h1 {
			
		}
		div#right-nav ul.links {
			margin:10px 0;
			padding:0;
		}
		div#right-nav ul.links li {
			display:block;
			margin:2px 0;
			padding:0;
			list-style:none;
		}
			div#right-nav ul.links li a {
				font:14px Arial, Helvetica, sans-serif;
				color:#999;
				text-decoration:none;
			}
			div#right-nav ul.links li a.current, div#right-nav ul.links li a:hover {
				color:#06F;	
			}
		
/*****************/
/* LINKS 		  ********************************************************************/
/*****************/

	/* LINKS : Pagination (new, with mysql) */
		.pagin {
		  display:block;
		  padding: 2px 0;
		  margin: 5px 0;
		  font:bold 7pt "Verdana", sans-serif;
		  text-align:center;
		  clear:both;
		}
		.pagin * {
		  padding: 2px 6px;
		  margin: 0;
		}
		.pagin a {
		  border: solid 1px #666;
		  background-color: #EFEFEF;
		  color: #666666;
		  text-decoration: none;
		}
		.pagin a:visited {
		  border: solid 1px #666;
		  background-color: #EFEFEF;
		  color: #60606F;
		  text-decoration: none;
		}
		.pagin a:hover, .pagin a:active {
		  border: solid 1px #333;
		  background-color: white;
		  color: #333;
		  text-decoration: none;
		}
		.pagin span {
		  cursor: default;
		  border: solid 1px #808080;
		  background-color: #F0F0F0;
		  color: #B0B0B0;
		}
		.pagin span.current {
		  border: solid 1px #666666;
		  background-color: #666666;
		  color: white;
		}
		
/*****************/
/* BLOG 		  ********************************************************************/
/*****************/
	
	ul.blurbs {
		width:270px;
		margin:0;
		padding:0;
	}
		ul.blurbs.med>li {
			min-height:150px;	
		}
		
		ul.blurbs>li {
			width:270px;
			margin:0 0;
			padding:10px 0;
			border-bottom:1px solid #CCC;
			list-style:none;
		}
			ul.blurbs>li.first {
				border-top:0;	
			}
			ul.blurbs>li.last {
				border-bottom:0;	
			}
			
			/* BLOG : ul.blurbs : different sizes */
				ul.blurbs.med>li img {
					height:150px;
				}
				ul.blurbs.small>li {
					min-height:75px;	
				}
				ul.blurbs.small>li img {
					height:75px;
				}
				ul.blurbs>li img {
					width:75px;
					float:left;
					margin:0 10px 10px 0;
					padding:0;
				}
			
			ul.blurbs>li a.head {
				display:block;	
			}
			
			ul.blurbs>li p {
				margin:2px 0;
				padding:0;
			}
				
/*****************/
/* WORKS 		  ********************************************************************/
/*****************/
	
	/* WORKS : featured */
		ul.works-featured {
			display:block;
			float:none;
			clear:both;
			width:1000px;
			margin:15px auto;
			padding:0;
		}
			ul.works-featured li {
				display:inline-block;
				float:left;
				height:563px;
				list-style:none;
			}
			ul.works-featured li.img {
				width:618px;
				border:0;
				margin:0;
				padding:0;
			}
			ul.works-featured li.text {
				width:348px;
				height:563px;
				margin-left:12px;
				padding:0 10px;
				font:14px Arial, Helvetica, sans-serif;
				position:relative;
			}
				ul.works-featured li.text h1 {
					font:44px Book Antiqua;
					color:#2C2B2B;
					line-height:40px;
					margin:15px 0;
				}
				ul.works-featured li.text h2 {
					font:28px Arial, Helvetica, sans-serif;
					color:#666;
				}
				ul.works-featured li.text ul {
					display:block;
					width:inherit;
					/*height:120px;*/
					position:absolute;
					left:10px;
					bottom:30px;
					font:14px Arial;
					color:#333;
					margin:0;
					padding:0;
				}
					ul.works-featured li.text ul li {
						height:auto;
						float:none;
						display:block;
						margin:0;
						padding:2px 0;
						list-style:square;
					}
	
	/* WORKS : thumbs */
		ul.works-thumbs {
			display:block;
			width:1020px;
			margin:0 0 0 -6px;
			padding:0;
		}
			ul.works-thumbs li {
				display:inline-block;
				float:left;
				width:241px;
				height:243px;
				margin:16px 6px;
				padding:0;
				list-style:none;
				font:12px Arial, Helvetica, sans-serif;
				color:#FFF;
			}
				ul.works-thumbs li.first {
				}
				ul.works-thumbs li.last {
				}
				ul.works-thumbs li a {
					display:block;
					width:222px;
					height:inherit;
					padding:10px;
					background:#e5e5e5;
					color:#666;
					text-decoration:none;
				}
					ul.works-thumbs li a:hover {
						background:#d6d6d6;	
					}
					ul.works-thumbs li a img {
						border:0;
						width:222px;
						height:200px;
						margin:0 0 10px 0;
						padding:0;
						background:#666;
					}
					ul.works-thumbs li a b {
						display:block;
						width:220px;
						font-size:14px;
					}
	
/*****************/
/* SCRIPT-BASED   ********************************************************************/
/*****************/

	.top {
		position:fixed;
		right:15px;
		bottom:15px;
		width:50px;
		height:25px;
		padding-top:25px;
		line-height:25px;
		background:#333;
		color:#888;
		display:block;
		text-transform:uppercase;
		text-decoration:none;
		text-align:center;
		font-size:14px;
		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
		behavior:url(../PIE.htc);
	}
	
	.top:before {
		position:absolute;
		top:11px;
		left:14px;
		content:"";
		border-bottom:11px solid #888;
		border-left:11px solid transparent;
		border-right:11px solid transparent;
	}
	
	.top:hover {
		color:#eee;
	}
	
	.top:hover:before {
		border-bottom-color:#eee;
	}
	
	.opacity .top {
		opacity:1;
		-webkit-transition:opacity 700ms linear;
		-moz-transition:opacity 700ms linear;
		transition:opacity 700ms linear;
	}
	
	.opacity .top.hidden {
		opacity:0;
	}
	
	.no-opacity .top.hidden {
		display:none;
	}