/* ----------- Tim Wetherell's Website 2016 --- */


/* ----------- general --- */

body {
color: #FFFFFF ;		
}


/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;} 
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

/* ----------- typography --- */


p {
position: relative ;
text-align: justify ; 
vertical-align: top ;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
word-spacing:1px ;
line-height: 130% ;
max-width: 1000px ;
min-width: 90px ;
font-size: 15px ;
padding-left: 5% ;
padding-right: 5%;
word-wrap: normal ;
color: #000000 ;
}


hr {
    border: 0;
    height: 2px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}


#text{
text-align: justify ; 
position: absolute ;
height: 660px ;
top: 320px ;
left: 300px ;
width: 640px ;
z-index: 9 ;
}


#SeasideText{
text-align: justify ;
color: white ; 
height: 660px ;
top: 3720px ;
left: 300px ;
width: 640px ;
z-index: 29 ;
}

#MMText{
text-align: justify ; 
color: black ;
padding: 3px 3px 0px 3px;
height: 660px ;
top: 120px ;
left: 470px ;
width: 540px ;
z-index: 4 ;
}

#VTText{
text-align: justify ; 
color: #f9f5e1 ;
padding: 3px 3px 0px 3px;
height: 660px ;
top: 100px ;
left: 540px ;
width: 500px ;
z-index: 4 ;
}


.text2 {
position: relative ;
text-align: left ;
left: -35px ;
font-size: 13px;
top: -7px;
color: #8e8e8e;
padding-left: 35px ;
padding-right: 5%;
z-index: 5 ;
}

.text3 {
position: relative ;
text-align: left ;
left: 60px ;
font-size: 13px;
top: -8px;
color: #8e8e8e;
z-index: 5 ;
}


.italic {
font-style:italic ;
font-family: "Times New Roman", Didot, "Chaparral Pro", "Bell MT", "Lucida Bright" ;
font-size: 15px ;
} 



h1 {
position: relative;
text-align: center;
margin: 0 auto;
	font-family: helvetica, verdana, "lucida sans", arial, sathu ;
	font-size: 28px ;
	color: #192436 ;
}


h2 {
position: relative;
text-align: justify ; 
vertical-align: top ;
	font-family: helvetica, verdana, "lucida sans", arial, sathu ;
	font-size: 17px ;
	color: #192436 ;
padding-left: 5% ;
padding-right: 5%;
}

h3 {
	font-family: helvetica, verdana, "lucida sans", arial, sathu ;
	font-size: 15px ;
	color: #192436 ;
}




li {
position: relative ;
text-align: left ; 
vertical-align: top ;
color: black;
left: 13px ;
font-weight: bold;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
font-size: 15px ;
width: 580px ;
height:17px ;
}


.smallfont li {
position: relative ;
list-style-type: disc !important;
color: black;
text-align: left ; 
vertical-align: top ;
margin: 8px 0;
list-style-type: none ;
font-weight: normal;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
font-size: 15px ;
width: 580px ;
height:17px ;
}

.smallfont2 li {
position: relative ;
display: inline !important;
list-style-type: disc !important;
color: black;
vertical-align: top ;
margin: 0 auto;
list-style-type: none ;
font-weight: normal;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
font-size: 15px ;
width: 580px ;
height:17px ;
}

ul.disc {list-style-type: disc;}


#homebutton{
}

/* ----------- images --- */

img {
position: relative ;
width: 95%;
border: none ;
max-width: 650px;
height: auto;
border: 1px solid #000;
box-shadow: 5px 5px 15px #000;
}

.banner_size {
border: none !important;
box-shadow: none !important;
width: 100%;
max-width: 669px;
height: auto;
}

img.floatLeft { 
position: relative;
    float: left; 
    margin: 15px; 
width: 218px;
height: auto;
left: -43%;
top: -300px;
}

img.tarot {
position: relative;
float: left;
margin: 15px; 
width: auto;
height: 160px;
}

img.small {
position: relative ;
width: auto; 
height: 700px;
left: 16% ;
}



#tim{
position: relative;
display: inline;
padding: 3px 3px 0px 3px;
margin: 15px; 
width: 218px;
height: auto;
left: 42%;
top: 305px;
z-index: 25 ;
}



#MMT{
padding: 3px 3px 0px 3px;
position: absolute ;
top: 250px ;
left: 350px ;
z-index: 25 ;
}

#VTT{
padding: 3px 3px 0px 3px;
position: absolute ;
color: black ;
top: 250px ;
left: 300px ;
z-index: 25 ;
}



#banner{
position: relative ;
top: -10px ;
width: 100% ;
left: 0px;
margin: 0 auto ;
z-index: 1 ;
}

#MMTarot{
position: absolute ;
top: 1900px ;
left: 400px ;
z-index: 25 ;
}

#MMTSample{
position: absolute ;
color: black ;
top: 1260px ;
left: 290px ;
z-index: 25 ;
}



#container{
position: relative ;
width: 100% ;
max-width: 700px ;
min-left: 0px;
top: -8px ;
height:24820px ;
background-color: #d3c9b3;
margin: 0 auto ;
padding-left: 3%;
z-index: 1 ;
} 






#MMContainer{
width: 452px ;
height:2150px ;
position: absolute ;
top: 196px ;
left: 285px ;
background: #a18a75 ;
padding: 100px ;
z-index: 1 ;
}

#VTContainer{
width: 348px ;
height:1640px ;
position: absolute ;
top: 205px ;
left: 285px ;
background: #d8c6a0 ;
padding: 100px ;
z-index: 1 ;
}


.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:80;
	width:90%;
	height:100%;
padding-left:5%;

}


.side-by-side li {
  display: inline;
}

.side-by-side2 li {
  display: inline;
font-weight: normal;
font-size: 12px;
top: -7px;
left: -36px;
}


#LinksContainer{
position: relative;
left: -25px;
top: -50px;
width: 100% ;
min-width: 20px;
text-align: center ; 
background: none ;
z-index: 12 ;
}


/* ----------- links --- */

a.pagelink:link { color: #000; text-decoration: none; }
a.pagelink:visited { color: #000; text-decoration: none; }
a.pagelink:active { color: #000; text-decoration: none; }
a.pagelink:hover { color: #c32b2b; text-decoration: none; }



a:link{ 
color: #1c2c4f;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
}

a:visited{ 
color: #1c2c4f;
font-family: helvetica, verdana, "lucida sans", arial, sathu ;
font-family: sans-serif;
}


a:hover{ 
color: #c32b2b ;
background-color: none ;
text-decoration: none;
}


a:active{ 
color: none ;
}

a:hover img {
border: 1px solid #000;
box-shadow: 5px 5px 15px #000;
}


a {text-decoration:none}
a {color: none}