/*   
Theme Name: Christopher Toal - Website
Theme URI: https://ctlaw.ca
Description: A custom theme template.
Author: QT Web Designs
Author URI: http://qtweb.ca
Version: 2.0
*/



body,td,th {}
body {margin: 0;padding: 0;font-size: 14px; font-family: 'Open Sans', sans-serif;}
#wrapper {clear:both; width: 960px; margin: 0 auto;}
p {line-height: 22px; margin: 0 0 15px; padding: 0;}
h1, h2, h3, h4, h5, h6 { margin:0; padding:0;}
a {color: #6FA405; text-decoration: underline;}
a:hover {color: #444; text-decoration: none;}
a:link img {border: none; }
ul,ol {}
li {}

/*TRANSISTIONS*/
#logo img, .linkedin img, .more-link{transition: all 1s; -moz-transition: all 1s; -webkit-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s;}
nav li a, #features>div  {transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s;}
.linkedin img:hover {opacity: 0.8;}

/* Header Elements  */
header {background: #424242;}
#logo {padding: 25px 0 20px; float: left;}
#logo img:hover {opacity: 0.8;}
#header-right {padding-top: 10px;}
.linkedin {float: right; padding: 8px;}

#searchform {width: 120px;font-size: 9px;background: #eee;margin-left: 0px;	padding: 3px 5px;	margin-top: 5px;height: 17px;float: right;border-radius: 5px;}
#searchform img {float: left;}
#searchform input[type=submit] { }
#searchform input[type=text] { background: none; border: none; font-style: italic; font-size: 15px; color: #666;width: 90px; margin-top: -1px; margin-left: 10px;}
#header-bottom { background: url(images/header-bg.jpg) repeat-x; height: 8px; clear: both;}

#banner {clear: both; background: url(images/banner-main-full.jpg) no-repeat;
	background-position: center top;      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; height: 500px; width: 100%; margin-top: -5px}
#banner #wrapper h2 {color: #333; width: 55%; padding-top: 130px;text-transform: uppercase;font-weight: 700; font-size: 70px; line-height: 70px; letter-spacing: -1px; }
.banner-title {}
#banner p {width: 50%;}
.more-link {border: 2px solid #6FA405; display: inline-block; background: #f2f2f2;margin-top: 10px;}
.more-link img {float: left; margin: -5px 0 0 -30px; padding-right: 10px;}
.more-link a {padding: 14px 15px ;display: block; text-transform: uppercase; font-size: 17px;text-decoration: none;color: #333;}
.more-link:hover {background: #f2f2f2; margin-left: 10px;}

/* Sub Page Banner  */
#banner-sub {margin-top: 20px; margin-bottom: -70px;}
#banner-sub-wrap {width: 960px; margin: 0 auto;}
#banner-sub img {width: 100%; height: auto;}
#banner-sub h1 {font-size: 70px; font-weight: 100; border: none; text-transform: uppercase; position: relative;color: #333; top: -170px; left: 30px; width: 60%;}

/* Main Menu  */
nav {float: right;	width: 500px;  padding: 0; margin: 15px -20px 0 0;}
nav ul {list-style: none; text-align: right; padding: 0; margin: 0px;}
nav li {list-style: none;  display: inline-block; padding: 0px; margin: 0px; border-right: 1px solid #eee;}
nav li a {color: #eee;	float: left; font-weight: 500;	margin: 0px 0 0 -4px; font-size: 14px; padding: 3px 20px; text-decoration: none;	text-transform: none;}
nav li a:hover {color: #6FA405 }
nav li:nth-child(5) {border-right: none;}
/* Flyout Menu  */
nav li ul{display:none; position:absolute; width:140px; height: auto; margin: 15px 0px; padding-top: 14px; z-index:200;}
nav li:hover ul{display:block;}
nav li li { display:block; float:none; margin: 0; padding: 0;}
nav li ul a{color: #333;  display:block; font-size:14px; font-weight:normal; padding:5px 10px; text-align:left; margin: 0px; height: auto; line-height: 16px; text-transform: none; background-color: #999; width: 120px; }
nav li:hover li a {background-image: none; color: #000; border: none; }
nav li:hover li a:hover {color: #000; background-color:#888;}
nav li.current_page_item a{ color: #6FA405; font-weight: bold; text-decoration: none;}
nav li.current_page_item ul a{background-color: #777;font-weight:normal;}

/* 3rd Level Flyout Menu  */
nav li li a {float: none;margin: 0px;}
nav li li li a {background: #222;}
nav li li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 140px;margin: -24px 0 0 134px;padding: 0px; }
nav li:hover ul ul {left: -999em;}
nav li li:hover ul {left: auto;}

nav li.current_page_item a{}
nav li.current_page_item ul a{}

/* Standard Page Elements  */

#wrapper h1 {font-size: 36px; font-weight: 100; border-bottom: 1px solid #ccc;}
#wrapper h2 {font-size: 35px; line-height: auto; margin: 5px 0; padding: 5px 0; color: #6FA405; text-transform: uppercase;}
#wrapper h2 a {text-decoration:none;} #wrapper h2 a:hover {}
#wrapper h3 {font-size: 35px; font-weight: 100; padding: 0 0 3px; margin: 0 0 12px; border-bottom: 1px solid #6FA405;} 
#wrapper h3 a {} #wrapper h3 a:hover {}
#wrapper h4 {font-size: 20px;margin:15px 0 5px;color: #333;}
#wrapper h5 {font-size: 20px; margin: 5px 0; color: #6FA405;}
#wrapper h6 {font-size: 16px; border-bottom: 1px solid #6FA405;color: #333}
#wrapper p {color: #333;}
#wrapper ul, #wrapper ol {margin: 0 0 10px 20px; padding: 0;}
#wrapper li {padding-bottom: 6px; color: #333; font-size: 14px; }
#wrapper blockquote {border-left: 3px solid #6FA405; margin: 20px 0 40px; padding: 0 0 0 20px; font-size: 18px; font-style: italic;}

section {clear:both; float: left; width: 70%; margin: 0; padding: 0;}

article {}
article h2 {}
article h2 a {text-decoration:none;}
article h2 a:hover {text-decoration: underline;}

#clear {clear: both;}
#blog-top {height: 40px;}
#wrapper #comments {font-size: 25px;}
#wrapper #respond h3 {font-size: 25px;}
/* Feature - 3 Column  */
#features {margin-top: -40px; }
#features>div {width: 32%; float: left; text-align: center; background: #ccc; padding: 0px 0%; margin: 10px 2% 40px 0; }
#features>div:nth-of-type(3) {margin-right: 0;}
#features h2 {background: #6FA405;margin: 0; padding: 10px 0 50px}
#features a>h2 {color: #333; text-transform: uppercase; font-weight: 500; }
#features img {margin-top: -40px; margin-bottom: 10px;}
#features p {padding: 10px 4%; font-size: 15px;}
#features a>p {color: #333; text-decoration: none;}
#features a {text-decoration: none;}
#features>div:hover {margin-top: 5px;}

.collapseomatic {display: block; margin-bottom: 10px; font-size: 16px; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
#faq .collapseomatic {border-bottom: 0px; font-size: 20px; color: #106699; padding-left: 20px;}
#faq .collapseomatic_content {border-bottom: 1px solid #ccc;margin-bottom: 20px; margin-top: -10px;}

/* Tabs Styles */
#wrapper #tabs {margin-left: 0px;}
ul.tabs {
    list-style: none;
    margin: 0px; padding: 0 0 0 10px;
    border-bottom: 1px solid #9dbe49;  font-weight: bold;
}
ul.tabs li {display: inline-block; margin: 0 0 0 5px;}
ul.tabs a {
    display: block;
    position: relative;
    top: 1px;font-size: 20px;
    padding: 9px 20px; margin-bottom: -6px;
    border: 1px solid transparent;
    text-decoration: none;
}
ul.tabs a.active {
    border-color: #9dbe49;
    border-bottom-color: #e8f0d5; background:#e8f0d5; 
}
section.tab {
    display: none;
    margin-bottom: 15px;
    padding: 15px 0;
}
section.tab li {margin-left: 10px; padding: 0; margin-bottom: 0;font-weight: bold;}
section.tab li li {font-weight: normal; list-style: none; margin: 0; padding: 5px 0 ;}
section.tab.active {display: block;}

#disclaimer {font-size: 13px; border-top: 1px solid #ccc;}
#disclaimer h4 {font-size: 15px;}

/* Sidebar Elements  */
aside {float: right; width: 25%; margin: 0px 0; }

#feature-box  {width: 100%; float: left; text-align: center; background: #ccc; padding: 0px 0% 15px; margin: 0px 0 40px; }
#feature-box h2 {background: #6FA405;margin: 0; padding: 10px 0 50px}
#feature-box a>h2 {color: #333; text-transform: uppercase; font-weight: 500; }
#feature-box img {margin-top: -40px; margin-bottom: 10px;}
#feature-box p {padding: 10px 4%;}
#feature-box a>p {color: #333; text-decoration: none;}
#feature-box a {text-decoration: none;}
#feature-box:hover {opacity: 1;}

#wrapper aside h2 {font-size: 20px; line-height: 20px;}
#wrapper aside ul {margin: 0 0 0 20px; padding: 0;}
#wrapper aside p {font-size: 13px;}
#wrapper aside li {margin: 0; padding: 0 0 7px 0;}
#wrapper aside h6 {padding: 5px 2% 10px; width: 96%; border: none;}
/* Footer Elements  */
footer {clear:both; background: #424242; color: #ddd; font-size: 13px;color: #ddd;}
footer #wrapper {background: url(images/ct-footer.png) no-repeat right bottom;}

footer h2 {}
footer h3 {}
footer #wrapper p {line-height: 19px;color: #ddd;}
footer .qt {padding-bottom: 90px;}
footer .copyright {padding-top: 50px;}
footer a {color: #ddd; text-decoration: none;}
footer a:hover {text-decoration: underline; color: #ddd;}

footer ul {}
footer li {}
footer li a {}
footer li a:hover {}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 1024px or less */
@media screen and (max-width: 1024px) {
header {}
#logo {width: 40%;}
#logo img {width: 100%; height: auto;}
#wrapper {width: 96%}
nav {width: 58%;  margin-right: 4px;}
nav li a {padding: 3px 12px; font-size: 13px;margin-top: -4px}
#banner-sub {margin-top: 0;}
#banner-sub-wrap {width: 100%;}
section {}
aside {}
ul.tabs a {
    display: block;
    position: relative;
    top: 1px;font-size: 15px;
    padding: 9px 10px; margin-bottom: -6px;
    border: 1px solid transparent;
    text-decoration: none;
}
footer {}
footer #wrapper { background-size:50%;}
}

/* for 800px or less for tilted playbook and ipad*/
@media screen and (max-width: 800px) {
header {}

#wrapper {}
#logo {width: 70%;} 
#banner #wrapper h2 {padding-top: 20px; font-size: 40px; line-height: 40px; width: 60%;}
#banner #wrapper p {font-size: 13px; width: 60%;}
.more-link {margin-left: 10px;}
#banner-sub h1 {top: -150px; width: 90%;}
nav {display: none;}
#searchform {display: none;}
.linkedin {display: none;}
#banner {clear: both; background: url(images/banner-main-full.jpg) no-repeat;
	background-position: center top;      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; height: 400px; width: 100%; margin-top: -10px}
#banner-sub {margin-top: 0px; margin-bottom: -50px;}
#banner-sub h1 {font-size: 50px; font-weight: 100; text-transform: uppercase; position: relative;color: #333; top: -110px; left: 30px; width: 60%;}
#features {margin-top: 0px; }
  #features>div {width: 100%; margin-bottom: 20px; margin: 10px 0 20px 0;}
section {}
aside {}
footer {}

}

/* for 540px or less */
@media screen and (max-width: 540px) {
header {}
#wrapper {}
section {width: 100%;}
aside {width: 100%; float: left;}
#banner-sub {margin-bottom: 10px;}
#banner-sub h1 {font-size: 40px; top: 0px; left:0; width: 60%; margin-left: 7px;}

footer {}
#banner #wrapper h2 {width: 70%; font-size: 30px; line-height: 30px;}
#banner #wrapper p {width: 70%;}
#banner {clear: both; background: url(images/banner-main-full.jpg) no-repeat;
	background-position: center top;      -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; height: 340px; width: 100%; margin-top: -10px}
}


/* Begin other CSS elements */

.wp-paginate {}
.wp-paginate li {}
.wp-paginate a {background:#ddd; border:1px solid #ccc; color:#666; margin-right:4px; padding:3px 6px; text-align:center; text-decoration:none;}
.wp-paginate a:hover, .wp-paginate a:active {background:#ccc; color:#888;}
.wp-paginate .title {color:#555; margin-right:4px;}
.wp-paginate .gap {}
.wp-paginate .current {color:#fff; background:#333; border:1px solid #89adcf; margin-right:4px; padding:3px 6px;}
.wp-paginate .page {}
.wp-paginate .prev, .wp-paginate .next {}

.wpcf7-text {padding: 10px;}
span.wpcf7-list-item {
margin-left: 0.5em;
display: block;
}

.meta {padding: 10px 0 20px}
.postmetadata {margin: 20px 0;}

form { }
input[type=text] { }
input[type=text]:focus {}
input[type=submit] {padding:5px 15px; background:#ccc; border:0 none;-webkit-border-radius: 5px; border-radius: 5px; }
textarea { }

blockquote {margin-left: 20px; margin-bottom: 15px;}
.alignleft  {float: left; margin-right: 10px;}
.alignright {float: right; margin-left: 10px;}

.do-not-print { display: none; }
#comments { page-break-before: always; }
table {}
th { border-bottom: none }
td { border-bottom: none; }
th, td {padding: 4px;}
.wp-caption { background: #fff; margin-bottom: 0px; text-align: center; border: 1px solid #ddd; padding-top: 5px;padding-bottom: 0px; font-size: 12px;}
thead { display: table-header-group; }
tr { page-break-inside: avoid; }
	
#respond {margin-top: 30px;}
#respond div {padding-bottom: 10px;}	
	
ol.commentlist { list-style: none; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor { }
ol.commentlist li.byuser { }
ol.commentlist li.comment-author-admin { }
ol.commentlist li.comment { border-bottom: 1px dotted #666; padding: 10px; }
ol.commentlist li.comment div.comment-author { }
ol.commentlist li.comment div.vcard { }
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.vcard cite.fn a.url { }
ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; }
ol.commentlist li.comment div.vcard img.avatar-32 { }
ol.commentlist li.comment div.vcard img.photo { }
ol.commentlist li.comment div.vcard span.says { }
ol.commentlist li.comment div.commentmetadata { }
ol.commentlist li.comment div.comment-meta { font-size: 10px; }
ol.commentlist li.comment div.comment-meta a { color: #ccc; }
ol.commentlist li.comment p { }
ol.commentlist li.comment ul { }
ol.commentlist li.comment div.reply { font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; }
ol.commentlist li.comment ul.children li { }
ol.commentlist li.comment ul.children li.alt { }
ol.commentlist li.comment ul.children li.bypostauthor { }
ol.commentlist li.comment ul.children li.byuser { }
ol.commentlist li.comment ul.children li.comment { }
ol.commentlist li.comment ul.children li.comment-author-admin { }
ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-5 { }
ol.commentlist li.comment ul.children li.odd { }
ol.commentlist li.even { background: #fff; }
ol.commentlist li.odd { background: #f6f6f6; }
ol.commentlist li.parent { border-left: 5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even { }
ol.commentlist li.thread-odd { }