druid/docs/content/css/custom.css

@font-face {
    font-family: 'Conv_framd';
    src: url('../fonts/framd.eot');
    src: url('../fonts/framd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/framd.woff') format('woff'),
         url('../fonts/framd.ttf') format('truetype'),
         url('../fonts/framd.svg#heroregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


html, body {
	position:relative;
	height:100%;
	min-height:100%;
	height:100%;	
	color:#252525;
	font:400 18px/26px 'Open Sans', Arial, Helvetica, sans-serif;
	padding:0;
	margin:0;
	word-wrap:break-word;
}
a {
	color:#6ab6dd;
	position:relative;
}
a:hover {
	text-decoration:underline;
	color:#2c79a1;
}
.wrapper {
	min-height:100%;
}
header {
	margin:0 0 100px;
}
header .span12 {
	padding:0 0 7px 0;
}
.logo.custom {
	display:inline-block;
	margin:0;
	vertical-align:25px;
}
.logo.custom a {
	background:url(../img/logo.png) no-repeat;
	width: 110px;
	height: 49px;
	display:block;
	text-indent:-9999px;
}
.custom.navbar {
	margin:10px 0;
}
.custom.navbar .nav li  {
	padding:0 !important;
}
.custom.navbar .nav li a, .navbar .brand, .custom.navbar .nav li.pull-right span {
	font:300 14px/20px 'Open Sans', Arial, Helvetica, sans-serif;
	padding:10px 10px;
}
.navbar .brand.active {
	color:#fff;
}
.custom.navbar .nav li.pull-right span {
	padding-right:0;	
	color:#e76d4c !important;
	display:block;
}
.custom.navbar .nav li a.doc-link {
	padding:5px 10px 0;
}
.custom.navbar .nav li a.doc-link span {
	display:inline-block;
	background:url(../img/icon-git.png) no-repeat;
	width: 28px;
	height: 28px;
	vertical-align:-7px;
	margin-left:5px;
}
.custom.navbar .nav li a.doc-link:hover span, .custom.navbar .nav li.active a.doc-link span {
	background-position:0 -28px;
}
.custom.navbar .nav {
	float:none;
}
.navbar .nav > li.pull-right {
	float:right;
	padding:10px 0;
}
h1 {
	font:300 48px/48px 'Open Sans', Arial, Helvetica, sans-serif;
	margin:0 0 45px;
}
h1.index {
	text-align:center;
}
h1 span {
	display:block;
	font:400 14px/28px 'Open Sans', Arial, Helvetica, sans-serif;
}
h2 {
	font:30px/30px 'Conv_framd', Arial, Helvetica, sans-serif;
	margin:0 0 20px;
	color:#0f1e35;
}
h3 {
	font:300 30px/36px 'Open Sans', Arial, Helvetica, sans-serif;
	margin:0 0 33px;
	text-align:center;
}
.btn {
	display:block;
	margin:0 auto 65px;
	background:#6ab6dd;
	border:none;
	box-shadow:inset -3px -3px 3px #5592b1;
	height:53px;
	width:205px;
	font:30px/53px 'Conv_framd', Arial, Helvetica, sans-serif;
	color:#252424;
	text-shadow:none;
	padding:0;
	z-index:100;
	position:relative;
}
.btn a {
	color:#252424;
}
.btn:hover {
	background:#83c6e9;
}
.index-content {
	margin:0 auto 60px;
	text-align:center;
}
.third {
	margin:0 auto 35px; 
}
.third-item {
	text-align:left;
}
.third-item:first-child {
	margin:0;
}
.third-item a {
	display:block;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:700;
	font-size:30px;
	margin:0 auto 20px;
	color:#252424;
	text-align:center;
}
.container.custom {
	padding:0;
	margin:0 auto;
}
.container.custom.main-cont {
	padding-bottom:230px;	
}
.text-part {
	padding-top:70px;
}
.row-fluid.index-page {
	padding-top:100px;
}
.index-page .content {
	padding:15px 0 0;
}
.index-page h3 {
	text-align:left;
}
.index-page .sidebar {
	padding:65px 0 30px;
}
.container.custom p {
	margin:0 0 17px;
}
.homepage .index-page .content h2 {
	margin:0 0 20px;
}
.container.custom .unstyled {
	margin:0;
	color:#353535;
}
.container.custom .unstyled li {
	margin:0 0 17px;
}
.container.custom .unstyled li span {
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:700;
	display:block;
}
.container.custom .unstyled li a {
	display:inline;
}
.homepage h4 {
	font:24px/24px 'Conv_framd', Arial, Helvetica, sans-serif;
	margin:0 0 15px;
}
.container.custom .sidebar .unstyled {
	margin:0 0 100px;
}
.container.custom .sidebar .unstyled li {
	margin:0 0 12px;
	border-bottom:1px solid #adadad;
	padding: 5px 7px;
}
.grey-box {
	background:#e5e4e3;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	position:relative;
	padding:20px 10px 130px;
	color:#000;
}
footer {
	text-align:center;
	font-size:14px;
	color:#000;
	margin:-135px 0 0;
}
footer .container.custom {
	border-top:1px solid #e1e1e1;
	padding:20px 0 25px;
}
footer .span9 {
	text-align:left;
}
footer .container.custom ul.unstyled {
	display:inline-block;
	margin:0 120px 30px 30px;
	text-align:left;
	vertical-align:top;
}
footer .container.custom ul.unstyled li {
	font:300 14px/26px 'Open Sans', Arial, Helvetica, sans-serif;
	margin:0;
}
footer .container.custom .unstyled li a {
	color:#000;
	font-weight:300;
}
footer .container.custom .unstyled li:first-child a {
	font-weight:400;
}
footer ul li a:hover {
	text-decoration:underline;
	color:#fff;
}
footer .logo-block {
	text-align:right;
}
footer .container.custom p {
	display:inline-block;
	margin:28px 0 0 10px;
	text-align:left;
}
.contact-item {
	margin:0 0 30px 30px;
	text-align:left;
	font-weight:300;
}
.contact-item a {
	color:#000;
}
footer .contact-item span {
	font-weight:400;
	display:block;
}
footer .contact-item:first-child span {
	text-transform:uppercase;
}
footer .span4 {
	text-align:left;
}
footer .span5 {
	padding-top: 75px;
}
.soc {
	text-align:left;
	margin:5px 0 0 0;
}
.soc a {
	display:inline-block;
	width:35px;
	height:34px;
	background:url(../img/icons-soc.png) no-repeat;
}
.soc a.github {
	background-position:0 -34px;
}
.soc a.meet {
	background-position:0 -68px;
}
.soc a.rss {
        background-position:0 -102px;
}

.text-item {
	margin:0 0 75px;
}
.container.custom p.note {
	text-align:center;
	padding:30px 0 0;
}
.text-item strong {
	font-weight:normal;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:700;
}
h2.date {
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:400;
}
.blog h2.date {	
	margin:0 0 25px;
}
h2.date span {
	display:block;
	margin:0 0 5px;
	padding:0 0 15px;
	font-size:20px;
	border-bottom:1px solid #ccc;
}
.blog h2.date a {
	font-weight:700;
}
.blog.inner h2.date span:first-child {
	display:block;
	font-size:30px;
	font-weight:700;
	padding:0;
	border:none;
}
.blog.inner h3 {
	text-align:left;
	font-size:25px;
	font-weight:700;
	margin:0 0 15px;
}
.blog.inner ul li {
	margin-left: 50px;
	line-height:26px;
}
.recent h3 {
	font-size: 25px;
    font-weight: 700;
    margin: 0 0 15px;
    text-align: left;
}
.recent ul li.active a {
	color:#252525;
}
.border {
	width:130px;
	margin: 45px auto;
	border-top:1px solid #dfdfdf;
	border-top:1px solid #81807f;
}
.text-img {
	display:block;
	margin:0 auto 17px;
}
.indent p, .indent ul {
	padding:0 0 0 50px;
}
.span3 {
	margin-left:0;
}
.nav.nav-list.bs-docs-sidenav {
	border:1px solid #e5e5e5;
	border-radius:5px;
	box-shadow:0 0 3px #f9f9f9;
	padding:0;
	width:auto;
}
.nav.nav-list.bs-docs-sidenav li {
	border-top:1px solid #e5e5e5;
}
.nav.nav-list.bs-docs-sidenav li:first-child {
	border:none;
}
.nav.nav-list.bs-docs-sidenav li:first-child a {
	border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
}
.nav.nav-list.bs-docs-sidenav li:last-child, .nav.nav-list.bs-docs-sidenav li:last-child a {
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius:0 0 5px 5px;
}
.nav.nav-list.bs-docs-sidenav li a {
	padding:10px;
	margin:0;
	font-weight:400;
	font-size:14px;
	line-height:18px;
}
.icon-chevron-right {
	float: right;
    margin-right: -6px;
    margin-top: 2px;
    opacity: 0.25;
}
.indent ul li {
	line-height:26px;
}
.span8 h3 {
	text-align:left;
	margin:0 0 50px;
}
.span8 h3 a {
	font-weight:800;
}
.span8 h4 {
	font:700 18px/26px 'Open Sans', Arial, Helvetica, sans-serif;
	margin:0 0 20px;
}
.span8 p span {
	font-weight:700;
}
header.index-head {
	background:#f9f9f9;
	margin:0 0 30px;
}
header.index-head .span12 {
	margin-bottom:80px;
}
.index-content h2 {
	text-align:center;
}
.third-item img {
	display:block;
	margin:0 auto 70px;
}
.container.custom .third-item p {
	margin:0 0 0 20px;
} 
.row-fluid {
	margin:0;
	padding:0;
}
.nav-list [class^="icon-"] {
	margin-right:-2px;
}
@media (min-width: 1200px) {
	.custom.navbar .nav li a, .navbar .brand, .custom.navbar .nav li.pull-right span {
		padding: 10px 20px;
		font-size:16px;
	}
	.nav.nav-list.bs-docs-sidenav {
		width:258px;
	}
	.container.custom .recent ul.unstyled {
		margin-right:100px;
	}
}
@media (max-width: 980px) {
	.container.custom {
		width:95%;
	}
	.bs-docs-sidenav.affix {
		position: static;
		top: 0;
		width: 100%;
	}	
	.nav.nav-list.bs-docs-sidenav {
		width:100%;
		margin-bottom:20px;
	}
}
@media only screen 
and (min-device-width : 710px) 
and (max-device-width : 770px) {
	.container.custom {
		width:700px;
		position:relative;
	}	
	.custom.navbar .nav li {
		font-size:22px;
		padding:0 10px;
	}
	.nav.nav-list.bs-docs-sidenav.affix {
		position:fixed;
		top:175px;
		width:218px;
	}
}
@media only screen and (min-device-width : 770px) 
and (max-device-width : 810px) {
	.container.custom {
		width:700px;
	}
	.custom.navbar .nav li {
		font-size:15px;
		padding:0 15px;
	}
	.custom.navbar .nav {
		margin-left:30px;
	}
}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.container.custom {
		width:100%;
		margin:0;
	}
	footer .logo-block {
		text-align: left;
		padding-left:30px;
	}
	.offset1, .row-fluid .offset1:first-child {
		margin:0;
	}
	.indent p, .indent ul {
		padding:0;
	}
	.indent, .blog, .recent h3, .recent ul, .text-part {
		padding:0 20px;
	}
	.index-head h3 {
		font-size:20px;
	}
	.index-content {
		padding:0 20px;
	}
	.content h2, .content h3, .content ul.unstyled, .sidebar h3 {
		padding:0 20px;
	}
	h1 {
		padding:0 20px;
	}
}
@media (max-width: 320px) {
	.container.custom {
		width:100%;
	}
	footer .logo-block {
		text-align: left;
		padding-left:30px;
	}
	footer .container.custom p {
		margin-top:10px;
	}
	.offset1, .row-fluid .offset1:first-child {
		margin:0;
	}
	.indent p, .indent ul {
		padding:0;
	}
	.indent, .blog, .recent h3, .recent ul, .text-part {
		padding:0 20px;
	}
	.index-head h3 {
		font-size:25px;
		line-height:30px;
		padding:0 20px;
	}
	.index-content {
		padding:0 20px;
	}
	.content h2, .content h3, .content ul.unstyled, .sidebar h3 {
		padding:0 20px;
	}
	h1 {
		padding:0 20px;
	}
}
.container.custom .faq-page p {
	margin-bottom:10px;
}
.index-head h3 {
	margin-bottom:50px;
}
h1.center {
	text-align:center;
}
.btn.btn-navbar {
	height:auto;
	width:auto;
	margin:10px 0 0;
}
.navbar-inner {
	z-index:100000;
	position:relative;
}