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

/* -----------------------------------
	reset
-----------------------------------	*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, dl, dt {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
	font: normal 1em/1.5em Arial, sans-serif;
	color: #463f3e;
	background: #fff url(../assets/bg-main.jpg) repeat-x center top fixed;
}
ol, ul {
	list-style: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
h1 {
	font: 700 1.5em/1.5em "Arial Black", Gadget, sans-serif;
	color: #212121;
	text-transform: uppercase;
	letter-spacing: -.05em;
	margin: 10px 0;
	padding-bottom: 10px;
	border-bottom: solid 1px #212121;
}

/* -----------------------------------
	content
-----------------------------------	*/

#container {
	width: 900px;
	margin: 0 auto;
	padding: 0 15px 15px;
	position: relative;
	background: #fff url(../assets/bg-container.gif) repeat-x center top;
}
#top {
	width: 100%;
	margin: 0 auto 40px;
	clear: both;
	height: 90px;
	padding-top: 20px;
}
.logo {
	width: 521px;
}
.logo a img, .logo a:visited img {
	border: none;
}
.logo a:hover img {
	border: none;
}
.intro {
	width: 100%;
	margin: 0 auto;
	font: normal .9em/1.4em Arial, sans-serif;
	color: #888;
	text-align: justify;
}
.intro .error40x {
	font: 700 1.5em/1.5em "Arial Black", Gadget, sans-serif;
	color: red;
	letter-spacing: -.05em;
	margin-right: 20px;
}
ul.porto, ul.prices {
	width: 100%;
	margin: 30px auto 22px;
	clear: both;
}
ul.prices {
	margin-bottom: 60px;
}
ul.prices li {
	display: inline;
	width: 25%;
	height: 290px;
	float: left;
	font: normal .7em/1.4em Arial, sans-serif;
	color: #888;
	position: relative;
}
ul.prices a, ul.prices a:visited, .intro a, .intro a:visited {
	color: #bababa;
	text-decoration: none;
	border-bottom: dotted 1px #bababa;
}
ul.prices a:hover, .intro a:hover {
	color: #888;
	border-bottom: dotted 1px #888;
}
ul.prices h3 {
	font: normal 1.4em/1.5em Arial, sans-serif;
	margin: 0 0 15px;
	color: #000;
	width: 100%;
}
.cost {
	width: 100%;
	padding: 7px 0 0;
	border-top: solid 1px #f4f4f4;
	color: red;
	position: absolute;
	left: 0;
	bottom: 0;
	font: 700 1.3em/1.4em Arial, sans-serif;
}
ul.porto li {
	display: block;
	width: 100%;
	margin: 0 auto 25px;
	padding-bottom: 18px;
	border-bottom: solid 1px #f4f4f4;
	font: normal .7em/1em Georgia, "Times New Roman", Times, serif;
	color: #999;
}
ul.porto li a img, ul.porto li a:visited img {
	width: 890px;
	border: solid 5px #f4f4f4;
	float: left;
	margin-bottom: 20px;
}
ul.porto li a:hover img {
	border: solid 5px #efefef;
}
ul.porto .info {
	width: 100%;
	margin: 0 auto 20px;
	clear: both;
}
.info strong {
	width: 110px;
	float: left;
	font-weight: normal;
}
.info p {
	margin: 0 auto 5px;
}
.info p a, .info p a:visited {
	color: #999;
}
.info p a:hover {
	color: red;
}
#address {
	width: 100%;
	float: left;
	margin: 20px 0 0;
	font: normal .85em/1.4em Arial, sans-serif;
	color: #888;
	background: #fff;
}
.btt {
	width: 100%;
	float: left;
	margin: 0;
	font: normal .65em/1.2em Arial, sans-serif;
	text-align: right;
}
.btt a, .btt a:visited {
	color: #fff;
	padding: 2px 4px;
	background: red;
	text-decoration: none;
}
.btt a:hover {
	color: #fff;
	background: #212121;
	padding: 2px 4px;	
}

/* -----------------------------------
	footer
-----------------------------------	*/

#footer-wrapper {
	width: 100%;
	margin: 0 auto;
	clear: both;
	background: #f4f4f4 url(../assets/bg-footer.gif) center top;
	padding: 23px 0;
	border-top: solid 1px #efefef;
	border-bottom: solid 5px #3c332e;
}
#footer-wrapper h1 {
	width: 900px;
	margin: 0 auto;
	padding: 22px 0 10px;
}
#footer {
	width: 920px;
	margin: 0 auto;
	clear: both;
}
ul#footer-nav {
	width: 920px;
	margin: 15px 0 0;
	padding: 15px 0;
	float: left;
	clear: both;
	text-transform: uppercase;
	font: normal .6em/1.2em Arial, sans-serif;
}
ul#footer-nav li {
	width: 280px;
	float: left;
	display: inline;
	margin: 0 16px 2px 10px;
	border-bottom: dotted 1px #b9b9b9;
	text-indent: 20px;
	background: url(../assets/icons-2.png) no-repeat;
}
ul#footer-nav li a, ul#footer-nav li a:visited {
	text-decoration: none;
	color: #463f3e;
	display: block;
	padding: 5px;
}
ul#footer-nav li a:hover {
	color: red;
	background: #fff url(../assets/icons-2.png) no-repeat;
	padding: 5px;
}
ul#footer-nav li.current {
	background: #fff;
	color: #c00;
	padding: 5px;
}
#copyrt {
	width: 900px;
	margin: 40px auto 0;
	padding-top: 20px;
	border-top: dotted 1px #dadada;
	font: normal .7em/1.3em Arial, sans-serif;
	color: #888;
}
#copyrt a, #copyrt a:visited {
	color: #888;
	text-decoration: none;
}
#copyrt a:hover {
	color: #121212;
}
.cright {
	width: 118px;
	float: left;
	margin-right: 15px;
}
ul#subnav {
	float: right;
	text-align: right;
}
ul#subnav li {
	margin-left: 16px;
	display: inline;
	float: right;
}

/* -----------------------------------
	icons
-----------------------------------	*/

ul#footer-nav li.sw, ul#footer-nav li.sw a:hover {
	background-position: 2px 3px;
}
ul#footer-nav li.album, ul#footer-nav li.album a:hover, ul#footer-nav li.flueras, ul#footer-nav li.flueras a:hover {
	background-position: 2px -57px
}
ul#footer-nav li.csscreme, ul#footer-nav li.csscreme a:hover {
	background-position: 2px -77px;
}
ul#footer-nav li.wdbv, ul#footer-nav li.wdbv a:hover {
	background-position: 2px -17px;
}
ul#footer-nav li.w3c, ul#footer-nav li.w3c a:hover {
	background-position: 2px -97px;
}
ul#footer-nav li.af, ul#footer-nav li.af a:hover {
	background-position: 2px -37px;
}
ul#footer-nav li.cssremix, ul#footer-nav li.cssremix a:hover {
	background-position: 2px -117px;
}
ul#footer-nav li.porto, ul#footer-nav li.porto a:hover {
	background-position: 2px -137px;
}
ul#footer-nav li.qnt, ul#footer-nav li.qnt a:hover {
	background-position: 2px -157px;
}
ul#footer-nav li.bestcssvault, ul#footer-nav li.bestcssvault a:hover {
	background-position: 2px -177px;
}
ul#footer-nav li.none, ul#footer-nav li.none a:hover {
	background-position: 2px -197px;
}
ul#footer-nav li.csscontainer, ul#footer-nav li.csscontainer a:hover {
	background-position: 2px -217px;
}
ul#footer-nav li.cssyorkshire, ul#footer-nav li.cssyorkshire a:hover {
	background-position: 2px -237px;
}
ul#footer-nav li.cssbased, ul#footer-nav li.cssbased a:hover {
	background-position: 2px -257px;
}
ul#footer-nav li.cssshowcase, ul#footer-nav li.cssshowcase a:hover {
	background-position: 2px -277px;
}
ul#footer-nav li.cssleak, ul#footer-nav li.cssleak a:hover {
	background-position: 2px -297px;
}
ul#footer-nav li.cssluxury, ul#footer-nav li.cssluxury a:hover {
	background-position: 2px -317px;
}
ul#footer-nav li.designs, ul#footer-nav li.designs a:hover {
	background-position: 2px -337px;
}
ul#footer-nav li.csscutie, ul#footer-nav li.csscutie a:hover {
	background-position: 2px -357px;
}
ul#footer-nav li.designmeltdown, ul#footer-nav li.designmeltdown a:hover {
	background-position: 2px -377px;
}
ul#footer-nav li.designersCouch, ul#footer-nav li.designersCouch a:hover {
	background-position: 2px -397px;
}
ul#footer-nav li.makebetterwebsites, ul#footer-nav li.makebetterwebsites a:hover {
	background-position: 2px -417px;
}
ul#footer-nav li.designfridge, ul#footer-nav li.designfridge a:hover {
	background-position: 2px -437px;
}
ul#footer-nav li.knowtebook, ul#footer-nav li.knowtebook a:hover {
	background-position: 2px -457px;
}
ul#footer-nav li.downunder, ul#footer-nav li.downunder a:hover {
	background-position: 2px -477px;
}
ul#footer-nav li.davidhellmann, ul#footer-nav li.davidhellmann a:hover {
	background-position: 2px -497px;
}

/* -----------------------------------
	social media icons
-----------------------------------	*/

#social {position: relative; float: left; width: 200px; height: 16px; background: url(../assets/bg-social.png) no-repeat left top;}
#social li {width: 16px; height: 16px; position: absolute; background: url(../assets/bg-social.png) no-repeat 0 0; display: block; list-style: none;}
#social a {width: 16px; height: 16px; display: block; text-decoration: none;}
#social #twitter {left: 0;}
#social #facebook {left: 26px; background-position: -26px 0;}
#social #delicious {left: 52px; background-position: -52px 0;}
#social #linkedin {left: 78px; background-position: -78px 0;}
#social #stumbleupon {left: 104px; background-position: -104px 0;}
#social #technorati {left: 130px; background-position: -130px 0;}

#social #twitter a:hover {background: url(../assets/bg-social.png) 0 -16px no-repeat;}
#social #facebook a:hover {background: url(../assets/bg-social.png) -26px -16px no-repeat;}
#social #delicious a:hover {background: url(../assets/bg-social.png) -52px -16px no-repeat;}
#social #linkedin a:hover {background: url(../assets/bg-social.png) -78px -16px no-repeat;}
#social #stumbleupon a:hover {background: url(../assets/bg-social.png) -104px -16px no-repeat;}
#social #technorati a:hover {background: url(../assets/bg-social.png) -130px -16px no-repeat;}

/* -----------------------------------
	clearfix
-----------------------------------	*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix { height: 1%; }

/* Hide from IE Mac \*/
.clearfix {
	display: block;
}
/* End hide from IE Mac */
.clear { 
	clear: both; 
}