/* joshuafrankel.net */
/* CSS */


/******************************************************************************************************/
/* Basics */
/******************************************************************************************************/


/* make links not default to being underlined and blue because it's no longer 1992 */
a {
    color: #999999;
    text-decoration: none;  
}

/* fluid margins for the whole site */ 
body {

    margin-left: 10%;
    margin-right: 15%;
    margin-top:0; 
/*  background-color: aqua; */
}

/* position the image of my name at the top of the page */
.myName {
    position: relative;
    left: 13px;
    top: 22px; 
    width: 270px;
    height: 52px; 
    padding: 0;
    margin: 0;
}


/******************************************************************************************************/
/* Links on the left side of the layout*/
/******************************************************************************************************/


/* format the main links along the left side */ 
.mainLinks { 
  /*  float: left;*/
    width: 235px; 
    height: 500px;
    position: relative;
    left: -95px;
    top: 60px;
    font-family: "Arial", sans-serif; 
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -0.02em;
    line-height: 20px;
    text-align: right;
    padding: 0;
    margin: 0;
    
    /*background-color: red; */
}

.movingImagesHilite{
    color: #333333;
}

.headingInit {
}
.headingHilite{
    color: #333333;
    position: relative;
    top: 20px; 
}
.headingYoungerOpen {
    position: relative;
    top: 10px;
}
.headingOlderOpen {
    position: relative;
    top: 30px;
}

.titleInit {
  font-style: italic;
  font-weight: bold;
  /*font-size: 90%;*/
  color: #3399CC;
  position: relative;
  top: 20px;
}
.titleHilite {
  font-style: italic;
  font-weight: bold;
  /*font-size: 90%;*/
  color: #CC0000;
  position: relative;
  top: 20px;
}

.stillImageLinks{
    position: relative;
    top: -10px;
}
.stillImagesMove{
    position: relative;
    top: 50px;
}
.stillImagesHilite{
    color: #333333;
    position: relative;
    top: 10px;
}


/* bio, cv, mailing list, email me */
.bottomLinksInit {
    position: relative;
    top: 100px;
}

/* this version keeps the a set distance from the links above, they move up and down a lot */
.bottomLinksMove {
    position: relative;
    top: 100px;
}

/* this version keeps the bottom links frozen in place at the bottom of the screen */
/*
.bottomLinksMove {
    float: bottom;
    width: 150px;
    position: absolute;
    top: 330px;
    left: 85px;
}
*/
.bioLinkInit{
}
.bioLinkHilite{
    color: #333333;
}

.mailingListInit{
    position: relative;
    top: 15px;
}
.mailingListHilite{
    color: #333333;
    position: relative;
    top: 15px;
}

.emailMeLinkInit{
    position: relative;
    top: 30px;
}
.emailMeLinkHilite{
    color: #333333;  
    position: relative;
    top: 30px;
}


/******************************************************************************************************/
/* Content on the right side of the layout */
/******************************************************************************************************/

/* general content placement */ 
.content {
    color: #666666; 
    font-family: "Arial", sans-serif; 
    text-align: left;
    height: 900px;
    width: 420px;    
    position: relative;  
    left: 170px;
    top: -440px;  
    padding: 0;
    margin: 0;

    /*background-color: green; */
}

/* centers the qt movie by setting the left position absolutely */
.qtMovie {
    position: relative;
    left: 32px;
}

.qtMovie288 {
    position: relative;
    left: 68px;
}

.stillImage{
    margin-bottom: 20px;
}

.vimeo{
    margin-bottom: 22px;
}

.projectInfoBasic {
    font-family: "Arial", sans-serif;
    font-style: italic; 
    font-size: 12px;      
    text-align: center;
    position: relative;
    left: 0;
    top: 15px; 
    padding: 0;
    margin: 0;
}
.projectInfoAlt {
    font-family: "Arial", sans-serif;
    font-style: normal; 
    font-size: 12px;      
    text-align: center;
    padding: 0;
    margin: 0;
}
.projectDescription {
    position: relative;
    left: 32px;
    top: 35px; 
    padding: 0;
    margin: 0;
    width: 360px;
}
.projectCredit {
    font-size: 12px;      
    font-weight: normal;
    font-style: italic;  
    color: #3399CC;   
    padding: 0;
    margin: 0;
}
.projectCreditNull {
    font-size: 12px;      
    font-weight: normal;
    font-style: italic;  
    /*color: #3399CC;  */ 
    padding: 0;
    margin: 0;
}
.photoCredit {
    font-size: 11px;      
    font-weight: normal;
    font-style: italic;     
    text-align: right;
    position: relative;
    left: 0px;
    top: -18px;  
    padding: 0;
    margin: 0;
}

.photoCreditNull {
    text-align: left;
    top: -18px; 
    height: 14px;   
    position: relative;  
    padding: 0;
    margin: 0;
}



.plainText {
    font-size: 12px;      
    font-weight: normal;    
    text-align: left;
    position: relative;
    left: 0px;
    top: 2px;  
    padding: 0;
    margin: 0;
}

.unsubscribe {
    font-size: 12px;      
    font-weight: normal;    
    position: relative;
    left: 0px;
    top: 0px;  

}

.inLineLink {
    font-weight: bold;
    color: #3399CC;
}

.inLineLinkInactive {
    font-weight: bold;
}

.prevNextQT {
    position: relative;
    right: 0;
    top: 20px; 
    padding: 0;
    margin: 0;
}

.prevLink {
    width: 191px;
    font-size: 12px;
    font-weight: bold;
    color: #3399CC;
    text-align: right;
    margin: 0;
    padding: 0;

    position: relative;
    right: 0;
    top: -12px; 
    /*background-color: blue;*/
}

.nextLink {
    width: 191px;
    font-size: 12px;
    font-weight: bold;
    color: #3399CC;
    text-align: left;
    margin: 0;
    padding: 0;

    position: relative;
    left: 54%;
    top: -27px; 

   /*background-color: green;*/
}

.emailAddress {
    color: #999999;
    font-family: "Arial", sans-serif;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    top: 11px;
    left: 245px; 
    text-align: left;
    width: 300px;
    /* I think the paddin might make the text slightly easier to select in firefox */
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
    /* background-color: blue; */
}


.otherJoshs {
    color: #999999;
    font-size: 13px;
    font-weight: normal;
    position: relative;   
    left: 0px;
    top: 55px; 
    padding: 0;
    margin: 0;

}

.comingSoon {
    color: #999999;
    font-size: 15px;
    font-weight: bold;
/*    position: relative;   
    left: 0px;
    top: 222px; */
    padding: 0;
    margin: 0;
    
/*    background-color: blue; */
}

.submitButton {
    position: relative;
    top: 5px;
}

.youtube {
}

.googleMap {
/*  position: relative; 
    top: 55px; 
    padding: 50;
    margin: 50;
	width: 350px 
	height: 350px 
	background-color: blue;
	frameborder: 0 
	scrolling: no 
	marginheight: 0 
	marginwidth: 0 */
}


.googleMapLarger {
  color:#0000FF;
  text-align: left;
}

.extraSpace {
    text-align: left;
    height: 110px;
    width: 420px;    
    position: relative;  
    padding: 0;
    margin: 0;
}

/******************************************************************************************************/
/* Odds and Ends */
/******************************************************************************************************/

/* use for italics in my email address */
.emailItal {
    font-size: 13px; 
    font-style: italic;
    font-weight: normal;
}

/* rollover/tabbing pseudoselectors for various browsers */
a:focus  { color: #FF6633; }
a:hover  { color: #FF6633; }
a:active { color: #FF6633; }