html
{
	background-color: #111111;
	margin: 0px;
	width: 100%;
	height: 100%;
}

body
{
	margin: 0px;
	width: 100%;
	height: 100%;
}

#page {
	display: block;
	width: 100%;
	background: url("../images/bg.jpg") no-repeat bottom center #f5f6fb;
}

	#page.home
	{
		height: 800px;
	}

#header {
	width: 1050px;
	margin: 0 auto;
	padding-top: 100px;
	padding-bottom: 20px;
	text-align: center;
	border-bottom: 1px solid #dfdfdf;
}

#navigation
{
	margin-top: 20px;
}

	#navigation .marginright {
		margin-right: 20px;		
	}
	

#canvas {
	width: 1050px;
	margin: 0 auto;
	padding-top: 30px;
}

	#canvas #wrap {
		width: 500px;
		text-align: center;
	}
	
	#canvas #sidebar {
		width: 310px;
		text-align: left;
		float: left;
		display: inline;
	}
	
	#canvas #sidebarmobile {
		width: 310px;
		text-align: left;
		float: left;
		display: none;
	}
	
	#canvas #content {
		display: inline-table;
		width: 690px;
		margin-left: 50px;
		margin-bottom: 550px;
		text-align: left;
	}
	
	#canvas #fullwidth {
		display: inline-table;
		width: 100%;
		margin-bottom: 550px;
		text-align: left;
	}

	
#footer {
	width: 100%;
	margin-top: 30px;
	margin-bottom: 40px;
	text-align: center;
}

#photo {
	display: inline;
	width: 200px;
	height: 200px;
}

	#photo img {
		max-width: 180px;
		max-height: 180px;
		height: 150px;
		width: 150px;
	}
	
#reveal {
	background: url(../images/reveal.jpg) no-repeat;
}

	#reveal img {
		opacity: 0;
		-moz-transition: all 0.8s ease;
	    -o-transition: all 0.8s ease;
	    -webkit-transition: all 0.8s ease;
	    transition: all  0.8s ease;
	}
	
#revealShown {
	background: url(../images/reveal.jpg) no-repeat;
}

	#revealShown img {
		opacity: 100;
		-moz-transition: all 0.8s ease;
	    -o-transition: all 0.8s ease;
	    -webkit-transition: all 0.8s ease;
	    transition: all  0.8s ease;
	}


/*-- FONTS --*/

h1
{
	font-family: "Trajan Pro", Garamond, sans-serif;
	font-weight: normal;
	color: #aa0c5a;
	margin-top: 8px;
	margin-bottom: 35px;
}

h2
{
	font-family: "Trajan Pro", Garamond, sans-serif;
	font-weight: normal;
	font-size: 20px;
	color: #aa0c5a;
	margin-bottom: 20px;
}

.homecopy
{
	font-family: "Trajan Pro", Garamond, sans-serif;
	font-size: 14px;
	line-height: 32px;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #000000;
}

.bodycopy
{
	font-family: Garamond, sans-serif;
	font-size: 20px;
	line-height: 32px;
	color: #000000;
}

.sidebarcopy
{
	font-family: Garamond, sans-serif;
	font-size: 20px;
	font-style: italic;
	line-height: 32px;
	color: #000000;
}

.footercopy
{
	font-family: "Trajan Pro", Garamond, sans-serif;
	font-size: 10px;
	line-height: 32px;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: #ffffff;
}

#footer a {
	color: #ffffff;
	text-decoration: none;
}

#footer a:hover {
	color: #919191;
	text-decoration: none;
}


.highlight
{
	color: #aa0c5a;
}

#squiggle
{
	display: none;
}

#tag
{
	display: inline;
}

#tagmobile
{
	display: none;
}

#linebreak
{
	display: none;
}

#ultable
{
	display: inline-table;
}

#ulnotable {
	display: none;
}



@media only screen and (max-width:600px){
    /* styles for browsers larger than 960px; */
}

@media only screen and (min-width:960px){
    /* styles for browsers larger than 960px; */
}
@media only screen and (min-width:1440px){
    /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width:2000px){
    /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
   /* styles for mobile browsers smaller than 480px; (iPhone) */
}

@media only screen and (max-device-width: 600px) {
   /* default iPad screens */
   
	h2 {
		font-size: 30px;
		line-height: 35px;
	}
   
	#canvas, #canvas #wrap, #canvas #content, #header, #canvas #sidebar, #logo {
		width: 100%;
		margin: 0px;
	}
	
	#canvas #sidebarmobile {
		display: inline;
		float: inherit;
		padding-bottom: 120px;
	}
	
	#canvas #sidebar {
		display: none;
	}
	
	#page{
		background-image: none;
	}
	
	#page.home
	{
		height: auto;
		background: url("../images/bg-mobile.jpg") no-repeat bottom center #f5f6fb;
	}

	#header img {
		min-height: 40px;
		margin-bottom: 10px;
	}
	
	#logo {
		width: 90%;
	}
	
	#footer {
		margin-top: 40px;
		padding-bottom: 40px;
	}
	
	#canvas #fullwidth {
		display: inline-table;
		width: 95%;
		margin-bottom: 550px;
		text-align: left;
		margin-left: 60px;
	}
	
	.hideMobile {
		display: none;
	}

	#paddingwrap
	{
		padding: 0px 80px;
	}
	
	#linebreak
	{
		display: inline;
	}
	
	#ultable
	{
		display: none;
	}
	
	#ulnotable {
		display: block;
	}

	#squiggle
	{
		display: inline;
	}
	
	#tag {
		display: none;
	}
   
	#tagmobile {
		display: inline;
	}
	
	#tagwrap
	{
		padding: 0px 20px;
	}
	
	#navigation .marginright
	{
		margin-right: 0px;
	}


}

	
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}