mailplane.css

/*	This stylesheet is designed to work with the grey theme for GMail
 
	- hides the top bar and Google+ notifications
	- simplifies buttons (remove border/background, add hover state back)
	- dim Rapportive until hovered
 
	This is only partially tested at this point and may cause some issues
	Please let me know if you find problems: <http://brettterpstra.com/contact/>
	Brett Terpstra 2013 <http://brettterpstra.com> /*
 
/* move the whole body up 64 px for comfortable, change to  44 for compact */
body {
	position: relative;
	top: -44px;
}

/ * grab the search bar and move it down  in comfortable */
#gbqf {
	position: absolute;
	top: 116px;
	left: 0px;
}
 /* in compact */
#gbqfw {
	position: absolute;
	top: 74px;
}

/* move the buttons left of the search bar */

.G-atb {
	margin-left:-0px !important;
}

/* hide share rapportive  */

#share-button-container {
	display:none !important;
}

/* rescue the compose iframe */
iframe body {
	top: auto;
}
/* hide google plus notifications */
#gbu { display: none }
/* remove borders and backgrounds from buttons, add transitions for hover */
.T-I-ax7 {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}
.T-I-JW {
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	webkit-box-shadow: 0 1px 4px rgba(0,0,0,.25) inset;
	moz-box-shadow: 0 1px 4px rgba(0,0,0,.25) inset;
	box-shadow: 0 1px 4px rgba(0,0,0,.25) inset;
}
.T-I-ax7 .T-I-J3 {
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	opacity: .35;
}
.TI .T-I-ax7, .z0 .T-I-ax7, .G-atb .T-I-ax7 {
	border: none;
	color: #999;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}
.TI .T-I-ax7.T-I-JW, .z0 .T-I-ax7.T-I-JW, .G-atb .T-I-ax7.T-I-JW, .G-atb .T-I-ax7.J-JN-M-I-JW {
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}
/* dim rapportive column, fade in on hover */
.y3 {
	opacity: .15;
	-webkit-transition:opacity .2s ease-in-out;
	-moz-transition:opacity .2s ease-in-out;
	-o-transition:opacity .2s ease-in-out;
	transition:opacity .2s ease-in-out;
}
.y3:hover {
	opacity: 1;
}
/* alternative means of hiding black bar with appear-on-hover */
/*#gbzw {
	position: relative;
	top: -50px;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;
}
#gbzw:hover {
	top: 0;
}
*/

Thanks for this!

The search bar breaks unless you use "relative":

/* in compact */

gbqfw {

position: relative;
top: 52px;
left: 120px;

}

Any idea how to get the bottom of the window back once you have moved it all up the screen? It just leaves a blank bar at the bottom, the same size as the bar we removed from the top.

Also I couldn't seem to /* rescue the compose iframe */
iframe body {
top: auto;
}

It still stays up the top, partially concealed.

This worked:

.aSt {
margin-top:45px !important;
}