body {
	font-family: helvetica, sans-serif;
	margin:0;
	font-size: 14px;

background: rgb(222,222,222);
background: -moz-linear-gradient(top,  rgba(222,222,222,1) 0%, rgba(248,248,248,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,222,222,1)), color-stop(100%,rgba(248,248,248,1)));
background: -webkit-linear-gradient(top,  rgba(222,222,222,1) 0%,rgba(248,248,248,1) 100%);
background: -o-linear-gradient(top,  rgba(222,222,222,1) 0%,rgba(248,248,248,1) 100%);
background: -ms-linear-gradient(top,  rgba(222,222,222,1) 0%,rgba(248,248,248,1) 100%);
background: linear-gradient(to bottom,  rgba(222,222,222,1) 0%,rgba(248,248,248,1) 100%);

}

a {text-decoration:none;color: rgb(0,62,100);}

img {border: 0;}

#pagecontainer{
	display:block;
	margin: 0 auto 72px;
	max-width: 942px;
	min-width: 310px;
	width: 98%;
	background-color: #fff;
	padding:0;
	box-shadow: 1px 1px 5px #888888;
}


/* HEADER STYLING ==========================================================*/
.header {
	background-color: rgba(255,255,255,0.8);
	left: 0;
	opacity:1;
	position: -webkit-sticky;position: sticky;
	top: 0px;
	width:100%;
	margin: 0;
}

.header img {
	vertical-align: middle;
	float:left;
}

#rv3head{
	background-color: rgba(255,255,255,0.8);
	width: 91%;
	margin:0 auto;
}

header a {
	font-weight: bold;
}



.logo{
	background-color: #fff;
	height: 83px;
	margin-left: 59px;
	position: sticky;
	width: 829px;
	height:200px;
	padding-top:51px;
}

.logo .granitLogo{
	width:415px;
	height:200px;
	float:left;
	background-image:url(/iGranit/logo.png);
	background-position:center;
	background-size: 100% auto;
	background-repeat:no-repeat;
}

.logo .granitDownloads{
	width:414px;
	height:67px;
	float:left;
	font-size:25px;
	color:rgb(242,101,34);
	padding-top:15px;
	text-align:right;
}


.logo a{
	border-radius:5px;-webkit-border-radius:5px;
	background-color: rgba(255,255,255,0.8);
	padding:0 5px;
	color:#39f;
}

/* gets rid of visual glitch from hover color */
.readme {
margin-top: 10px;
margin-bottom: 10px;
}

.path {
text-align: left;
font-size: 9px;
margin-top: 10px;
margin-bottom: 5px;
}



/* TABLE STYLING ============================================================*/

table {
	background-color: white;
	border-spacing: 0;
	padding: 0px;
	max-width: 773px;
	width:90%;
	margin: 0 auto 5%;
}

tr,td,th {
	padding: 4px;
	border: 0;
	-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

td{
	border-bottom:1px solid #ccc;
	vertical-align: middle;
}

tr:last-child td{border-bottom:none;}

td a, th a {
	display: block;
	height: 100%;
	margin: 0;
	padding: 0;
}


tr.row_header:hover{
	background-color: inherit !important;
}


/* rollover effect for table rows, header cells */
tr:hover{
	background: rgb(242,101,34) !important;
	cursor:pointer;
	text-shadow: 1px 1px 2px #fff;
	-webkit-transition: all 0.5s ease-in;-moz-transition: all 0.5s ease-in;transition: all 0.5s ease-in;
}

th {
	font-size: 16px;
	color:rgb(242,101,34);

	text-align: left;
}


th a {
	font-weight: normal;
	color:rgb(242,101,34);
}



/* Don't show the 'Parent Directory' row */
.row_parentdir {
	display: none;
}

/* directories appear in bold */
.dirlink {
	font-weight: bold;
}

/* ICON header cell */
.row_header .col_icon {
	padding: 4px;
	width:52px;
}

/* all cells in ICON column */
.row_normal .col_icon {
	text-align: center;
	width: 52px;
	vertical-align: middle;
}

/* all cells in ICON column */
.col_icon {
	text-align: center;
	width: 52px;
	vertical-align: middle;
}

/* all cells in NAME column */
.col_name {
	text-align: left;
	padding-left: 5px;
	width: 60%;
}

/* all cells in LAST MODIFIED column */
.col_date {
	text-align: right;
	padding-right: 5px;
}

/* SIZE header cell */
.row_header .col_size {
	padding-right: 5px;
}

/* all cells in SIZE column */
.col_size {
	text-align: right;
	padding-right: 5px;
}

/* all DESCRIPTION cells (hide this column) */
.col_desc {
	display: none;
}

.copyright{
	margin-left:59px;
	font-size: 12px;
	color:rgb(0,62,100);
	height:55px;
}

.copyright a{text-decoration: underline;}


@media only screen and (max-device-width: 320px){

.logo{
	background-color: #fff;
	height: 256px;
	margin: 0px auto 0;
	position: sticky;
	width: 256px;
	height:128px;
}

.logo .granitLogo{
	width:256px;
	height:76px;
	float:left;
/* 
	background-image:url(/iGranit/logo1.png);
	background-position:center;
	background-size: 100% auto;
 */
	float:none;
}

.logo .granitDownloads{
	float:none;
	width:100%;
}

td,
.col_icon,
row_normal .col_icon
{
	vertical-align: top !important;
}

}