/*
=========================
TBirdLabs - New layout, 2015 - July
=========================
*/

* {border:0;margin:0;padding:0;}

/* ::: Typography ::: */
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {font-size: 80%;}

/* ::: Embedded content ::: */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {border: 0;}
/* -- end of abridged normalize -- */


/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.clearfix {*zoom: 1;}

/* @viewport rule attempts to fix IE 10 viewport sizing */
@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}
/*------------------------------------------------------- */
/*------------------------------------------------------- */
/* from here down pertains to TBirdLabs specifically */
/*------------------------------------------------------- */
/*------------------------------------------------------- */

/* body */
body { height:100%;background: #081E28; font: 100%/1.2 Calibri;color: #fff;}

* {
  -webkit-box-sizing: border-box; /* Android <= 2.3, iOS <= 4 */
  -moz-box-sizing: border-box; /* Firefox 1+ */
  box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

.clear {clear: both;}

#wrapper {position:relative; overflow:visible; padding-bottom: 5px; margin:20px auto; min-width: 260px; max-width: 1020px;height: auto;
background: linear-gradient(-45deg, #C2C2C2,#06244A );
           border: 4px indianred solid;}
.outer-wrap {position:relative; margin: 15px auto 50px;padding: 10px 5px; padding-top: 5px; max-width: 100%;height: auto;background: linear-gradient(-45deg, #C2C2C2,#06244A );
           border: 4px indianred solid;}

p {margin: .5em 2.1em; color: #fff; line-height: 1.5em; text-align: left;}

/* box with header info is contained in - width 730 by 135 */
#header-wrap { margin:50px auto; width:70%; height: auto; }
#header-wrap a{ color: #fff; text-decoration: none;}
#header-wrap a:hover {color: indianred;font-weight:bolder;text-decoration: underline;}
#header-wrap a.logo {float:left; display: block; margin:0px auto; width: 380px; height: 212px; background:url(../includes/images/TBL-RD-logo.jpg) no-repeat;}
#header-wrap .tagline {float:right;margin-top:50px;color:#fff; font-size: 1.6em; font-weight: bold; font-style: italic; text-align:center; }
.logo { margin:auto 10% auto; border: 2px red dashed;}

h1 {margin:.2em auto; font-weight: bolder;font-size: 2.5em;font-style: italic;
    color: indianred; line-height: 1.25em;text-align: center;}
h2 {margin:0 auto; padding: 0 .5em;font-weight: bolder;font-size: 1.25em;color: #937639;
    line-height: 1.25em;text-align: center;}
h4 {margin:0 auto; padding: 0 .5em;font-weight: bolder;font-size: 1.25em;color: indianred;
    line-height: 1.25em;text-align: center;}
h5  {margin:0 auto; padding: 0 .5em;font-weight: bolder;font-size: 1.15em;color: indianred;
    line-height: 1.25em;text-align: center;}

a:link { text-decoration:underline; color: #06244A; }

/** @group skills **/
#skills-left { display: block; float: left; margin-right: 25px; margin-bottom: 20px;}
#skills-right { display: block; float: left;}

/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

/* ::: Main Navigation ::: */
/* top navigation */
#topnav {margin: 20px auto;width:75%;height: 20px;list-style:none; vertical-align: middle;}
#topnav ul {margin: 0 auto;padding: 0px;}
#topnav li {float:left;width:145px;list-style:none;}
#topnav a {color:indianred;font-weight:bolder;display:block;text-align:center;text-decoration: none;}
#topnav a:hover {color:#fff;font-weight:bolder;text-decoration: underline;}
#topnav a:visited {color:#fff;font-weight:bolder;text-decoration: underline;}

/* content */
.white-red-box {margin: 0 auto 1%; max-width: 85%;height: auto;background-color: #fff;
          border: .5em indianred groove;}
.white-red-box p {margin: .5em .9em; color: #000; line-height: 1.5em; text-align: left;}

.started-red-box {margin: 0 auto 1%; max-width: 45%;height: auto;background-color: #fff;
          border: .5em indianred groove;}
.started-red-box p {margin: .5em .9em; color: #000; line-height: 1.5em; text-align: left;}

.photos-box {margin: 0 auto 1%; max-width: 60%;height: auto;background-color: #fff;
          border: .5em indianred groove;}
.photos-box p {color: #000;}
.pedigree a{color: indianred; font-size: 1.25em; text-align: center;font-weight: bold;}

.pedigree-box {margin: 0 auto 1%; height: auto;background-color: #fff; border: .2em indianred solid;}
.pedigree-box td {margin: .5em 1.1em; color:  #394b93; line-height: 1.5em; text-align: left;}
.pedigree-box h3 {color: indianred; font-size: 1em; }
.pedigree-box h2 {color: navy; font-size: 1em; }

.dog-box {margin: 0 auto 1%; max-width: 100%;padding: 1%;height: auto;background-color: #fff;
          border: .3em #000 double;}
.dog-box p {margin: .5em 1.1em; color: #fff; line-height: 1.5em; text-align: left;}
.dog-box h3 {margin: 1em .9em; color: indianred; font-size: 1.25em; text-align: center;}
.dog-box h2 {color: indianred; text-align: center;font-size: 1.15em; text-align: center;}
.dog-box a {color:indianred;font-weight:bolder;text-decoration: none;}
.dog-box a:hover {color:indianred;font-weight:bolder;text-decoration: underline;}


.short-horizon-bar { float:left; width:30%; height:2px; background-color: #fff;margin-left:25px;}
.center-horizon-bar { margin: 10px auto; width:250px; height:2px; background-color: #000;}
.double-long-horizon-bar { width:85%; height:3px; background-color: #000;margin: .5em auto;}
.gray-horizon-bar { width:50%; height:3px; background-color: #C2C2C2;margin: .5em auto;}

.clear {clear: both;}

#photo {margin: 5px 15px 0; }
#photo .rght{float: right;margin: 5px 15px 0 10px;}
#photo .lft{float: left;margin: 5px 10px 0 10px;}
#photo img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}

.read-more{font-size: .6em;color: #937636;text-decoration:none;}
.read-more a:hover { text-decoration:underline; }

#footer-container { clear:both; margin: 0 .7% 1.3% 9.9%;width:80%; height: auto; color: white; font-size:.8em;}
  #footer-container a {color: #fff; text-decoration: none;font-size:1em;}
  #footer-container a:link { padding:0;}
  #footer-container a:hover {color: indianred;text-decoration: underline;}
  #footer-container .copyright {float:right;text-align: right;}