/* 	Dark blue = #535D77
	Medium blue = #778FAD
	Grey = #A1A8B2
	Light grey = #E2E4E6
	Bright blue = #0080FF */

/* RESETS */

	html, body, p, div, ul, ol, li, img, h1, h2, h3, h4, h5, h6, blockquote, table, form
		{ margin: 0; padding: 0; }
	
	body, p, div, ul, ol, li, img, h1, h2, h3, h4, h5, h6, blockquote, table, a, span
		{ background-repeat: no-repeat; }
	
	hr { display: none; }
	
	body { -webkit-text-size-adjust: none; } /* Stop iPhone from adjusting text size */

	a:link, a:visited { color: #535D77; text-shadow: #FFF 0 1px 0; font-weight: bold; -webkit-transition: color .1s linear; -moz-transition: color .1s linear} 
	a:hover, a:active { color: #0080ff; text-decoration: none; } 
	

/* REUSABLES */

  .nav, .nav ul { list-style-type: none; list-style-position: outside; margin-left: 0; padding-left: 0; text-indent: 0; }
  
  .clear, .separator { clear: both; }
  
  .pad { margin-top: 15px; padding-top: 15px; padding-bottom: 15px; margin-bottom: 15px; }
  .sectionbreak { margin-top: 35px; border-top: 1px dotted #DDD; padding-top: 35px; }
  
	.inactive { display: none; }
	
	.warning { background-color: red; color: white; }
	.notice { color: red; }


/* STRUCTURE AND PRESENTATION */

html { background-color: #535D77; background-image: url(images/html.jpg); background-repeat: repeat-x; background-attachment: fixed; }

body { font-family: Helvetica, Arial, sans-serif; width: 960px; margin: 0 auto; }



/* BASIC TYPOGRAPHY */

p, h1, h2, h3, h4, h5, h6, blockquote { line-height: 1.4; }

li { line-height: 1.3; }

h3 { font-size: 20px; padding-bottom: 6px; margin-bottom: 6px; }

p { font-size: 18px; padding-bottom: 6px; margin-bottom: 6px; }

li { padding-bottom: 4px; margin-bottom: 4px; }



/* HEADER AND MASTHEAD */

#header { margin-top: 50px; padding-top: 10px; color: #FFF; }

	.notice.iphone { text-align: center; margin-bottom: 40px; }
		.notice.iphone a {
			display: block; min-height: 300px; margin: 0 auto; padding: 20px 20px 20px 200px; 
			font-size: 48px; color: #222; text-shadow: none; text-decoration: none; font-weight: normal; text-align: left; 
			background-image: url(http://christophermiles.com.au/images/presentation/notice-iphone-preview.png); -webkit-background-size: auto 300px; background-position: 20px 15px; 
			background-color: #FFF; border: 2px solid #999; -webkit-border-radius: 20px;
			}
			.notice.iphone a span { font-size: 36px; color: #777; }
	
	#masthead {
		background-color: #535D77;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #778FAD), color-stop(0.50, #535D77), color-stop(1, #535D77)); 
		border: 2px solid #EEE; border-bottom: none;
		-webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px;
		-moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px;
		-webkit-box-shadow: 0 0 10px #666;
		}
	
		h1 a { width: 500px; height: 150px; float: left; background-image: url(images/h1.png); background-position: center; background-repeat: no-repeat; }
			h1 span { position: relative; left: -9999px; width: 500px; margin-right: -500px; float: left; }
	
		p#strapline {
			width: 260px; height: 150px;
			margin-left: 635px;
			background-image: url(images/h1-strapline.png);
			background-position: center;
			background-repeat: no-repeat;
			margin-bottom: 0;
			}
			p#strapline span { position: absolute; left: -9999px; }


/* CONTENT AND ARTICLES */	

	#content .article a { text-decoration: none; }
	
	/* Portfolio */
	
	#portfolio {
		background-color: #FFF;
		-webkit-border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px;
		-moz-border-radius-bottomleft: 15px; -moz-border-radius-bottomright: 15px;
		-webkit-box-shadow: 0 5px 10px #555;
		}
	
		#portfolio h2 { position: absolute; left: -9999px; }
	
		#portfolio .wrapper {
			width: 600px; display: table-cell; vertical-align: top;
			background-color: #FFF; 
			border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;  
			}
			
			#portfolio .website {
				width: 520px; padding: 0 20px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
				-webkit-perspective: 800; -webkit-perspective-origin: 50% 100px;
				-webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
				}
			
			#portfolio .website.unselected { display: none; }
			
				#portfolio .website h3,
				#portfolio .website img,
				#portfolio .website p,
				#portfolio .website h6 { position: relative; top: 30px; }
		
				#portfolio .website h3 { padding-bottom: 9px; margin-bottom: 9px; }
	
				#portfolio .website h3,
				#portfolio .website p { margin-left: 290px; }
	
				#portfolio .website img {
					width: 270px; height: 196px; float: left; 
					border: 1px solid #BBB; -webkit-box-shadow: 0 0 5px #999;
					-webkit-transform-style: preserve-3d;
					-webkit-animation: spin 1s 1 linear;
					}

			    @-webkit-keyframes spin {
			      from { -webkit-transform: rotateY(90deg); }
			      to   { -webkit-transform: rotateY(0); }
			    }

				
				#portfolio .website h6 { clear: both; text-align: center; padding-top: 40px; font-size: 13px; }
		
		#portfolio .nav {
			width: 360px; display: table-cell; vertical-align: top;
			background-color: #E2E4E6;
			border: 2px solid #E2E4E6; border-left: 1px solid #BBB;
			-webkit-border-bottom-right-radius: 15px;  
			-moz-border-radius-bottomright: 15px;  */
			}
	
			#portfolio .nav li { padding: 0; margin: 0; border-bottom: 1px solid #CCC; }
			#portfolio .nav li:last-child { border-bottom: 0; }
	
				#portfolio .nav a {
					display: block; padding: 12px;
					background-color: #E2E4E6;
					-webkit-transition: background-color .15s linear; -moz-transition: background-color .15s linear; 
					text-decoration: none; font-size: 13px; font-weight: bold; color: #535D77; text-shadow: #FFF 0 1px 0;
					}
					
					#portfolio .nav a:hover { /*background-color: #A1A8B2;*/ color: #0080ff; text-shadow: #FFF 0 1px 0; }
					
					#portfolio .nav li.current a { background-color: #778FAD; color: #FFF; text-shadow: none; }
					
					/*#portfolio .nav li:first-child a { border-top-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px; }*/
					#portfolio .nav li:last-child a { border-bottom-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-radius-bottomright: 15px; }
					
	/* More information */
	
	#moreinformation { margin-top: 80px; background-color: #E2E4E6; color: #222; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;  -webkit-box-shadow: 0 0 10px #444; }
		#moreinformation h3, #moreinformation h4 { text-shadow: #FFF 0 1px 0; }
	
		#contact {
			display: table-cell; width: 390px; padding: 20px; vertical-align: middle;
			border-right: 1px solid #BBB;
			border-top-left-radius: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topleft: 15px;
			}
			#contact p { font-size: 20px; }
				#contact p.vcard { margin-top: 20px; text-align: center; }
					#contact .vcard .email {
						padding: 10px; background-color: #535D77; -webkit-transition: background-color .1s linear; -moz-transition: background-color .1s linear; 
						font-weight: bold; text-shadow: #000 0 -1px 0; color: #FFF; 
						border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;
						}
					#contact .vcard .email:hover { background-color: #0080FF; text-shadow: #666 0 -1px 0; }
		
		#about {
			display: table-cell; width: 510px; padding: 20px 20px 40px 20px; 
			border-top-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topright: 15px;
			}
			
			#about p { font-size: 18px; }
			

/* FOOTER */

#footer { padding-top: 80px; padding-bottom: 40px; color: #FFF; text-align: right; font-size: 11px; font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif; text-shadow: #222 0 -1px 0; padding-right: 20px; }
		#footer small { font-size: 11px; }