/*
 * CSS for electricnet's 
 * portfolio page submission
 * for deviantART.
 *
 * I only use relative paths
 * in this so it's moveable.
 */

/* Basic
--------------------------------------------- */

body {
	margin: 0;
	background: #FFF url(../img/topgrad.gif) repeat-x;
	color: #516463;
	text-align: center; /* For IE only */
	font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
	line-height: 1.6em;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
} html>body { font-size: small; }

#container {
	width: 85%;
	margin: 0 auto;
	text-align: left; /* Reset */
	font-size: 85%;
}

/* Layoutwide styles
--------------------------------------------- */

h1, h2 {
	font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Times, serif;
	font-weight: normal;
}

h2 {
	font-size: 225%;
	margin-bottom: 0;
}

a {
	color: #516463; /* IE6 doesn't do inherit :( */
	text-decoration: underline;
}

a:hover {
	color: #1F292A;
}

ul {
	list-style-image: url(../img/bullet-portfolio.gif); 
}

.ntm { margin-top: 0; }
.nbm { margin-bottom: 0; }

/* Top
--------------------------------------------- */

#top {
	margin: 0 0 40px 0;
}

#top h1 {
	margin: 0 0 0 -16px; /* To make it line up with the text */
	padding: 0;
}

#top h1 span {
	position: absolute;
	left: -999px;
	width: 990px; /* Off left */
}

#top h1 a {
	display: block;
	width: 186px;
	height: 83px;
	background: transparent url(../img/dalogo.gif) no-repeat 0 0;
}

#top h1 a:hover {
	background-position: 0 -83px;
}

/* About
--------------------------------------------- */

#about #h {
	margin-bottom: 20px;
}

#about #h h1, #about #h h2 {
	display: inline; /* For them to line up next to each other */
}

#about #h h1 {
	color: #384344;
	font-size: 500%;
	letter-spacing: -.05em;
}

#about #h h2 {
	color: #BBC2BB;
	font-size: 225%;
	margin-left: 7px;
	text-transform: lowercase;
}

#about #tools {
	float: left;
	width: 153px;
	margin: 0 20px 0 0;
}

#about #tools ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#about #tools li {
	margin: 0;
	padding: 0;
}

#about #tools li i {
	background-image: url(../img/icons-portfolio.gif);
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin: 2px 5px 0 0;
}

#about #tools li a {
	display: block;
	padding: 3px 8px;
	text-decoration: none;
	color: #384344;
}

#about #tools li a:hover {
	color: #1F292A;
	background-color: #DEE8E5;
}

#about #text {
	margin: 0 270px 0 173px;
}

#about #quote {
	text-align: center;
	margin: 20px 0 0 0;
}

#about #quote blockquote {
	font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Times, serif;
	margin: 0; /* Escaping the normal blockquote behaviour */
	font-size: 250%;
	font-style: italic;
	color: #899B91;
}

#about #quote .cite {
	font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua", "Times New Roman", Times, serif;
}

#about #bullets {
	float: right;
	width: 250px;
	margin: 0 0 0 20px;
	overflow: hidden;
}

#about #bullets ul {
	margin: 7px 0 0 0;
	padding: 0 0 0 18px;
}

/* Arts
--------------------------------------------- */

#arts {
	margin: 0;
	padding: 40px 0 0 0;
	clear: both;
}

#arts #fullviewswitcher i {
	background-image: url(../img/icons-portfolio.gif);
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	margin: 2px 5px 0 0;
}

#arts #featured {
	float: right;
	width: 250px;
}

#arts #thumbs {
	margin-right: 270px;
}

.thumb, .l-thumb {
	float: left;
	width: 170px;
	height: 175px;
	text-align: center;
	margin: 0 20px 20px 0;
}

.l-thumb {
	width: 300px;
	height: 300px;
}

/* Footer
--------------------------------------------- */

#footer {
	clear: both;
	margin: 0 0 20px 0;
	padding: 40px 0 0 0;
	color: #A4B5AC;
}

a img {
	border-width: 0;
}

i.i1 { background-position:0px 0; }
i.i2 { background-position:-40px 0; }
i.i3 { background-position:-80px 0; }
i.i4 { background-position:-120px 0; }
i.i5 { background-position:-160px 0; }
/* From dss.css :D */

/* IE fixes
--------------------------------------------- */

* html #about #h {
	margin-bottom: 40px; /* Somehow IE requires more */
}

* html #about #tools ul {
	list-style-image: none;
}

* html #about #tools li a { /* Holly hack */
	height: 0.1em;
}

* html #about #bullets ul {
	padding-left: 22px;
}