*
{
	padding: 0;
	margin: 0;
}

html
{ overflow-y: scroll; }

body 
{
	color: #676258;
	text-align: center;
	padding-bottom: 5px;
	background: #fffdf6 url(../images/css/vanilla/backgrounds/background.gif) repeat-x fixed;
	font-size: 0.75em;
	font-family: "Verdana","Arial",sans-serif;
}

a img {	border: none; }
a { outline: none; }

input::-moz-focus-inner { border: 0; }

a:link, a:visited {	text-decoration: none; }
a:hover, a:active { text-decoration: underline; }

p a:link, 
p a:visited
{ background-color: #FFD; color: #6A614C; }

p a:hover,
p a:active
{ background-color: #FFD;	color: #6A4E0C; }

/* alt texts*/
img { color: #AAA; }

h1, h2, h3, h4 
{ font-weight: normal; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }

/*---------------------------- body -----------------------------*/

#body_bg
{
	height: 74px;
	margin-bottom: -74px;
	background: url(../images/css/vanilla/backgrounds/bubbles.gif) no-repeat center top;
}

#bodyTop
{
	width: 970px;
	height: 9px;
	background: url(../images/css/vanilla/backgrounds/bodyTop.gif) no-repeat top left;
}

#wrapper
{
	width: 970px;
	margin: 0 auto;
	padding: 0 10px;
	text-align: left;
	position: relative;
	background: url(../images/css/vanilla/backgrounds/body_border.gif) no-repeat top center;
}

#content
{
	float: left;
	width: 968px;
	margin-left: 1px;
	display: inline;
	position: relative;
	min-height: 450px;
	height: auto !important;
	height: 450px;
	background: #fff url(../images/css/vanilla/backgrounds/nudeModel.jpg) no-repeat center left;
	line-height: 1.7em;
}

#content p { margin: 1em 0; }

#webdesign #content { background: #fff url(../images/css/vanilla/backgrounds/webdesign.jpg) no-repeat left top; }
#animation #content { background: #fff url(../images/css/vanilla/backgrounds/animation.jpg) no-repeat left top; }
#illustration #content { background: #fff url(../images/css/vanilla/backgrounds/illustration.jpg) no-repeat left top; }
#contact #content { background: #fff url(../images/css/vanilla/backgrounds/contact.jpg) no-repeat center left; }
#links #content { background: #fff url(../images/css/vanilla/backgrounds/links.jpg) no-repeat bottom left; }
#four_oh_four #content { background: #fff url(../images/css/vanilla/backgrounds/404.jpg) no-repeat top right; }

#mainContent
{
	width: 520px;
	float: left;
	padding: 1em 0 1em 0;
}

#webdesign #content
{
	 min-height: 540px;
	 height: auto !important;
	 height: 540px;
}

#illustration #content
{
	 min-height: 535px;
	 height: auto !important;
	 height: 535px;
}

#secondaryContent
{
	float: right;
	width: 210px;
	padding: 0.3em 20px;
}

#sidebar
{
	float: left;
	width: 162px;
	padding: 10px 0 0 14px;
}

#latest a:hover, #latest a:active { text-decoration: underline; }

#footer
{
	clear: both;
	width: 970px;
	height: 20px;
	background: url(../images/css/vanilla/backgrounds/footer.gif) no-repeat top left;
}

/*-------------------------- navigation ---------------------------*/

#navigation
{
	position: relative;
	height: 39px;
	margin: 37px 0px -8px 55px;
	font-family: "Arial","Helvetica",sans-serif;
	font-size: 1.2em;
	background: url(../images/css/vanilla/nav/navleft.gif) no-repeat top left;
}

#navigation ul
{
	position: absolute;
	overflow: hidden;
	margin: 0 3.5em;
	padding: 9px 3.2em 0 0;
	background: url(../images/css/vanilla/nav/navright.gif) no-repeat top right;
}

#navigation li { display: inline; }

#navigation a, #folionav a
{
	text-decoration: none;
	font-weight: bold;
}

#navigation a
{
	display: block;
	float: left;
	padding: 7px 1em 0 1em;
	background: #fff url(../images/css/vanilla/nav/navlink.gif) no-repeat top left;
}

#navigation a:link, #navigation a:visited
{ color: #B7A581; }

#navigation a:hover, #navigation a:active
{ color: #6A614C; }

#navigation a.here:link,
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active 
{
	color: #6A614C;
	background: #fff url(../images/css/vanilla/nav/navlink.gif) no-repeat -256px 0;
}

#folionav
{ width: 140px; }

#folionav a
{
	display: block;
	line-height: 28px;
	height: 28px;
}

#folionav a
{
	border-width: 0px 0px 1px 1px;
	border-color: #ECE9D9;
	border-style: solid;
	background: #FFF url(../images/css/vanilla/nav/secLink.gif) no-repeat top right;
}

#folionav a:link, #folionav a:visited
{ color: #B7A581; }

#folionav a:hover, #folionav a:active
{ 
	color: #6A614C;
	background-position: bottom right; 
}

#folionav a.foliohere:link,
#folionav a.foliohere:visited,
#folionav a.foliohere:hover,
#folionav a.foliohere:active
{
	color: #6A614C;
	background: #FFF url(../images/css/vanilla/nav/foliohere.gif) no-repeat center right;
}

/*------------------------- slideshow ------------------------------*/
#slideshow
{
	position: relative;
	width: 200px;
	height: 200px;
	margin-top: 20px;
	overflow: hidden;
}

#frame
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background: url(../images/css/vanilla/backgrounds/frame.gif) no-repeat top left;
}

#preview
{
	width: 772px;
	height: 370px;
	position: absolute;
	border-width: 0;
	outline-width: 0;
	background: url(../images/css/vanilla/backgrounds/sitemap.jpg) no-repeat top left;
}

#latest
{
	float: left;
	margin-top: 20px;
	width: 200px;
	background: #F7F5EE url(../images/css/vanilla/backgrounds/latestBottom.gif) no-repeat left bottom;
}

#latest h4 
{
	padding: 15px 12px 0 12px; 
	background: url(../images/css/vanilla/backgrounds/latestTop.gif) no-repeat left top;
}

#latest p { padding: 0 12px 10px 12px; }

/*------------------------- portfolio ------------------------------*/

#folionav 
{
	list-style: none; 
	margin: 0;
	padding-top: 7px;
}

#folionav a
{
	font-family: "Arial", "Helvetica", sans-serif;
	text-align: left;
	font-weight: bold;
	font-size: 1.1em;
	text-indent: 14px;
}

#dot
{	
	width: 30px;
	height: 30px;
	margin-left: -2px;
	background: url(../images/css/vanilla/nav/dot.gif) no-repeat bottom left;
}

#title
{ text-indent: 1em; }

#mainpic 
{
	float: left;
	margin-top: 10px;
	width: 660px;
	display: inline;	
}

#mainpic p#title
{ padding-left: 0; }

#mainpic p
{ padding-left: 10px; }

#loading
{
	width: 32px;
	height: 32px;
	margin-left: 280px;
	margin-top: 195px;
	background: url(../images/css/vanilla/backgrounds/loading.gif);
}

#thumbnails 
{
	float: right;
	clear: right;
	margin-top: 50px;
	display: inline;
}

#thumbnails img
{ 
	display: block; 
	margin: 3px 0;
	width: 76px;
	height: 76px;
}

#gallery
{
	height: 430px;
	width: 112px;
	list-style: none;
	overflow: auto;
}

#gallery li { padding: 1px; }

#gallery a img
{ border: 1px solid #DBD3A5; }

#gallery a:hover img,
#gallery a.here img
{ border: 1px solid #6A614C; }

#illustrationContainer
{
	position: relative;
	width: 660px;
	height: 427px;
}

#illustrationFrame
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: url(../images/css/vanilla/backgrounds/illustrationFrame.gif) no-repeat top left;
}

#illustrationFrame a
{
	width: 660px; 
	height: 420px; 
	display: block; 
}

#not_found
{
	width: 660px;
	height: 420px;
	background: url(../images/css/vanilla/backgrounds/questionmark.gif) no-repeat top left;
}

#animation #content { height: 520px; }

#swf
{
	float: right;
	margin-top: 32px;
	display: inline;
	text-align: center;
	width: 790px;
	height: 480px;
	
}

#noflash
{
	float: right;
	width: 790px;
	height: 480px;
	text-align: left;
	overflow: auto;
}

#noflash_content
{
	width: 700px;
	height: 480px;
	padding-left: 30px;
}

#swf #noflash p
{ padding-top: 0; }

.feature_animation 
{
	padding-top: 10px; 
	border-top: 1px solid #CCC;
}

#swf p { padding-top: 50px;}


/*------------------------- contact ------------------------------*/

#contact #content
{
	min-height: 500px;
	height: auto !important;
	height: 500px;
}

input, textarea
{
	width: 230px;
	font-family: "Verdana","Arial",sans-serif;
	font-size: 1em;
	line-height: 1.3em;
	padding: 0.1em;
	background: #FEFDFB;
	border: 1px solid #999;
}

input:focus, textarea:focus 
{ background: #fff; }

textarea
{ height: 120px; }

form 
{
	margin-top: 3em;
	padding-left: 85px;
	width: 370px;
}

#info 
{
	padding-left: 85px;
}

fieldset 
{
	margin: 1em 0;
	padding: 1em;
	border: 1px solid #CCC;
	background: #FCF8EE;
}

legend 
{
	font-size: 110%;
	color: #6A614C;
}

label 
{
	float: left;
	width: 5em;
	text-align: right;
	margin-right: 10px;
}

label.error
{ color: #BD0101; }

#send
{
	float: left;
	width: 5em;
	margin-left: 6em;
}

#delete
{
	float: left;
	width: 5em;
	margin-left: 1em;
}

#send, #delete
{
	color: #4E4839;
	border: 1px solid #999;
	padding: 3px 0;
	cursor: pointer;
}

#anon
{ display: none; }

#contact #info 
{
	padding-top: 1em; 
	color: #6A614C;
}

.text, .textarea 
{
	color: #4E4839;
	font-family: "Verdana","Arial",sans-serif;
	padding: 2px 0;
}

#warning
{
	margin: 0.3em 0 -1.5em 6em;
	padding-left: 85px;
}

#contact .warning,
#error a
{ margin-left: 85px;}

.warning { color: #BD0101; }

#contact fieldset p.warning
{
	float: left;
	width: 200px;
	margin: 0.7em 0 0 6em;
	display: inline;
}

#envelope
{
	width: 100%;
	height: 205px;
	background: url(../images/css/vanilla/backgrounds/envelope.gif) no-repeat top center;
}

#thankyou,
#error
{
	width: 360px;
	padding-left: 70px;
	float: left;
	display: inline;
	text-align: center;
	margin-top: 72px;
}

#error
{
	margin-top: 150px;
	text-align: left;
}

#thankyou h2 { padding-top: 2em; }

/*------------------------- links ------------------------------*/

#linklist
{
	float: left;
	display: inline;
	width: 300px;
	min-height: 350px;
	height: auto !important;
	height: 350px;
	padding: 20px 0 0 178px;
}

#linklist ul 
{ 
	list-style-type: none; 
	display: none;
}

#linklist ul.active
{ padding: 1em 0; }

#linklist ul.inactive
{ padding: 0; }

#linklist li
{
	line-height: 1.75em;
	height: 1.75em;
	display: block !important;
}
	
#linklist h4
{ line-height: 2em; }

#linklist h4 a:link, 
#linklist h4 a:visited,
#linklist h4.inactive a:link, 
#linklist h4.inactive a:visited,
#linklist h4.inactive a:hover, 
#linklist h4.inactive a:active
{
	color: #6A614C;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #CCC;
}

#linklist h4 a:hover, 
#linklist h4 a:active,
#linklist h4.active a:link, 
#linklist h4.active a:visited,
#linklist h4.active a:hover, 
#linklist h4.active a:active
{
	color: #6A4E0C;
	background-color: #FFD;
	text-decoration: none;
}

#linklist li a:link, #linklist li a:visited 
{
	color: #6A614C;
	background: #FFF url(../images/css/vanilla/nav/arrow.gif) no-repeat left top;
	display: block;
	text-indent: 18px;
	text-decoration: none;
}

#linklist li a:hover, #linklist li a:active
{
	color: #6A4E0C;
	background-color: #FFD;
	background-position: bottom left;
	text-decoration: none;
}

#linksFooter 
{
	float: left; 
	clear: left; 
	height: 150px;
	width: 950px;
}

#links #footer { background: url(../images/css/vanilla/backgrounds/footer_links.jpg) no-repeat top left; }

/*------------------------- 404 ------------------------------*/

#four_oh_four #linklist ul
{
	display: inline;
}

#four_oh_four #content 
{
	height: 480px !important;  
	overflow: hidden;
}
#four_oh_four #mainContent { padding-top: 120px; }
#four_oh_four #linklist { padding: 0; min-height: 0; }

/*--------------------------- symbols -------------------------------*/

#symbol
{
	float: right;
	background: url(../images/css/vanilla/symbols/house.gif) no-repeat;
	width: 46px;
	height: 36px;
	padding-right: 99px;
	margin-top: -44px !important;
	margin-top: -49px;
}

#webdesign #symbol, #animation #symbol, #illustration #symbol
{
	background: url(../images/css/vanilla/symbols/folio.gif) no-repeat;
	width: 67px;
	height: 49px;
	padding-right: 79px;
	margin-top: -58px !important;
	margin-top: -63px;
}

#contact #symbol
{
	background: url(../images/css/vanilla/symbols/contact.gif) no-repeat;
	width: 65px;
	height: 62px;
	margin-top: -70px !important;
	margin-top: -75px;
}

#links #symbol
{
	background: url(../images/css/vanilla/symbols/links.gif) no-repeat;
	width: 54px;
	height: 50px;
	margin-top: -58px !important;
	margin-top: -63px;
}

#four_oh_four #symbol
{
	background: url(../images/css/vanilla/symbols/404.gif) no-repeat;
}

/*--------------------------- styleswitcher -------------------------------*/

#styleSwitcher
{
	position: absolute;
	z-index: 99;
	left: 20px;
	top: 40px;
	font-style: italic;
}

#styleSwitcher ul
{ list-style-type: none; }

#styleSwitcher ul ul
{ 
	width: 135px;
	padding: 5px 10px 30px 15px;
	display: none;
}

#styleSwitcher li
{ 
	width: 60px;
	cursor: crosshair;
	height: 36px;
	position: relative;
	text-indent: -9000px;
	background: url(../images/css/vanilla/nav/eye.jpg) no-repeat top left;
}

#styleSwitcher div
{
	position: absolute;
	z-index: 99;
	top: 36px;
	left: -9px;
	width: 170px;	
	overflow: hidden;
	background: url(../images/css/vanilla/backgrounds/styleswitcher.png) no-repeat bottom right !important;
	background: url(../images/css/vanilla/backgrounds/styleswitcher.gif) no-repeat bottom right;
}

#styleSwitcher div,
#styleSwitcher li li
{ cursor: auto; }

#styleSwitcher li li
{
	width: auto;
	height: auto;
	background: none;
}

#styleSwitcher li li.title
{
	color: #BBB;
	text-indent: 0;
	padding-bottom: 1.2em;
	font-size: 0.9em;
}

#styleSwitcher ul li:hover ul
{ display: block; }


#styleSwitcher a
{
	line-height: 1.75em;
	display: block;
}

#styleSwitcher a:link, 
#styleSwitcher a:visited
{
	color: #6A614C;
	background: url(../images/css/vanilla/nav/arrow.gif) no-repeat left top;
	text-indent: 18px;
	text-decoration: none; 
}

#styleSwitcher a:hover,
#styleSwitcher a:active,
#styleSwitcher .here a:link,
#styleSwitcher .here a:visited,
#styleSwitcher .here a:hover,
#styleSwitcher .here a:active
{ 
	color: #6A4E0C;
	background-color: #FFD;
	background-position: bottom left;
	text-decoration: none; 
}