/* 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;  
}

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

/* fluid margins for the whole site */ 
body {
    margin-left: 8.25%;
    margin-right: 15%;
    margin-top:6px; 
/*  background-color: aqua; */
}

/* position the image of my name at the top of the page */
.myName {
    position: relative;
    left: -68px;
    top: 22px; 
    padding: 0;
    margin: 0;
}

/* fix border around image links etc */
a img {border: none; }

/******************************************************************************************************/
/* 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: -150px;
    top: 27px;
    /*font-family: "Arial", sans-serif;*/
	font-family: "ff-meta-web-pro", sans-serif;
	font-style: normal;
    font-size: 14px;
    font-weight: bold; 
    letter-spacing: -0.02em;
    line-height: 18px;
    text-align: right;
    padding: 0;
    margin: 0;
    
    /*background-color: red; */
}

.tagHeading {
    /*color: #000000;*/
    color: #333333;
	font-style: italic;
	font-weight: bold;
    text-decoration: none;
    font-size: 14px;
	margin-bottom: 0;
	margin-top: 16px;
}

.tagInit {
    /*color: #787878;*/
    color: 999999;
	text-decoration: none;  
}

.tagHilite {
//  color: #333333;
	color: #00CCFF;
//	color: #FF33CC;
//	color: #3399CC;
//	color: #CC0000;
}

/* twitter logo positioning, hovering etc */
.twitterLogo {
  display: block;
  width: 19px;
  height: 19px;
  position: relative; 
  top: 7px;
  left: 217px; 
  background: url(../media/twitter_logo_double.jpg) bottom left no-repeat #eee;
}
.twitterLogo:hover {
  background: url(../media/twitter_logo_double.jpg) top left no-repeat #666;
}

.extraKern{
  letter-spacing: 0.2em;
}

/******************************************************************************************************/
/* Contact, bio links */
/******************************************************************************************************/


.emailAddress {
    color: #999999;
    /* font-family: "Arial", sans-serif; */
    font-size: 14px;
    font-weight: bold;
    position: relative;
    top: -38px;
    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; */
}

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

.twitterFollow {
  position: relative; 
  left: -22px;
  top: 475px; 
}

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


/* general content placement */ 
.content {
    color: #666666; 
    /*font-family: "Arial", sans-serif;*/
    font-family: "ff-meta-web-pro", sans-serif;
	font-size: 13px;
    line-height: 19px;	
    text-align: left;
    height: 900px;
    width: 1024px;
    position: relative;  
    left: 145px;
    top: -520px;  
    padding: 0;
    margin: 0;
	/*background-color: black;*/
}

/******************************************************************************************************/
/* Blocks Of Text */
/******************************************************************************************************/


.projectInfoBasic {
    /*font-family: "Arial", sans-serif;*/
    font-style: italic; 
    /*font-size: 13px;   */   
    text-align: center;
    position: relative;
	width: 660px;
    /*left: -182px;*/
	top: 10px; 
    padding: 0;
    margin: 0;
}

.projectInfoReel {
    /*font-family: "Arial", sans-serif;*/
    font-style: italic; 
    /*font-size: 13px;   */   
    text-align: center;
    position: relative;
	width: 660px;
    /*left: -182px;*/
	top: -10px; 
    padding: 0;
	margin-top: 0px;
    margin-bottom: 15px;
}

.projectDescription {
    text-align: left;
    position: relative;
	left: 90px;
    top: 30px; 
    padding: 0;
    margin: 0;
	width: 480px;
}

.bio {
    /*font-size: 13px;*/      
    font-weight: normal;    
    text-align: left;
    position: relative;
    padding: 0;
    margin: 0;
	top: 46px;
    /*left: 26px;*/
	width: 480px;
}

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

}

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

.inLineLink {
    font-weight: bold;
	/*color: #3399CC;*/
	color: #00CCFF;
}

/******************************************************************************************************/
/* Videos */
/******************************************************************************************************/


/* centers the qt movie by setting the left position absolutely */
.qtMovie {
    position: relative;
    left: 150px;
    /*margin-bottom: 22px;*/
}

.qtMovie288 {
    position: relative;
    left: 186px;
	margin-bottom: 22px;
}

.vimeo16x9{
    position: relative;
    left: 0px;
    width: 660px;
    height: 372px;
    margin-bottom: 22px;
}

.vimeoVanara{
    position: relative;
    left: 0px;
    width: 660px;
    height: 438px;
    margin-bottom: 22px;
}

.vimeo4x3{
    position: relative;
    left: 0px;
    width: 660px;
    height: 495px;
    margin-bottom: 22px;
}

.vimeoPAL{
    position: relative;
    left: 0px;
    width: 660px;
    height: 403px;
    margin-bottom: 22px;
}

.vimeo4x3small{
    position: relative;
    left: 90px;
    width: 480px;
    height: 360px;
    margin-bottom: 22px;
}

.vimeo4x3short{
    position: relative;
    left: 0px;
    width: 660px;	
    height: 450px;
    margin-bottom: 22px;
}

.youtube4x3 {
    width: 660px;	
    height: 525px;
    margin-bottom: 22px;
}

/******************************************************************************************************/
/* Maps */
/******************************************************************************************************/


.map660{
    position: relative;
    left: 0px;
    width: 660px;
    height: 372px;
    margin-top: 55px;
}

.map420{
    position: relative;
    left: 0px;
    width: 420px;
    height: 420px;
    margin-top: 22px;
}

.map480{
    position: relative;
    left: 0px;
    width: 480px;
    height: 480px;
    margin-top: 22px;
}

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

.googleMapLargerLink {
    font-weight: bold;
	/*color: #3399CC;*/
	color: #00CCFF;
}

/******************************************************************************************************/
/* Images */
/******************************************************************************************************/


.stillImageUpper{
	margin-bottom: 22px;
}
.stillImageUpper420{
    position: relative;
	left: 120px;
	margin-bottom: 22px;
}
.stillImageUpper480{
    position: relative;
	left: 90px;
	margin-bottom: 22px;
}
.stillImageLower480{
    position: relative;
	top: 22px;
	left: 0px;
	margin-bottom: 22px;
}
.stillImageLower660{
    position: relative;
	top: 22px;
	left: 0px;
	margin-bottom: 22px;
}
.stillImageLower{
}

/******************************************************************************************************/
/* Mailing List */
/******************************************************************************************************/


.listThanks {
    /*font-size: 12px;*/      
    font-weight: normal;    
    position: relative;
    left: 0px;
    top: 32px;  
}
.listSignUp{
    position: relative;
    top: 46px; 
}
.submitButton {
    position: relative;
    top: 5px;
}

/******************************************************************************************************/
/* Misc */
/******************************************************************************************************/


.photoCredit {
    font-size: 11px;      
    font-weight: normal;
    font-style: italic;     
    text-align: right;
    position: relative;
    right: 365px;
    top: -18px;  
    padding: 0;
    margin: 0;
}

.error {
    /*font-size: 12px;*/      
    font-weight: normal;    
    position: relative;
    left: 0px;
    top: 32px;  
}

/******************************************************************************************************/
/* Bricks */
/******************************************************************************************************/


/* general content placement */ 
.contentBricks {
    color: #666666; 
    text-align: left;
    height: 900px;
    width: 1024px;  /*for a narrower brickcase 680px*/
    position: relative;  
    left: 145px;
    top: -522px;  
    padding: 0;
    margin: 0;
	/* background-color: black;*/
}
/* general content placement */ 
.contentBricksWide {
    color: #666666; 
    text-align: left;
    height: 900px;
    width: 2048px;  /*for a narrower brickcase 680px*/
    position: relative;  
    left: 145px;
    top: -520px;  
    padding: 0;
    margin: 0;
	/* background-color: black;*/
}
.brick {
    padding: 0px;
	border-width: 0px;
	postition: relative;
	margin: 2px;
	/*margin-top: 0px;
	margin-bottom: 4px;
	margin-left: 0px;
	margin-right: 4px;*/
}
.brick_bicycleMessengers{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_bicycleMessengers_ro.0000.jpg) top no-repeat;
}
.brick_bicycleMessengers:hover {
  background: url(../media/Bricks/brick_bicycleMessengers_ro.0000.jpg) bottom no-repeat;
}

.brick_bmPrints{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_bmPrints_ro.0000.jpg) top no-repeat;
}
.brick_bmPrints:hover {
  background: url(../media/Bricks/brick_bmPrints_ro.0000.jpg) bottom no-repeat;
}

.brick_bmw{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_bmw_ro.0000.jpg) top no-repeat;
}
.brick_bmw:hover {
  background: url(../media/Bricks/brick_bmw_ro.0000.jpg) bottom no-repeat;
}

.brick_cokeHappinessFactory{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_cokeHappinessFactory_ro.0000.jpg) top no-repeat;
}
.brick_cokeHappinessFactory:hover {
  background: url(../media/Bricks/brick_cokeHappinessFactory_ro.0000.jpg) bottom no-repeat;
}

.brick_conversation{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_conversation_ro.0000.jpg) top no-repeat;
}
.brick_conversation:hover {
  background: url(../media/Bricks/brick_conversation_ro.0000.jpg) bottom no-repeat;
}

.brick_dontLetUp{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_dontLetUp_ro.0000.jpg) top no-repeat;
}
.brick_dontLetUp:hover {
  background: url(../media/Bricks/brick_dontLetUp_ro.0000.jpg) bottom no-repeat;
}

.brick_dyson{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_dyson_ro.0000.jpg) top no-repeat;
}
.brick_dyson:hover {
  background: url(../media/Bricks/brick_dyson_ro.0000.jpg) bottom no-repeat;
}

.brick_eclipse{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_eclipse_ro.0000.jpg) top no-repeat;
}
.brick_eclipse:hover {
  background: url(../media/Bricks/brick_eclipse_ro.0000.jpg) bottom no-repeat;
}

.brick_happiness{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_happiness_ro.0000.jpg) top no-repeat;
}
.brick_happiness:hover {
  background: url(../media/Bricks/brick_happiness_ro.0000.jpg) bottom no-repeat;
}

.brick_hsbc{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_hsbc_ro.0000.jpg) top no-repeat;
}
.brick_hsbc:hover {
  background: url(../media/Bricks/brick_hsbc_ro.0000.jpg) bottom no-repeat;
}

.brick_iAmLegend{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_iAmLegend_ro.0000.jpg) top no-repeat;
}
.brick_iAmLegend:hover {
  background: url(../media/Bricks/brick_iAmLegend_ro.0000.jpg) bottom no-repeat;
}

.brick_justInCase{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_justInCase_ro.0000.jpg) top no-repeat;
}
.brick_justInCase:hover {
  background: url(../media/Bricks/brick_justInCase_ro.0000.jpg) bottom no-repeat;
}

.brick_kabar_blizzard{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_kabar_blizzard_ro.0000.jpg) top no-repeat;
}
.brick_kabar_blizzard:hover {
  background: url(../media/Bricks/brick_kabar_blizzard_ro.0000.jpg) bottom no-repeat;
}

.brick_kabar_dday{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_kabar_dday_ro.0000.jpg) top no-repeat;
}
.brick_kabar_dday:hover {
  background: url(../media/Bricks/brick_kabar_dday_ro.0000.jpg) bottom no-repeat;
}

.brick_kabar_wildboar{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_kabar_wildboar_ro.0000.jpg) top no-repeat;
}
.brick_kabar_wildboar:hover {
  background: url(../media/Bricks/brick_kabar_wildboar_ro.0000.jpg) bottom no-repeat;
}

.brick_lowes_snowglobe{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_lowes_snowglobe_ro.0000.jpg) top no-repeat;
}
.brick_lowes_snowglobe:hover {
  background: url(../media/Bricks/brick_lowes_snowglobe_ro.0000.jpg) bottom no-repeat;
}

.brick_makeHistory{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_makeHistory_ro.0000.jpg) top no-repeat;
}
.brick_makeHistory:hover {
  background: url(../media/Bricks/brick_makeHistory_ro.0000.jpg) bottom no-repeat;
}

.brick_milk{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_milk_ro.0000.jpg) top no-repeat;
}
.brick_milk:hover {
  background: url(../media/Bricks/brick_milk_ro.0000.jpg) bottom no-repeat;
}

.brick_mosheh{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_mosheh_ro.0000.jpg) top no-repeat;
}
.brick_mosheh:hover {
  background: url(../media/Bricks/brick_mosheh_ro.0000.jpg) bottom no-repeat;
}

.brick_muralBedStuy{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralBedStuy_ro.0000.jpg) top no-repeat;
}
.brick_muralBedStuy:hover {
  background: url(../media/Bricks/brick_muralBedStuy_ro.0000.jpg) bottom no-repeat;
}

.brick_muralChinatown{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralChinatown_ro.0000.jpg) top no-repeat;
}
.brick_muralChinatown:hover {
  background: url(../media/Bricks/brick_muralChinatown_ro.0000.jpg) bottom no-repeat;
}

.brick_muralEagleCreek{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralEagleCreek_ro.0000.jpg) top no-repeat;
}
.brick_muralEagleCreek:hover {
  background: url(../media/Bricks/brick_muralEagleCreek_ro.0000.jpg) bottom no-repeat;
}

.brick_muralMeridianPark{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralMeridianPark_ro.0000.jpg) top no-repeat;
}
.brick_muralMeridianPark:hover {
  background: url(../media/Bricks/brick_muralMeridianPark_ro.0000.jpg) bottom no-repeat;
}

.brick_muralGreenpoint{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralGreenpoint_ro.0000.jpg) top no-repeat;
}
.brick_muralGreenpoint:hover {
  background: url(../media/Bricks/brick_muralGreenpoint_ro.0000.jpg) bottom no-repeat;
}

.brick_muralJacksonHeights{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralJacksonHeights_ro.0000.jpg) top no-repeat;
}
.brick_muralJacksonHeights:hover {
  background: url(../media/Bricks/brick_muralJacksonHeights_ro.0000.jpg) bottom no-repeat;
}

.brick_muralmorphosis{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralmorphosis_ro.0000.jpg) top no-repeat;
}
.brick_muralmorphosis:hover {
  background: url(../media/Bricks/brick_muralmorphosis_ro.0000.jpg) bottom no-repeat;
}

.brick_muralRegoPark{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_muralRegoPark_ro.0000.jpg) top no-repeat;
}
.brick_muralRegoPark:hover {
  background: url(../media/Bricks/brick_muralRegoPark_ro.0000.jpg) bottom no-repeat;
}

.brick_nwa{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_nwa_ro.0000.jpg) top no-repeat;
}
.brick_nwa:hover {
  background: url(../media/Bricks/brick_nwa_ro.0000.jpg) bottom no-repeat;
}

.brick_ourCar{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_ourCar_ro.0000.jpg) top no-repeat;
}
.brick_ourCar:hover {
  background: url(../media/Bricks/brick_ourCar_ro.0000.jpg) bottom no-repeat;
}

.brick_peugeot{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_peugeot_ro.0000.jpg) top no-repeat;
}
.brick_peugeot:hover {
  background: url(../media/Bricks/brick_peugeot_ro.0000.jpg) bottom no-repeat;
}

.brick_pillsbury{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_pillsbury_ro.0000.jpg) top no-repeat;
}
.brick_pillsbury:hover {
  background: url(../media/Bricks/brick_pillsbury_ro.0000.jpg) bottom no-repeat;
}

.brick_potc{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_potc_ro.0000.jpg) top no-repeat;
	/*margin-bottom: 4px;*/
}
.brick_potc:hover {
  background: url(../media/Bricks/brick_potc_ro.0000.jpg) bottom no-repeat;
}

.brick_potcPrints{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_potcPrints_ro.0000.jpg) top no-repeat;
}
.brick_potcPrints:hover {
  background: url(../media/Bricks/brick_potcPrints_ro.0000.jpg) bottom no-repeat;
}

.brick_salt{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_salt_ro.0000.jpg) top no-repeat;
}
.brick_salt:hover {
  background: url(../media/Bricks/brick_salt_ro.0000.jpg) bottom no-repeat;
}

.brick_selfPortrait{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_selfPortrait_ro.0000.jpg) top no-repeat;
}
.brick_selfPortrait:hover {
  background: url(../media/Bricks/brick_selfPortrait_ro.0000.jpg) bottom no-repeat;
}

.brick_sony{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_sony_ro.0000.jpg) top no-repeat;
}
.brick_sony:hover {
  background: url(../media/Bricks/brick_sony_ro.0000.jpg) bottom no-repeat;
}

.brick_stoli{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_stoli_ro.0000.jpg) top no-repeat;
}
.brick_stoli:hover {
  background: url(../media/Bricks/brick_stoli_ro.0000.jpg) bottom no-repeat;
}

.brick_theCall{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_theCall_ro.0000.jpg) top no-repeat;
}
.brick_theCall:hover {
  background: url(../media/Bricks/brick_theCall_ro.0000.jpg) bottom no-repeat;
}

.brick_theFutureAHistory{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_theFutureAHistory_ro.0000.jpg) top no-repeat;
}
.brick_theFutureAHistory:hover {
  background: url(../media/Bricks/brick_theFutureAHistory_ro.0000.jpg) bottom no-repeat;
}

.brick_threadOfAwesomism{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_threadOfAwesomism_ro.0000.jpg) top no-repeat;
}
.brick_threadOfAwesomism:hover {
  background: url(../media/Bricks/brick_threadOfAwesomism_ro.0000.jpg) bottom no-repeat;
}

.brick_urge2surge{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_urge2surge_ro.0000.jpg) top no-repeat;
}
.brick_urge2surge:hover {
  background: url(../media/Bricks/brick_urge2surge_ro.0000.jpg) bottom no-repeat;
}

.brick_woman{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_woman_ro.0000.jpg) top no-repeat;
}
.brick_woman:hover {
  background: url(../media/Bricks/brick_woman_ro.0000.jpg) bottom no-repeat;
}

.brick_wpAnimation{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_WPAnimation_ro.0000.jpg) top no-repeat;
}
.brick_wpAnimation:hover {
  background: url(../media/Bricks/brick_WPAnimation_ro.0000.jpg) bottom no-repeat;
}

.brick_yf{
	display: inline-block;
	width: 336px;
	height: 143px;
	background: url(../media/Bricks/brick_yf_ro.0000.jpg) top no-repeat;
}
.brick_yf:hover {
  background: url(../media/Bricks/brick_yf_ro.0000.jpg) bottom no-repeat;
}