/* Custom CSS for racinewebworks.com 

Updated: July 2016

colors: 

gray: #a3a3a3;
orange: #ff7800;

old fonts: font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

*/

/* Universal page elements */

body {
	color: #000;
	background: #fff url(../img/bkg.png) 0 0 repeat;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	padding-top: 51px;
}

p {
	font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

nav.navbar .brand {
	color: #ff7800;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	float: left;
    display: block;
    padding: 10px 20px 10px;
    font-size: 20px;
    font-weight: 200;
}	

.navbar-inner {
	border-bottom: 2px solid #999;
}

nav.navbar .brand:hover, nav.navbar .brand:focus {
	color: #fd9b43;
	text-decoration: none;
}	

body.about ul.nav li.nav_about a, body.work ul.nav li.nav_work a, body.contact ul.nav li.nav_contact a {
	color: #ff7800;
}

footer .container {
	margin-top: .5em;
	padding-top: .5em;
	border-top: 1px dashed #ff7800;
}

footer .container p {
	text-align: center;
}

/* Homepage */	

#callout {
	padding-bottom: 1em;
	margin-bottom: 2%;
	border-bottom: 1px dotted #999;
}

body.home #callout {
	min-height: 300px;
	background: transparent url(../img/banner_circle_left.png) -5px 15px no-repeat;
}

body.work #callout {
	border-bottom: none;
}

#callout p {
	font-weight: normal;
	font-style: italic;
	/*font-size: 2.7em;*/
	line-height: 1.5;
	padding: 1em 0 0 0;
}

#callout p a {
	color: #ff7800;
	text-decoration: none;	
}

#callout p a:hover, #callout p a:focus {
	text-decoration: underline;
}

h3.code_text, h3.edit_text, h3.design_text, h3.search_text { /* a little sprite action (homepage) */
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	font-size: 24px;
}
h3.code_text {
	background: transparent url(../img/sprite.png) 0 -63px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	
}
h3.edit_text {
	background: transparent url(../img/sprite.png) 0 -127px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	
}
h3.design_text {
	background: transparent url(../img/sprite.png) 0 1px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	
}
h3.search_text {
	background: transparent url(../img/sprite.png) 0 -191px no-repeat;
	padding-left: 40px;
	padding-top: 5px;
	height: 32px;
	
}

/* Work page */

ul.services {
	list-style-type: none; 
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 20px;
	float: left;
}
ul.services li {
	margin: 7px 0 0 0;
	padding-left: 20px;
	padding-right: 5px; 
	display:block;
	float: left;
	font-size: 16px;
}
ul.services li:first-child {
	margin-left: 0;
}
	
li.services_code { /*work page sprites*/
	background: transparent url(../img/sprite_sm.png) 0 -32px no-repeat; 
	height: 16px;
}
li.services_edit {
	background: transparent url(../img/sprite_sm.png) 0 -64px no-repeat;
	height: 16px;
}
li.services_design {
	background: transparent url(../img/sprite_sm.png) 0 0 no-repeat;  
	height: 16px;
}
li.services_search {
	background: transparent url(../img/sprite_sm.png) 0 -96px no-repeat;  
	height: 16px;
}

body.work .col-md-6 p {
	clear: left;
	font-size: 16px;
}	

body.work .tmb {
	float: right;
	margin: 0 0 20px 20px;
}

body.work section .row {
	padding-top: 1.5em;
	margin-top: 1.5em;
	border-top: 1px dotted #999;
}

body.work section .row:first-child {
	border: 0;
	padding-top: 0;
}

body.about section {
	margin-top: 18px;
}

/* responsive tweaks */

/* Large desktop */
@media (min-width: 1200px) {  }

@media (max-width: 1199px) {  
	
	body.work .tmb {
		float: left;
		margin: 20px 0 20px 0;
	}
	
	body.work h3 {
		clear: left;
	}
	
}

@media (max-width: 979px) {  
	
	body.home #callout {
		background: none;
		margin-top:20px;
	}	
					
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {}
 
/* Landscape phones and down */
@media (max-width: 480px) {}