@charset "UTF-8";
/* John Jordan Portfolio styles */
/* (c) 2008 John Jordan http://www.johnjordan.info */


/* Basic Styles */

*{
	padding:0;
	margin:0;
}


a{
	color:#66a7c4;
	text-decoration:none;
	padding:0 2px;
}

a:hover{
	background:#544956;
	color:#c3f3f3;
	/*background:#d5ecd2;
	color:#640000;*/
}


img{
	border:0;
}


ul{
	margin:12px 8px;
}

li{
	margin:4px 6px;
}

item-content a{
	background:none;
	margin:0;
	padding:0;
}

body{
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
	color:#c3f3f3;
	background:#290a27 url(../images/bg_repeat_pattern.gif) repeat left top;
}


a.link-back-to-top{
	font-weight:bold;
}

div#page-top{
	position:absolute;
	top:0;
}

p{
	margin:4px 0;
	line-height:140%;
}

h3{
	color:#37c3bc;
	font-size:130%;
	margin:12px 0 8px 0;
}

h4{
	color:#8c469c;
	font-weight:normal;
	font-size:110%;
	margin:0 0 8px 0;
}

.float-right{
	float:right;
}

body#homepage h3{
	margin:38px 0 6px 0;
}


/* Basic Layout styles */

div#wrapper{
	width:100%;
	background:url(../images/bg_gradient.gif) repeat-x left top;
	min-height:336px;
}

div#main{
	position:relative;
	width:802px;
	margin:0 auto;
	padding:200px 0 0 0;
}

div#header{
	position:relative;
	width:100%;
}

div#footer{
	margin:20px auto 48px auto;
	width:633px;
	padding:20px 0 8px 169px;
	background-image:url(../images/img_footer_bubbles.png);
	background-repeat:no-repeat;
	background-position:left 20%;
}

div#header-bubbles{
	float:left;
	position:absolute;
	top:0;
	left:-80px;
	height:290px;
	width:519px;
	background-image:url(../images/img_header_bubbles.png);
}


/* Header styles */

h1#title-johnjordan{
	position:relative;
	z-index:2;
	height:62px;
	width:462px;
	background-image:url(../images/title_johnjordan.png);
	margin:0 0 10px 169px;
}

h1#title-johnjordan a{
	overflow:hidden;
	height: 0px !important; 
	padding: 62px 0 0 0; 
	height /**/:62px; /* for IE5/Win only */
	width:462px;
	display:block;
}

h1#title-johnjordan a:hover{
	background:none;
}

div#left-column{
	float:left;
	margin:0 0 28px 285px;
	width:198px;
}

p#intro-para{
	text-align:right;
}

h2#title-personal-info, h2#title-flash-interactive, h2#title-web-design, h2#title-motion-3d, h2#title-photography, h2#title-graphic-design, h2#title-concepts, h2#title-links{
	float:left;
	overflow:hidden;
	height: 0px !important; 
	padding: 23px 0 0 0; 
	height /**/:23px; /* for IE5/Win only */
	width:198px;
	background-repeat:no-repeat;
	background-position:right top;
	margin-bottom:12px;
}

h2#title-personal-info{
	background-image:url(../images/title_personal_info.png);
}

h2#title-flash-interactive{
	background-image:url(../images/title_flash_interactive.png);
}

h2#title-web-design{
	background-image:url(../images/title_web_design.png);
}

h2#title-motion-3d{
	background-image:url(../images/title_motion_3d.png);
}

h2#title-photography{
	background-image:url(../images/title_photography.png);
}

h2#title-graphic-design{
	background-image:url(../images/title_graphic_design.png);
}

h2#title-concepts{
	background-image:url(../images/title_concepts.png);
}

h2#title-links{
	background-image:url(../images/title_links.png);
}

ul#nav{
	float:left;
	display:inline;
	list-style:none;
	margin:0 0 28px 39px;
}

ul#nav li{
	display:block;
	list-style:none;
	font-size:120%;
	margin:0 0 3px 0;
	min-width:108px;
}

ul#nav li a{
	display:block;
	color:#66A7C4;
	text-decoration:none;
	padding:0 2px;
}

/*
ul#nav li.selected{
	background:#d5ecd2;
	color:#640000;
	font-size:135%;
	padding:1px 4px;
}
*/

ul#nav li.selected, ul#nav li a:hover{
	background:#544956;
	color:#c3f3f3;
}

ul#nav li.selected{
	padding:0 2px;
}

/* Content styles */

div#content{
	clear:both;
	width:100%;
	border-top:2px solid #5d2d67;
	padding-top:12px;
}

div.item{
	float:left;
	width:100%;
	margin:24px 0;
	border-bottom:2px solid #5d2d67;
}

div.item-header{
	width:100%;
	padding:17px 0;
}

div.item-content{
	float:left;
	width:100%;
	margin:0 0 12px 0;
}

div.two-per-row-left, div.two-per-row-right{
	width:399px;
}

div.two-per-row-left a, div.two-per-row-right a{
	float:left;
	display:block;
	width:399px;
}

div.two-per-row-left{
	float:left;
	margin:0 4px 4px 0;
}

div.two-per-row-right{
	float:right;
	margin:0 0 4px 0;
}

div.one-per-row{
	width:802px;
	float:left;
	margin:0 0 4px 0;
	text-align:center;
}

div.centered-skyscraper{
	float:left;
	margin:0 0 4px 105px;
	width:124px;
}

div.centered-wide-skyscraper{
	float:left;
	margin:0 4px 4px 69px;
	width:160px;
}

div.centered-500-OTP{
	float:left;
	margin:0 0 4px 0;
	width:500px;
}

div.centered-small-leaderboard{
	float:left;
	margin:0 4px 4px 0;
	width:468px;
}

div.centered-island{
	float:left;
	margin:0 4px 4px 0;
	width:300px;
}

div.centered-banner{
	float:left;
	margin:0 4px 4px 0;
	width:120px;
}

ul.links-list{
	margin:12px 4px;
	list-style:none;
}

ul.links-list li{
	margin:4px 0;
	list-style:none;
}

a.visit-link{
	background-image:url(../images/bullet_link.png);
	background-repeat:no-repeat;
	background-position:2px 50%;
	padding:0 2px 0 24px;
	margin:2px 0;
}

a:hover.visit-link{
	background-image:url(../images/bullet_link_hightlight.png);
}


div.item-content a:hover{
	background:none;
}

/* Footer styles */

div#footer h3{
	overflow:hidden;
	height: 0px !important; 
	padding: 38px 0 0 0; 
	height /**/:38px; /* for IE5/Win only */
	width:217px;
	background-image:url(../images/title_contact_info.png);
	background-repeat:no-repeat;
	background-position:left top;
	margin-bottom:12px;
}