/* Adam Celean's Online Portfolio - v10 */
/* ----- © Adam Celeban 2006-2009 ----- */

@charset "utf-8";

/* ---------------------------------------------------------

1	REMOVE DEFAULT STYLES
2	PAGE BACKGROUNDS
3	HEADER LAYOUT & NAVIGATION
4	POST LAYOUT
5	GENERAL FORMATTING
6	COMMENTS & BLOCKQUOTES
7	SOCIAL SITES
8	FORMS
9	PAGINATION
10	FOOTER
11	HOVER EFFECTS
12	TESTER

(chapters marked by equals sign, FIND them to skip chapters)
--------------------------------------------------------- */




/*  = 1  REMOVE DEFAULT STYLES */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
/* no idea why, but safari and chrome seem to need it to be reiterated here, otherwise that odd margin remains... */
body,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,blockquote{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;} 
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}




/*  = 2  PAGE BACKGROUNDS  */

body {background:#404047 url('images/wall-texture.jpg') center ;}




/*  = 3  HEADER LAYOUT & NAVIGATION */

#starbg {height:423px; background:#0b1123 url('images/collection.jpg') no-repeat center; margin-bottom:0px;}

	#center {margin-left:auto; margin-right:auto; width: 592px;}
	
		/* HEADER */
		h1 				{overflow: hidden; text-align:center; vertical-align:middle; }
		h1, h1 span 	{width: 592px; height: 364px; background:#0b1123 url('images/h1.jpg'); font-size: 100%;}
		h1 span 		{display: block; position: relative; z-index: 1; margin-bottom: 0px; cursor:pointer;}
	
		/* LIST */
		#nav 			{background:url('images/collection.jpg') no-repeat -460px -373px; width:530px; height:37px; margin:9px 0 0 30px; padding:0;}
		#nav span 		{display: none;}
		#nav li, #nav a {height:33px; display:block;}
		#nav li 		{float:left; list-style:none; display:inline;}
		.print {display:none;}
		
		/* links */
		#nav-home 		{width:78px;}
		#nav-articles 	{width:110px;}
		#nav-gallery 	{width:106px;}
		#nav-tutorials 	{width:124px;}
		#nav-contact 	{width:112px;}
		#marker {position:relative; top:-46px;}
		
		/* hover */
		#nav-home a:hover		{background:url('images/collection.jpg') no-repeat -460px -327px;}
		#nav-articles a:hover 	{background:url('images/collection.jpg') no-repeat -538px -327px;}
		#nav-gallery a:hover 	{background:url('images/collection.jpg') no-repeat -648px -327px;}
		#nav-tutorials a:hover 	{background:url('images/collection.jpg') no-repeat -754px -327px;}
		#nav-contact a:hover 	{background:url('images/collection.jpg') no-repeat -878px -327px;}
		
		/* active page */
		body#home #nav-home a				{background:url('images/collection.jpg') no-repeat -460px -290px;}
		body#articles #nav-articles a 		{background:url('images/collection.jpg') no-repeat -538px -290px;}
		body#gallery #nav-gallery a 		{background:url('images/collection.jpg') no-repeat -648px -290px;}
		body#tutorials #nav-tutorials a 	{background:url('images/collection.jpg') no-repeat -754px -290px;}
		body#contact #nav-contact a			{background:url('images/collection.jpg') no-repeat -878px -290px;}
		
		/* on-click */
		#nav-home a:active		{background:url('images/collection.jpg') no-repeat -460px -290px;}
		#nav-articles a:active 	{background:url('images/collection.jpg') no-repeat -538px -290px;}
		#nav-gallery a:active 	{background:url('images/collection.jpg') no-repeat -648px -290px;}
		#nav-tutorials a:active {background:url('images/collection.jpg') no-repeat -754px -290px;}
		#nav-contact a:active 	{background:url('images/collection.jpg') no-repeat -878px -290px;}
	
#starref {/*background:url('images/drips.jpg') no-repeat center top;*/ padding-top:0px;}
#bodycopy {/*background: url('images/shadow.png') repeat-x fixed; padding-top:40px;*/}					
#topbit { border-bottom:solid #666666 0px ; padding:19px 0 36px 0; background:url('images/sub.jpg') repeat-x center bottom;}		

#long-drip{background:url('images/long-drip.png'); background-attachment:fixed; width:12px; height:100%; background-repeat:no-repeat; z-index:99; border:red solid 1px; position:absolute;}

/*  = 4  POST LAYOUT */

/* post layer (style specified by categories) */
div.post 	{ min-width:900px;}
div.article {position: relative;}
div.vert {background-image:url('images/frame_lit_vertical.jpg'); background-position:top center; background-repeat:no-repeat;  min-height:539px; position: relative;}
div.iphone { min-height:539px; position: relative;}
div.design { min-height:539px; position: relative;}
div.horiz {background-image:url('images/frame_horizontal.jpg'); background-position:center 40px; background-repeat:no-repeat;  min-height:539px; position: relative;}
div.horizextra {background-image:url('images/frame_horizontal.jpg'); background-position:center 40px; background-repeat:no-repeat;  min-height:539px; position: relative;}
	
		/* containing divs */
		.outside {width:900px; padding-top:45px; margin-left:auto; margin-right:auto; vertical-align:top; margin-top:40px;}
		.contain {position:relative; }

			/* H2 - post headers */
			
			/* the order the next 2 items is read is important */
			div.contain h3.article {position: absolute; top:-20px; left:24px; z-index:20; width:790px; height:10px;}
			div.contain h3.vert {position: absolute; top:-20px; left:420px; z-index:20; width:450px; height:10px;}
			div.contain h3.iphone {position: absolute; top:-20px; left:320px; z-index:20; width:450px; height:10px;}
			div.contain h3.horiz {position: absolute; top:-20px; left:24px; z-index:20; width:790px; height:10px; margin-top:0px;}
			div.contain h3.horizextra {position: absolute; top:-20px; left:24px; z-index:20; width:790px; height:10px; margin-top:0px;}
			
			/* Post Entry */
			div.entry {position: relative;}
			div.entry span { position:absolute;}
			
			
			/* ZOOM ICON
			div.contain a span.zoom {display:none;}
			div.contain:hover a span.zoom {display:inherit; width:245px; height:355px; z-index:900; position:absolute; background:no-repeat 10px 10px url('images/zoom.png');padding:10px;}
			/*
			
			
/* safari_chrome.css --> */	div.entry span.first {position:absolute; top:0px; padding:33px 0 0 73px; display:block; width:100px; margin-bottom:300px;}
							
							/*HOVER INSET BORDER FOR IMAGES
							div.entry span.first:hover {padding:31px 0 0 72px;}
							div.entry span.first:hover a img { border-style:solid; border-width:2px; border-top-color:#222; border-left-color:#555; border-right-color:#555; border-bottom-color:#999;}*/
							
							div.entry span.second_vert {top:490px; left:1px; width:409px; height:460px; border: none; padding:50px 0 0 72px;
							background-image:url('images/frame_vertical.jpg'); background-position:top left; background-repeat:no-repeat; display:block;}
							
							div.entry span.iphone {top:-23px; left:15px; width:250px; height:460px; border: none; padding:89px 0 0 39px;
							background-image:url('images/iphone.jpg'); background-position:top left; background-repeat:no-repeat; display:block;}
							
							div.entry span.first_design {
							/* position frame */ top:35px; left:23px; width:543px; height:460px; border: none; display:block; 
							/* position image */ padding:49px 0 0 52px;
							/* bg frame image */ background-image:url('images/dpf.jpg'); background-position:top left; background-repeat:no-repeat;}
							
								.responsibilities {left:590px; top:50px;}
							
							div.entry span.second_square {top:490px; width:409px; height:402px; border: none; padding:50px 0 0 72px;
							background-image:url('images/frame_square.jpg'); background-position:top left; background-repeat:no-repeat;}
							
							div.entry span.third_square {top:892px; width:409px; height:402px; border: none; padding:50px 0 0 72px;
							background-image:url('images/frame_square.jpg'); background-position:top left; background-repeat:no-repeat;}
			
			div.horiz div.outside div.contain div.entry span.first {top:40px;}
			div.horizextra div.outside div.contain div.entry span.first {top:38px; left:-2px; width:759px;}
			
			area:hover {border:red solid 1px;}
			
			
			/* paragraph layout */
			p {vertical-align:top; padding: 0px 0px 18px 0px;}
			div.entry p:first-child{padding-top:30px;}
			div.horiz div.entry p:first-child{padding-top:30px;}
			div.horizextra div.entry p:first-child{padding-top:30px;}
			div.vert p {padding-left:420px; padding-right:30px; padding-top:0px; }
			div.iphone p {padding-left:320px; padding-right:30px; padding-top:0px; }
			
			div.vert h4 {padding-left:420px; padding-right:30px; padding-top:28px; }
			
			div.article p {padding-right:30px; padding-top:0px; padding-left:24px; }	
			div.horiz div.outside div.contain div.entry {padding-top:453px; }
			div.design div.outside div.contain div.entry {padding-top:453px; padding-right:30px; padding-left:24px; }
			div.horiz div.outside div.contain div.entry p {padding-right:30px; padding-top:0px; padding-left:24px; }
			div.horizextra div.outside div.contain div.entry {padding-top:453px; }
			div.horizextra div.outside div.contain div.entry p {padding-right:30px; padding-top:0px; padding-left:24px; }
			
					
			div.details {position:relative; margin-left:420px; position: relative; padding-top:40px;}
			



/*  = 5  GENERAL FORMATTING */

body, h1, p, li, div, td{font-family: Verdana, Arial, Helvetica, sans-serif; }
p, li 					{font-size: 15px; orphans:2; widows:2; font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; line-height:20px;}
a 						{text-decoration:none; color:white; }
a:hover 				{text-decoration:none; color:white;}
h3 						{font-family: Georgia, "Myriad Pro", Myriad, Verdana, Arial, Helvetica, sans-serif; color:#ccc; 
						font-weight:normal; font-size:31px; letter-spacing:1px; text-shadow: 0px 3px 2px rgba(0,0,0,.3);}
h4 						{font-family: Georgia, "Myriad Pro", Myriad, Verdana, Arial, Helvetica, sans-serif; color:#ccc; 
						font-weight:normal; font-size:20px; letter-spacing:1px; padding-bottom:0px; position:relative; top:-20px;  text-shadow: 0px 3px 2px rgba(0,0,0,.2);}
h3 a 					{text-decoration:none; color:#ccc; }
h3 a:first-child 		{padding-right:10px;}
h3 a:hover 				{text-decoration:none; color:white; position:relative;}
i, em 					{font-size:12px; font-style:italic;}

ul, li, lh {font-size:14px;}
lh {margin-bottom:2px; display:block;}
.h2outside ul lh a 		{color: #ccc; font-weight: 500; letter-spacing:1px; padding:1px 5px 1px; width:130px; display:block;}
.h2outside ul li a 		{color: #aaa;  padding:1px 5px 1px; width:130px; display:block; overflow:hidden; max-width:130px; max-height:20px;}

.h2outside ul lh a:hover {color: #fff; background:url('images/collection.gif') no-repeat -1px -25px;}
.h2outside ul li a:hover {color: #fff; background:url('images/collection.gif') no-repeat -1px -25px;}

.h2outside ul lh a:active {color: #ccc; background:url('images/collection.gif') no-repeat -1px -1px;}
.h2outside ul li a:active {color: #ccc; background:url('images/collection.gif') no-repeat -1px -1px;}

.h2outside ul { width:130px;}
.h2outside				{width:900px; margin-left:auto; margin-right:auto; vertical-align:top;}
h2 						{font-family: Georgia, "Myriad Pro", Myriad, Verdana, Arial, Helvetica, sans-serif; color: #656D81; 
						font-weight:normal; font-size:60px; letter-spacing:2px; text-align:left; width:390px; display:inline-block; padding:13px 0 0 18px;}
.caption 				{display:inline-block; font-size: 15px; orphans:2; widows:2; font-family: Georgia, Verdana, Arial, Helvetica, sans-serif; 
						line-height:20px; color:#CCCCCC; vertical-align:top; padding: 0 0 0 25px;}
.intro { padding:0px; margin:0px; width:410px; height:103px; padding:5px 0 0 0; color:#999999;}
.intro b { font-size:18px; display:block; padding:6px 0px 10px; color:#CCCCCC; font-weight:normal;}
.intro a { color: #ddd;}
.intro a:hover { color: #fff;}




/*  = 6  COMMENTS & BLOCKQUOTES */

/* comments icon */
a.comments {font-size:13px; font-family: Verdana, Arial, Helvetica, sans-serif; color:#aaa; 
margin:0 0 0 0px; 
padding:2px 0px 11px 0px; 
background:url('images/comment.jpg') no-repeat;
background-position: top center; 
width:34px; height:15px; position:relative; top:-3px; text-align:center; display: inline-block;}

/* comments icon hover (initial) */
h3:hover a.comments {color:white; 
padding:2px 0px 11px 0px;  
background:url('images/comment.jpg') center -30px no-repeat;
width:34px; height:15px; position:relative; top:-3px;}

.edit {font-size:13px;}		
	
blockquote 				{display: inherit;  position:relative; background:url('images/quote.jpg') no-repeat top left; font-style:italic; font-size:18px;
						 padding:9px 15px 30px 36px; font-family: Georgia, Myriad, Verdana, Arial, Helvetica, sans-serif; letter-spacing:1px; color:white;}
			
div.article blockquote 	{left:18px;}
div.vert blockquote 	{margin-left:420px;}
div.horiz div.outside div.contain div.entry blockquote {left:18px; margin-left:0px;}	
div.horizextra div.outside div.contain div.entry blockquote {left:18px; margin-left:0px;}	
div.vert .details blockquote {margin-left:0px;}	

/* comments (with margin on top) */			
blockquote.comment 		{display: inherit;  position:relative; left:-3px; font-style:italic; font-size:18px;
						 font-family: Georgia, Myriad, Verdana, Arial, Helvetica, sans-serif; letter-spacing:1px; color:white;
						 padding:9px 15px 0px 36px; background:url('images/quote.gif') no-repeat top left; margin-top:20px;}
					
/* no margin on first comment */			
h3 + blockquote.comment {margin-top:0px;}
			
hr {background:url('images/divider.png') no-repeat -0px -0px; height:45px; border:none; display: compact;}
blockquote.comment + hr {position:relative; top:-20px;}

cite 					{display:block; font-style:normal; font-size:14px; padding-top:5px; color: #999999;}
cite a 					{font-style:normal; font-size:14px; padding-top:5px; color:#ccc;}

/* end-quote padding */
blockquote > img 		{padding-left:10px;}




/*  = 7  SOCIAL SITES */

a.social		{display:inline-block; color:#e7e7e8; height:30px; margin:0 5px 10px 0; padding:0 5px 0 0; width:210px;
				 font-family: Georgia, Myriad, Verdana, Arial, Helvetica, sans-serif; color:#ccc; font-weight:normal; font-size:16px; letter-spacing:1px;}
a.social:hover 	{background:#5a708c;}
a.social span	{display: inline-block; width:30px; height:30px; margin:0 8px 0 0; vertical-align:middle;}
#facebook 		{background:url('images/collection.jpg') no-repeat -772px 0px;}
#digg	 		{background:url('images/collection.jpg') no-repeat -772px -32px;}
#twitter 		{background:url('images/collection.jpg') no-repeat -804px 0px;}
#delicious	 	{background:url('images/collection.jpg') no-repeat -804px -32px;}
#stumbleupon	{background:url('images/collection.jpg') no-repeat -772px 0px;}




/*  = 8  FORMS */ 

input 			{display:block; width:350px; max-width:350px; background:#53525c; color:white; border:#9e9cb0 1px solid; margin: 0 0 7px 0; padding: 3px 0 3px 90px; 
				 font-family:Verdana, Arial, Helvetica, sans-serif; display:inline; outline:none;}
				 
textarea 		{width:350px; max-width:350px; overflow:auto; background:#53525c; color:white; border:#9e9cb0 1px solid; padding: 3px 0 3px 90px; 
				 font-family:Verdana, Arial, Helvetica, sans-serif; height:41px; resize:none; outline:none;}
				 
input#name		{background: url('images/collection.jpg') no-repeat -430px -71px;}
input#email 	{background: url('images/collection.jpg') no-repeat -430px -93px;}
input#website	{background: url('images/collection.jpg') no-repeat -430px -115px;}
textarea#comment{background: url('images/collection.jpg') no-repeat -430px -137px;}

form 			{max-width:360px; overflow: visible; width:360px;}

.form-hr 		{position:relative; top:-27px;}

a#send 			{z-index:40; display:block; background: url('images/collection.jpg') no-repeat -860px -218px; 
				 width:158px; height:72px; position:relative; top:-69px; left:260px; border:none;}
a#send:hover 	{background: url('images/collection.jpg') no-repeat -702px -218px;}




/*  = 9  PAGINATION  */  

#pagination       {width:500px; margin:50px auto 0 auto; text-align:center; padding-bottom:42px;}
#pagination table {text-align:center;}

	/* links */
	a#next, a#back, a#dis-next, a#dis-back {display:block; width:85px; height:31px; cursor:pointer; color:#e7e7e8; }
	a#back            {background:url('images/collection.jpg') no-repeat -430px 0px;} 
	a#next            {background:url('images/collection.jpg') no-repeat -685px 0px;}
	a#dis-back        {background:url('images/collection.jpg') no-repeat -515px 0px;} 
	a#dis-next        {background:url('images/collection.jpg') no-repeat -600px 0px;}
	a.number          {height:31px; width:36px; cursor:pointer; display:block; vertical-align: top; font-size:24px; color:#e7e7e8;}
	a.current         {font-size:36px; height:31px; width:40px; cursor: default; display:block; vertical-align: top; 
					   position:relative; top:-8px; color:#e7e7e8;}

	/* hover */
	a#next:hover, a#back:hover, a.number:hover, a.current:hover, a#dis-back:hover, a#dis-next:hover { text-decoration:none; color:white; }
	a#back:hover      {background:url('images/collection.jpg') no-repeat -430px -31px;} 
	a#next:hover      {background:url('images/collection.jpg') no-repeat -685px -31px;}
	a#dis-back:hover  {background:url('images/collection.jpg') no-repeat -515px -31px;} 
	a#dis-next:hover  {background:url('images/collection.jpg') no-repeat -600px -31px;}
	a.number:hover    {background:#5a708c;} 

	/* single post pagination */
	div.gallery2 #pagination { width:200px; margin-left:auto; margin-right:auto; padding-bottom:0px; padding-top:40px;} 




/*  = 10  FOOTER */

#copyright-footer 		{background:#0f0f0f url('images/copyright-footer.jpg') no-repeat center top; height:58px;}
#copyright-footer div 	{color:silver; width:850px; padding:11px 0 0 77px; margin:0 auto 0; font-size: 14px;}


#footer-rep 		{background:url('images/footer-rep.jpg') repeat-x center 180px ; min-width:951px;}
	#footer-unique 	{position:relative; width:100%; background:url('images/footer-unique.jpg') no-repeat center bottom; height:226px;}
		#footer		{position:relative; width:500px; margin-left:auto; margin-right:auto; padding-left:450px; top:25px; }
			div#footer p{padding-top:5px; padding-left:1px;}
			
					   a#phone, a#email {position:relative; font-size:14px;}
					   a#phone {width:170px; display: inline-block; padding-right:6px; cursor: default;}
					   a#email {width:256px; display: inline-block; padding-right:0px;}
					   a#phone span#over{ position:absolute; top:-3px; left:-6px; width:170px; height:34px; background:url('images/footer-unique.jpg') -444px -142px ;}
					   a#phone:hover span#over, a#phone:active span#over{ background:url('images/footer-side.jpg') -1px -147px ;}
					   a#email span{ position:absolute; top:-3px; left:-13px; width:256px; height:34px; background:url('images/footer-unique.jpg') -619px -142px ;}
					   a#email:hover span, a#email:active span{ background:url('images/footer-side.jpg') -1px -184px ;}
					   
					   a#phone span#bubble {display:none; width:306px; height:144px; position:absolute; background:url('images/footer-side.jpg') -0px -0px ; top:-147px; left:-1px; cursor: default;}
					   a#phone:hover span#bubble {display:block;}
					   
			div#footer p#note 	{color:#333333; padding-top:35px;}
			div#footer p#note a 	{color:#333333;}
			div#footer p#note a span 	{display:none;}
			div#footer p#note a:hover 	{color:#333333; /*border-bottom: 1px dotted #555;*/ cursor:pointer;}
			div#footer p#note a:hover span 	{display:inline;color:#555;}
				 		  
	#footer-floor 	{background:url('images/footer-floor.jpg') no-repeat center top; height:125px;}

.hidden {
/* = javascript additions to styles*/
display:none; 
background:#0099FF;}

/*  = 11  HOVER EFFECTS (changed to no-hover-effects.css for iPhones) */
div.contain       		{color:#ccc;}
div.contain p a   		{color:#ccc;}
div.contain:hover 		{color:#b5b5b5;}
div.contain:hover h3 a 	{color:#ddd;}
div.contain:hover h4 	{color:#ddd;}
div.contain:hover p a 	{color:white;}
div.contain p a:hover	{color:white; border-bottom:#999 dotted 1px; }
div.contain h3 a:hover 	{color:white;}
div.contain h3:hover a 	{color:white;}

div#footer       		{color:#ccc;}
div#footer p a   		{color:#ccc;}
div#footer:hover 		{color:#b5b5b5;}
div#footer:hover h3 	{color:#ddd;}
div#footer:hover h4 	{color:#ddd;}
div#footer:hover p a 	{color:white;}
div#footer p a:hover	{color:white; border-bottom:#999 dotted 1px; }

/* ADDITIONS FOR THE FIRST RELEASE - REMOVE TO REPLACE FEAURES*/
h3 a {cursor: default;}
h3 a.comments {display:none;}
div.contain h3 a:hover 	{color:#ddd;}
div#footer h3 a:hover 	{color:#ddd;}

div#cornice { background:url('images/cornice.jpg'); padding-top:107px; height:93px;}
div#menu {margin-left:auto; margin-right:auto; width:800px;}
div#menu ul {width:200px; display:inline-block; vertical-align:top; height:80px;}
div#menu ul li {color: #aaa; margin:2px 0 0 0; padding-left:7px;}
div#menu ul li a:first-child {color:#666; font-size:20px; display:block; letter-spacing:1px; padding:10px 0 7px 0px;}
div#menu ul li a {color:#888;}
div#menu ul li a:hover {color:#fff;}
div#menu ul:hover {background:#666666;}


/*  = 12  TESTER 
div {border: blue dotted 1px;}
a {border: red dotted 1px;}
p {border: yellow dotted 1px;}
h1, h2, h3 {border: purple dotted 1px;}
span, img {border: green dotted 1px;}
td, blockquote {border: teal dotted 1px;}
form, input, textarea {border: orange dotted 1px;}*/