/******************************************************
NAME: 	portfolio.css
AUTHOR:	Allison Corbett
NOTES: 	This file contains all the style sheets for Allison's portfolio.
*******************************************************/

body {
	font-size: 65.5%;
	color: #333;
	font-family: tahoma, verdana, sans-serif;
	background: #330033 url(images/pf_bg.jpg) repeat-x top left;
	margin: 0;
	padding: 0;
}

h2 {
	color: #333;
	background: #fff url(images/pf_hdr.png) no-repeat top left;
	display: block;
	width: 384px;
	height: 26px;
}

h2 span {
	margin-left: -3000px;
}

h4 {
	font-size: 1.2em;
	font-weight: bold;
}

p,
li {
	font-size: 1.2em;
}

#mast {
	width: 800px;
	height: 77px;
	padding: 0;
	margin: 10px auto 0 auto;
	background: transparent url(images/pf_mast.jpg) no-repeat top left;
}

#main {
	width: 800px;
	/* height: 600px; */
	background: #fff url(images/pf_main_bg.jpg) repeat-y top left;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
}

#footer {
	width: 800px;
	height: 111px;
	padding: 0;
	margin: 0 auto 15px auto;
	background: transparent url(images/pf_footer.png) no-repeat top left;
}

#footer p {
	font-size: 1em;
	color: #666666;
	text-align: center;
	margin-top: 0;
	padding-top: 50px;
	line-height: 2em;
}

#content {
	float: left;
	width: 493px;
	/* border: 1px dashed #FF00FF; */
	padding: 10px;
}

.intro {
	font-size: 1.2em;
	line-height: 1.5em;
}

#sidebar {
	float: left;
	width: 280px;
	height: 600px;
	background-color: #fff;
	position: relative;
}

.project {
	/* border: 1px dashed #00FFFF; */
}

.project h3.title {
	font-size: 1.4em;
	margin-bottom: 1.2em;
	color: #333;
}

.project .url {
	font-size: .9em;
}

.project .curPoster {
	float: left;
	height: 260px;
	width: 300px;
	/* border: 1px dashed #FF00FF; */
}

.blurb {
	width: 185px;
	font-size: 1.1em;
	line-height: 1.7em;
	/* border: 1px dashed #00FFFF; */
	float: left;
	padding: 0;
}

.blurb p {
	font-size: 1.1em;
	margin-top: 0;
}

.details {
	clear: both;
}

.contact {
	margin-top: 35px;
}

/**************************************************************
DETAILS PAGES
**************************************************************/

.details h3 {
	font-family: "Trebuchet MS", trebuchet, tahoma, sans-serif;
	font-size: 1.8em;
	font-weight: bold;
	margin-top: .7em;
}

.details #main {
	position: relative;
}

.details #thumb_tab {
	position: absolute;
	right: 0;
	top: 40px;
	outline: none;
}

.details #sidebar #thumb_tab_close {
	position: absolute;
	left: -20px;
	top: 40px;
	outline: none;
}

.details #thumb_tab img,
.details #sidebar #thumb_tab_close img {
	border: 0px none;
}

.details #ss {
	float: left;
	width: 255px;
	/* height: 600px;
	border: 1px dashed #00FFFF; */
	margin-top: 65px;
	margin-left: 20px;
}

.details #sidebar {
	position: absolute;
	top: 25px;
	right: 8px;
	height: 560px;
}

.details #panel_uiDesign,
.details #panel_video,
.details #panel_misc {
	height: 560px;
}

.screenshot {
	display:block;
	margin-bottom: 25px;
}

.screenshot img {
	border: 0px none;
}

/**************************************************************
TOP NAV
**************************************************************/

#topNav {
	width: 100%; 
	background-color: #b6a3b6; 
	height: 25px;
}

#topNav a {
	display: block;
	height: 25px;
	width: 150px;
	float: left;
	color: #fff;
	font-family: "Trebuchet MS", trebuchet, tahoma, arial, sans-serif;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.3em;
	padding-left: 30px;
	line-height: 23px;
	outline: none;
}

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

#topNav #prevProject {
	background: transparent url(images/arrow_left.png) no-repeat 5px 5px;
}

#topNav #home {
	background: transparent url(images/home.png) no-repeat 5px 3px;
	margin-left: 10px;
	width: 110px;
}

#topNav #uxProjects {
	padding-left: 10px;
	padding-right: 5px;
	margin-left: 10px;
	background: transparent url(images/arrow_down_white.png) no-repeat 90px 8px;
	width: 95px;
}

#topNav #uxProjects.on {
	color: #333;
	background: #eee url(images/arrow_up.png) no-repeat 90px 8px;
}

#topNav #videoProjects {
	margin-left: 10px;
	padding-left: 10px;
	padding-right: 5px;
	background: transparent url(images/arrow_down_white.png) no-repeat 110px 8px;
	width: 115px;
}

#topNav #videoProjects.on {
	color: #333;
	background: #eee url(images/arrow_up.png) no-repeat 110px 8px;
}

#topNav #nextProject {
	background: transparent url(images/arrow_right.png) no-repeat 95px 5px;
	padding-left: 0;
}

/**************************************************************
SIDEBAR
**************************************************************/

#tabs {
	width: 100%;
	height: 26px;
	padding: 0;
	margin: 0;
	background-color: #fff;
	position: absolute;
	top: 5px;
	left: 0;
	z-index: 20;
}

#tabs a {
	color: #fff;
	text-decoration: none;
	display: block;
	float: left;
	width: 84px;
	height: 27px;
	/* border: 1px dashed #FF00FF; */
	font-size: 1.2em;
	font-weight: bold;
	background: transparent url(images/pf_tabs.png) no-repeat 0 -35px;
	line-height: 27px;
	text-align: center;
}

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

#tabs.uiDesign #uiDesign,
#tabs.video #video,
#tabs.misc #misc {
	background: transparent url(images/pf_tabs.png) no-repeat top left;
	color: #666;
	outline: none;
}

#panel_uiDesign,
#panel_video,
#panel_misc {
	width: 100%;
	background: transparent url(images/sidebar_bg.png) repeat-x top left;
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 0px none;
	margin: 0;
	padding: 0 0 0 5px;
	height: 600px;
	position: absolute;
	top: 31px;
	z-index: 5;
}

/**************************************************************
THUMBNAILS & POSTERS
**************************************************************/

.poster {
	display: block;
	width: 290px;
	height: 243px;
}

.thumb {
	display: block;
	width: 137px;
	height: 112px;
	float: left;
	margin-top: 20px;
	outline: none;
}

#topThumbPanel {
	background-color: #eee;
	width: 100%
}

.topThumb {
	display: block;
	width: 145px;
	height: 112px;
	float: left;
	margin-top: 10px;
	outline: none;
}

#uxProjectsPanel,
#videoProjectsPanel {
	margin-left: 15px;
	padding-bottom: 10px;
}

/* KEROS */
#poster_keros {
	background: transparent url(images/posters/poster_keros.png) no-repeat top left;
}

#thumb_keros {
	background: transparent url(images/thumbs/thumb_keros.png) no-repeat 0 -125px;
}

#thumb_keros:hover,
.keros #thumb_keros {
	background: transparent url(images/thumbs/thumb_keros.png) no-repeat 0 0;
}

/* NECP */
#poster_necp {
	background: transparent url(images/posters/poster_necp.png) no-repeat top left;
}

#thumb_necp {
	background: transparent url(images/thumbs/thumb_necp.png) no-repeat 0 -125px;
}

#thumb_necp:hover,
.necp #thumb_necp {
	background: transparent url(images/thumbs/thumb_necp.png) no-repeat 0 0;
}

/* SNEAKY CAMEL */
#poster_sc {
	background: transparent url(images/posters/poster_sc.png) no-repeat top left;
}

#thumb_sc {
	background: transparent url(images/thumbs/thumb_sc.png) no-repeat 0 -125px;
}

#thumb_sc:hover,
.sc #thumb_sc {
	background: transparent url(images/thumbs/thumb_sc.png) no-repeat 0 0;
}

/* KEYONLINE */
#poster_kep {
	background: transparent url(images/posters/poster_kep.png) no-repeat top left;
}

#thumb_kep {
	background: transparent url(images/thumbs/thumb_kep.png) no-repeat 0 -125px;
}

#thumb_kep:hover,
.kep #thumb_kep {
	background: transparent url(images/thumbs/thumb_kep.png) no-repeat 0 0;
}

/* RTI */
#poster_rti {
	background: transparent url(images/posters/poster_rti.png) no-repeat top left;
}

#thumb_rti {
	background: transparent url(images/thumbs/thumb_rti.png) no-repeat 0 -125px;
}

#thumb_rti:hover,
.rti #thumb_rti {
	background: transparent url(images/thumbs/thumb_rti.png) no-repeat 0 0;
}

/* SCO */
#poster_sco {
	background: transparent url(images/posters/poster_sco.png) no-repeat top left;
}

#thumb_sco {
	background: transparent url(images/thumbs/thumb_sco.png) no-repeat 0 -125px;
}

#thumb_sco:hover,
.sco #thumb_sco {
	background: transparent url(images/thumbs/thumb_sco.png) no-repeat 0 0;
}


/* CHARACTER GENERATOR */
#poster_cg {
	background: transparent url(images/posters/poster_cg.png) no-repeat top left;
}

#thumb_cg {
	background: transparent url(images/thumbs/thumb_cg.png) no-repeat 0 -125px;
}

#thumb_cg:hover,
.cg #thumb_cg {
	background: transparent url(images/thumbs/thumb_cg.png) no-repeat 0 0;
}

/* CCS */
#poster_ccs {
	background: transparent url(images/posters/poster_ccs.png) no-repeat top left;
}

#thumb_ccs {
	background: transparent url(images/thumbs/thumb_ccs.png) no-repeat 0 -125px;
}

#thumb_ccs:hover,
.ccs #thumb_ccs {
	background: transparent url(images/thumbs/thumb_ccs.png) no-repeat 0 0;
}

/* EBC WEB */
#poster_ebc_web {
	background: transparent url(images/posters/poster_ebc_web.png) no-repeat top left;
}

#thumb_ebc_web {
	background: transparent url(images/thumbs/thumb_ebc_web.png) no-repeat 0 -125px;
}

#thumb_ebc_web:hover,
.ebc_web #thumb_ebc_web {
	background: transparent url(images/thumbs/thumb_ebc_web.png) no-repeat 0 0;
}

/* ROBO-BOAT */
#poster_roboBoat {
	background: transparent url(images/posters/poster_roboBoat.png) no-repeat top left;
}

#thumb_roboBoat {
	background: transparent url(images/thumbs/thumb_roboBoat.png) no-repeat 0 -125px;
}

#thumb_roboBoat:hover,
.roboBoat #thumb_roboBoat {
	background: transparent url(images/thumbs/thumb_roboBoat.png) no-repeat 0 0;
}

/* THE INTERROGATION */
#poster_interrogation {
	background: transparent url(images/posters/poster_interrogation.png) no-repeat top left;
}

#thumb_interrogation {
	background: transparent url(images/thumbs/thumb_interrogation.png) no-repeat 0 -125px;
}

#thumb_interrogation:hover,
.interrogation #thumb_interrogation {
	background: transparent url(images/thumbs/thumb_interrogation.png) no-repeat 0 0;
}

/* EBC */
#poster_ebc {
	background: transparent url(images/posters/poster_ebc.png) no-repeat top left;
}

#thumb_ebc {
	background: transparent url(images/thumbs/thumb_ebc.png) no-repeat 0 -125px;
}

#thumb_ebc:hover,
.ebc #thumb_ebc {
	background: transparent url(images/thumbs/thumb_ebc.png) no-repeat 0 0;
}

/* THE PARTY */
#poster_party {
	background: transparent url(images/posters/poster_party.png) no-repeat top left;
}

#thumb_party {
	background: transparent url(images/thumbs/thumb_party.png) no-repeat 0 -125px;
}

#thumb_party:hover,
.party #thumb_party {
	background: transparent url(images/thumbs/thumb_party.png) no-repeat 0 0;
}

/* LAUNDRY DAY */
#poster_laundryDay {
	background: transparent url(images/posters/poster_laundryDay.png) no-repeat top left;
}

#thumb_laundryDay {
	background: transparent url(images/thumbs/thumb_laundryDay.png) no-repeat 0 -125px;
}

#thumb_laundryDay:hover,
.laundryDay #thumb_laundryDay {
	background: transparent url(images/thumbs/thumb_laundryDay.png) no-repeat 0 0;
}

/* BLOODY MARY */
#poster_bloodyMary {
	background: transparent url(images/posters/poster_bloodyMary.png) no-repeat top left;
}

#thumb_bloodyMary {
	background: transparent url(images/thumbs/thumb_bloodyMary.png) no-repeat 0 -125px;
}

#thumb_bloodyMary:hover,
.bloodyMary #thumb_bloodyMary {
	background: transparent url(images/thumbs/thumb_bloodyMary.png) no-repeat 0 0;
}

/* FATAL CHOICES */
#poster_fatalChoices {
	background: transparent url(images/posters/poster_fatalChoices.png) no-repeat top left;
}

#thumb_fatalChoices {
	background: transparent url(images/thumbs/thumb_fatalChoices.png) no-repeat 0 -125px;
}

#thumb_fatalChoices:hover,
.fatalChoices #thumb_fatalChoices {
	background: transparent url(images/thumbs/thumb_fatalChoices.png) no-repeat 0 0;
}

/***********************************************************************************
MISCELLANEOUS
************************************************************************************/

.clear {
	clear: both;
}