body,
html {
margin:0;
padding:0;
color:#000;
background:#fff;
}

a {
outline: none;
}


div.button{
	display:block;
	width: 200px;
}

form#purchase{
	margin-left: 200px;
}

p.occupy{
line-height: 50px;
color: #fff;
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:17px;
font-style:italic;
font-weight: bold;
text-transform: uppercase;
}

p.occupyleft{
line-height: 50px;
color: #fff;
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:18px;
font-style:italic;
font-weight: lighter;
text-transform: uppercase;
text-align: left;
margin-left: 100px;
}



#occupy a:link { text-decoration: none; color: #fff; }
#occupy a:visited { text-decoration: none; color: #fff;}
#occupy a:active { text-decoration: underline; color: #fff; }
#occupy a:hover { text-decoration: underline; color: #fff; }

p.buttons{
	height: 10px;
}

p.footer{
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:13px;
line-height: 40px;
letter-spacing: 0px;
color:#000;
text-transform: none;
text-align:center;
}

span.center{
	text-align: center;
}

#footer a:link { text-decoration: none; color: #000; }
#footer a:visited { text-decoration: none; color: #000;}
#footer a:active { text-decoration: none; color: #999; }
#footer a:hover { text-decoration: none; color: #999; }

a img{
border:none;
}

#images {
width: 400px; 
height: 620px;  
}
#navigation {
margin-bottom: 6px;
word-spacing: 3px;
font-weight: bold;
}
#navigation a {
text-decoration: none;
cursor: pointer;
}
#navigation .image-prev {
padding-right: 5px;
}
#navigation .image-next {
padding-left: 5px;
}
#navigation .count {
padding: 0 5px;
}
#caption { margin-top: 10px; }


#inner_wrap{
width: 960px;
margin:0 auto;
background:#fff;
}
#header {
min-width:960px;
height: 149px;
padding:0px;
background:#000;
text-align: center;
border-bottom: 1px solid #333;
}
#occupy {
min-width:960px;
height: 50px;
padding:0px;
background:#C1282D;
text-align: center;
}

/*

created a large top margin and tucked the content under top header when scrolling
*/
#left {
float:left;
width:400px;
min-width:400px;
margin:40px;
background:#fff;
border:0;
padding:0;
margin-top: 250px;
position: relative;
z-index: 5;

}

p.title {
padding-top: 38px;
font-family: 'electra', 'Times New Roman', Times, serif;
font-size:28px;
line-height: 40px;
color:#fff;
text-transform:uppercase;
text-align:center;
background-color:#000;
letter-spacing: 0px;
}

p.subtitle {
padding-top: 10px;
font-family: 'ElectraLHRegularSC', 'Times New Roman', Times, serif;
font-size:19px;
line-height: 20px;
color:#fff;
text-transform: 
text-align:center;
background-color:#000;
letter-spacing: 0px;

}
/*

lightbox 
*/



.electraSC {
font-family: 'ElectraLHRegularSC', 'Times New Roman', Times, serif;
font-size:16px;
line-height: 20px;
}

.nav-controls {
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:12px;
line-height: normal;
color:#000;
text-transform: none;
text-align:center;
background-color:#fff;
padding-bottom: 10px;
}

#left_donate {
float:left;
dsiplay: inline;
margin-top: 40px;
margin-bottom: 40px;
width:480px;
min-width:480px;
background:#fff;
border:0;
border-right: 1px solid #000;
padding:0;
}

#right_donate {
float:right;
dsiplay: inline;
width:400px;
margin-top: 40px;
margin-bottom: 40px;
min-width:400px;
background:#fff;
border:0;
padding:0;
}

form.donate {
width:400px;
text-align:center;}

#right {
float:right;
width:400px;
min-width:400px;
margin:40px;
background:#fff;
border:0;
padding:0;
position: relative;
z-index: 5;
margin-top: 250px;
}

.right_break{
border-bottom: 1px solid #ccc;
}

ul{
list-style-type: none; 
padding: none;
margin: none;
}

li{
font-family: 'electra', 'Times New Roman', Times, serif;
font-size:25px;
line-height: 32px;
color:#C1272D;
text-transform: none;
line-height: 30px;
padding: none;
margin: none;
}

.quoteEm {
font-family: 'electraitalic', 'Times New Roman', Times, serif;
font-size:25px;
line-height: 32px;
color:#C1272D;
text-transform: none;
line-height: 30px;
padding: none;
margin: none;
}

.quoteSC {
font-family: 'ElectraLHRegularSC', 'Times New Roman', Times, serif;
font-size:25px;
line-height: 32px;
color:#C1272D;
text-transform: none;
line-height: 30px;
padding: none;
margin: none;
}
/*

fixes the red and black bar at top of browser and above content 
*/
div#wrap-header {
position: fixed;
width: 100%;
z-index: 10;}


/* button menu */



 
 #purchase {
	position:relative;
	height:57px;
	width:84px;
	background-color: white;
	margin:0 auto;	
	border: 0;
	padding-bottom: 35px;
}
#purchase img {
	position:absolute;
	top:0;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;
}

#purchase img.top:hover {
	opacity:0;
}

#purchase { background-image: url('/images/purchdark.jpg');
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;}

#purchase:hover { background-image: url('/images/purchlight.jpg');}



 
 
 

  
 #donate {
	position:relative;
	height:35px;
	padding-bottom: 35px;
	background-color: white;
	width:84px;
	margin:0 auto;	
	border: 0;
}
#donate img {
	position:absolute;
	top:0;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;
}

#donate [class="top"]:hover
 {
	opacity:0;
}

  #donate { background-image: url('/images/donatedark.jpg');
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;}

#donate:hover { background-image: url('/images/donatelight.jpg');}


  
  
  
 
 #preview {
	position:relative;
	height:86px;
	width:63px;
	margin:0 auto;	
}
#preview img {
	position:absolute;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;
}

#preview img.top:hover {
	opacity:0;
}


 #ebook {
	position:relative;
	height:101px;
	width:57px;
	margin:0 auto;	
}
#ebook img {
	position:absolute;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;
}

#ebook img.top:hover {
	opacity:0;
}
      
    
        
 #ebookdownload {
	position:relative;
	height:68px;
	width:42px;
	margin:0 auto;	
}
#ebookdownload img {
	position:absolute;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;
}

#ebookdownload img.top:hover {
	opacity:0;
}
        

.st_sharethis_custom{
background: url('http://thevolcanothetornadoandthehourglass.com/new/images/sharedark.jpg') no-repeat scroll left top transparent;
padding:0 79px 16px 0;
margin-top: 10px;
cursor: pointer;
cursor: hand;
}

.st_sharethis_custom:hover{
background: url('http://thevolcanothetornadoandthehourglass.com/new/images/sharelight.jpg') no-repeat scroll left top transparent;
padding:0 79px 16px 0;
margin-top: 10px;
cursor: pointer;
cursor: hand;
}



 #share {
	position:relative;
	height:14px;
	width:86px;
	margin:0 auto;	
}
#share img {
	position:absolute;
	left:0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;	
	transition: opacity .5s ease-in-out;
}

#share img.top:hover {
	opacity:0;
}



#right p{
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:16px;
color:#000;
text-transform: none;
line-height: 25px;
padding-top: 10px;
padding-bottom: 10px;
}
p.donate{
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:16px;
color:#000;
text-transform: none;
line-height: 25px;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}

p.donateleft{
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:16px;
color:#000;
text-transform: none;
line-height: 25px;
padding-top: 0px;
padding-bottom: 20px;
text-align: left;
padding-left:185px;
}


p.donateleft2{
font-family: 'frutiger', Helvetica, Arial, sans-serif;
font-size:16px;
color:#000;
text-transform: none;
line-height: 25px;
padding-top: 37px;
padding-bottom: 20px;
text-align: left;
padding-left:116px;
width: 400px;
}



#right a:link { text-decoration: none; color: #999; }
#right a:visited { text-decoration: none; color: #999;}
#right a:active { text-decoration: none; color: #000; }
#right a:hover { text-decoration: none; color: #000; }


#back:link { text-decoration: none; color: #999; }
#back:visited { text-decoration: none; color: #999;}
#back:active { text-decoration: none; color: #000; }
#back:hover { text-decoration: none; color: #000; }

* {
margin:0;padding:0;
} 

html, body {
height: 100%;
}

#container {
min-height: 100%;
min-width: 960px;
}

#main {
overflow:auto;
padding-bottom: 40px;
}  

#footer {
min-width:960px;
position: relative;
margin-top: -40px; 
height: 40px;
clear:both;
background:#e6e6e6;
} 


body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}

/* ----------------- @fonts ----------------- */

@font-face {
font-family: 'electra';
src: url('../fonts/electra_lh_regular-webfont.eot');
src: url('../fonts/electra_lh_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/electra_lh_regular-webfont.woff') format('woff'),
url('../fonts/electra_lh_regular-webfont.ttf') format('truetype'),
url('../fonts/electra_lh_regular-webfont.svg#ElectraLHRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'electraitalic';
src: url('../fonts/electra_lh_cursive-webfont.eot');
src: url('../fonts/electra_lh_cursive-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/electra_lh_cursive-webfont.woff') format('woff'),
url('../fonts/electra_lh_cursive-webfont.ttf') format('truetype'),
url('../fonts/electra_lh_cursive-webfont.svg#ElectraLHCursive') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'ElectraLHBoldSC';
src: url('electra_lh_bold_small_caps__oldstyle_figures-webfont.eot');
src: url('electra_lh_bold_small_caps__oldstyle_figures-webfont.eot?#iefix') format('embedded-opentype'),
url('electra_lh_bold_small_caps__oldstyle_figures-webfont.woff') format('woff'),
url('electra_lh_bold_small_caps__oldstyle_figures-webfont.ttf') format('truetype'),
url('electra_lh_bold_small_caps__oldstyle_figures-webfont.svg#ElectraLHBoldSC') format('svg');
font-weight: normal;
font-style: normal;
}


@font-face {
font-family: 'ElectraLHRegularSC';
src: url('../fonts/electra_lh_regular_small_caps__oldstyle_figures-webfont.eot');
src: url('../fonts/electra_lh_regular_small_caps__oldstyle_figures-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/electra_lh_regular_small_caps__oldstyle_figures-webfont.woff') format('woff'),
url('../fonts/electra_lh_regular_small_caps__oldstyle_figures-webfont.ttf') format('truetype'),
url('../fonts/electra_lh_regular_small_caps__oldstyle_figures-webfont.svg#ElectraLHRegularSC') format('svg');
font-weight: normal;
font-style: normal;
}


/*

@font-face {
    font-family: 'ElectraLHRegularSC';
    src: url('electralhregularscof-webfont.eot');
    src: url('electralhregularscof-webfont.eot?#iefix') format('embedded-opentype'),
         url('electralhregularscof-webfont.woff') format('woff'),
         url('electralhregularscof-webfont.ttf') format('truetype'),
         url('electralhregularscof-webfont.svg#ElectraLHRegularSC') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/


@font-face {
font-family: 'frutiger';
src: url('../fonts/frutiger_45_light-webfont.eot');
src: url('../fonts/frutiger_45_light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/frutiger_45_light-webfont.woff') format('woff'),
url('../fonts/frutiger_45_light-webfont.ttf') format('truetype'),
url('../fonts/frutiger_45_light-webfont.svg#FrutigerLight') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'frutigeritalic';
src: url('../fonts/frutiger_46_light_italic-webfont.eot');
src: url('../fonts/frutiger_46_light_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/frutiger_46_light_italic-webfont.woff') format('woff'),
url('../fonts/frutiger_46_light_italic-webfont.ttf') format('truetype'),
url('../fonts/frutiger_46_light_italic-webfont.svg#FrutigerLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'frutigerbolditalic';
src: url('../fonts/frutiger_66_bold_italic-webfont.eot');
src: url('../fonts/frutiger_66_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/frutiger_66_bold_italic-webfont.woff') format('woff'),
url('../fonts/frutiger_66_bold_italic-webfont.ttf') format('truetype'),
url('../fonts/frutiger_66_bold_italic-webfont.svg#FrutigerBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}

<!--[if !IE 7]>
<style type="text/css">
#container {
display:table;height:100%
}
</style>
<![endif]-->