/* CSS for granitefreelance.com */

/* reset browser styles.. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: inherit;
	font-family: inherit;
	vertical-align: baseline;
	background: none;
}
html {
	width: 100% !important;
	height: 100% !important;
	padding: 0;
	margin: 0;
	font-size: 62.5%; /* 1rem now= 10px, probably */
}
body {
	background-color: #fefefe;
	
	color: #333;
	/* color: #eee; */
	
	/* background-image: url("/img/bg/granite-texture.jpg");
	background-repeat: repeat; */
	
	/* font-family: Consolas, 'Lucida Console', 'Courier New', ProFontWindows, monospace; */
	
	font-family: 'Titillium Web';
	font-size: 1.6rem;
	line-height: 1.33;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: auto;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .h7, .h8, .h9 { /* Opera! */
	background-color: inherit;
	font-weight: 800;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	display: block;
	margin: 2rem 0 1.5rem;
}
h1 { font-size: 3.52rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2.128rem; }
h5 { font-size: 2rem; }
h6 { font-size: 1.92rem; }


.bordered {
	border: 1px solid ;

}

abbr, acronym {
	border-bottom: .1rem dotted #000;
	cursor: help;
}
strong {
	font-weight: bold;
}
em, .italics {
	font-style: italic;
	padding-right: .3rem;
}

.shadowed {
	box-shadow: .5rem .5rem 1rem .1rem rgba(0,0,0,.33);
}

.hidden {
	display: none;
}

.text-center {
	text-align: center;
}
.block-center {
	margin: 0 auto;
}
.centered {
	text-align: center;
	margin: 0 auto;
}

blockquote::before, blockquote::after, q::before, q::after {
	content: "";
}
blockquote, q {
	font-size: inherit;
	quotes: "" "";
}
blockquote, ul, ol {
	margin: .75rem .75rem .75rem 1.5rem;
}

/* handy structural "blockquote" block */
.block-quote {
	margin: 0 12% 0 4%;
	text-align: justify;
}

ol, ul, dl {
	margin-left: 4rem;
}
ol li {
	list-style: decimal outside;
}
ul li {
	list-style: square outside url("/img/uli.png");
	margin: .75rem .75rem .75rem 1.5rem;
}

.ul-header li {
	margin: .3rem 0;

}

p, fieldset, table {
	margin-top: 1.7rem;
	margin-bottom: 1rem;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}

a {
	background: transparent;
}

:link {
	transition: all 100ms ease-out 0s;
	color: #004488;
	text-decoration: none;
}
:visited {
	color: #3B6D9F;
	text-decoration: none;
}
a:hover {
	color: #D001C3;
	text-decoration: underline;
}
a:active {
	color: #FEBF00;
	text-decoration: none;
}
:focus {
	outline: 0;
}

/* special cursors for special links */

/* new tab/window */
a[onclick^=window] {
	cursor: crosshair;
}



p { margin-top: 1rem; }

img {
	background-position: center;
	border: 0;
	max-width: 100%;
	height: auto;
}


:link {
	transition: all 100ms ease-out 0s;
	text-decoration: none;
}
:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
:focus {
	outline: 0;
}


.breakable {
	word-wrap: break-word; /* or "normal" */
	overflow-wrap: break-word;
}

.small { font-size: 75%; }

.indented { margin-left: 2rem; }
.extra-indented { margin-left: 4rem; }
.super-indented { margin-left: 6rem; }

.em {
	font-style: italic;
}

.sup { 
	margin-top: -1rem; 
	margin-bottom: 2rem;
}

/* handy for headers */
.top, h1:nth-child(1), .semi-sub {
	margin-top: 0;
}
/* for sub headers */
.sub {
	margin-top: -0.5rem;
}
.super-sub {
	margin-top: -1.5rem;
	margin-bottom: 3rem;
}
 /* for inside the head tag - only for SHORT phrases (wraps badly!) */
.small-sub {
	position: relative;
	top: -1rem;
	font-size: 66%;
}



.space-big, .space-half, .space-quarter, .space-small, .space-tiny, .space-minute {
	overflow: hidden; /* prevent IE expanding the container */
	display: block;
}
.index-break, .clear, .clear-big, .clear-half, .clear-quarter, .clear-small, .clear-tiny, .clear-minute {
	overflow: hidden;
	margin: 0;
	clear: both;
	width: 100%;
	display: block;
}




.space-big { height: 20rem; }
.space-half { height: 10rem; }
.space-quarter { height: 5rem; }
.space-small { height: 2.5rem; }
.space-tiny { height: 1rem; }
.space-minute { height: .25rem; }

.clear-big { height: 20rem; }
.clear-half { height: 10rem; }
.clear-quarter { height: 5rem; }
.clear-small, .index-break { height: 2.5rem; }
.clear-tiny { height: 1rem; }
.clear-minute { height: .25rem; }
.clear { height: .001rem; font-size: 0;}

.clear-right {
	clear: right;
	height: 0;
}
.clear-left {
	clear: left;
	height: 0;
}

/* just handy */
.justify { text-align: justify; }
.smaller { font-size: smaller; }
.larger { font-size: larger; }
.bigger { font-size: larger; }
.small { font-size: small; }
.x-small { 	font-size: x-small; }
.big, .large, big { font-size: large; }
.huge { font-size: x-large; }
.massive { font-size: 10rem; }
.bold { font-weight: bold; }
.vbold { font-weight: 800; }
.bolder { font-weight: bolder; }
.red { color: #FF0000; }
.yellow { color: #FFFF00; }
.orange { color: #ffb300; }
.pink { color: #FF00FF; }
.green { color: #009900; }
.purple { color: #cc00ff; }
.grey { color: #B5B5B5; }
.black { color: #000000; }


.warn {
	color: #FE3A00;
	font-weight: bold;
}


/*

	LEFT/RIGHT + COLUMNS
								*/



/* stackable half-width columns */
.half-size {
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
	outline: 0;
}


/* two-columns.. */
.two-column {
	width: 100%;
	clear: right;
}

/* for if you need the entire row to highlight on hover, use this.. */
.two-column-row {
	width: 100%;
	clear: right;
	padding: 0;
	float: right;
}
.two-column-row:hover {
	background-color: #ffffff;
}

.left, .left-column, .left-title {
	position: relative;
	float: left;
	padding: 0;
}
.left-column {
	padding: 0;
	width: 45%;
}
.right, .right-column, .right-title {
	position: relative;
	padding: 0;
	float: right;
}
.right-column {
	padding: 0;
	width: 45%;
}

.left-column, .right-column {
	text-align: justify;
}
.left-column {
	padding: .5rem 2rem .5rem .5rem;
}
.right-column {
	padding: .5rem .5rem .5rem 2rem;
}

.narrow-column {
	width: 22%;
}
.wide-column {
	width: 72%;
}

/*
	For larger "title" images that want more space around them.
	These images will also automatically scale down on smaller screens
*/

.left-img, .left-img-title, .left-title, .left-img-sub {
	float: left;
}
.left-img-title, .left-title {
	margin: 2rem 2rem .15rem 0;
}
.left-img	 {
	margin: .5rem 2rem .5rem 0;
}

.right-img, .right-img-title, .right-title, .right-img-sub  {
	float: right;
	text-align: right;
}
.right-img-title, .right-title {
	margin: 2rem 0 .5rem 2rem;
}
.right-img {
	margin: .5rem 0 .5rem 2rem;

}
.img-sub, .right-img-sub, .left-img-sub {
	color: #F5A90A;
	font-size: 80%;
}

.right-text {
	text-align: right;
}

.left-text {
	text-align: left;
	margin-left: .2rem;
}

.far-right {
	float: right
}

.thumbnail {
	margin: .5rem;
}


.fancy-thumb {
	outline: .2rem solid #fbb627;
	border: .6rem solid #ffffff;
	outline-offset: -.2rem;
}

.fancy-thumb:hover {
	outline: .2rem solid #2a2a2a;
}

.smallcap {
	font-variant: small-caps;
}


.quote {
	min-height: 6rem;
	padding: .5rem 0 0;
	margin: 2rem 4rem 0 2rem;
	font-size: 95%;
	text-align: justify;
	color: #A07A47;
	background: transparent url("/blog/inc/themes/original/images/quote.png") no-repeat 0 .6rem;
}

.quote::before {
	content: "\ ";
	float: left;
}
.quote::before {
	margin: 0 0 6rem 5.5rem; /* by the way, margin: 5rem 5rem 0 0 and others would also work! */
}



.cb-refs-title {
	font-size: 80%;
	vertical-align: super;
	font-weight: bolder;
	cursor: pointer;
}
.cb-ref {
	padding: 0;
	margin: 0 0 3rem 0;
	font-family: 'Trebuchet MS', Trebuchet, Verdana, 'Lucida Grande', Tahoma, sans-serif;
	color: #b28425;
}
.reftext {
	font-size: 80%;
	margin-top: 1rem;
	margin-bottom: -1rem;
	color: #855f10;
}
.reftext li {
	padding-bottom: 1.44rem;
}





.content { margin: 2rem 12rem 3rem;}


#main-title { 
	font-size: 400%;
	margin: 0 auto;
	text-align: left;
	/* text-align: center; */
}

#main { margin: 8rem 0; }




#butt-foot-ipv6 {
	position: fixed;
	bottom: 0.5rem;
	right: 0.75rem;
}