/*
Theme Name: Senator Thahn Hai Ngo
Version: 1.0
Author: ForceFive Media
Author URI: http://www.forcefive.ca
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/layout.css";
@import "css/fontello.css";

body, html { min-height: 100%; min-width: 100%; width: 100%; }

body { background: #222222; }

#wrapper { background: #f1f1f1 url(images/body-bg.jpg) repeat-x center -100px; padding: 0 0 30px 0; min-width: 1200px; width: 100%; }
body.home #wrapper { background-position: center top; }

#main { margin: 0 auto;}

#content { padding: 30px 0px; border-top: 1px solid #cacaca; }

.content { width: 1020px; margin: 0 auto; }

#page-left { width: 670px; float: left; }
#page-right { width: 330px; float: right; }
#page-full {  }

.bucket { padding: 15px; }

.p5 { padding: 5px; }.p10 { padding: 10px; }.p15 { padding: 15px; }.p20 { padding: 20px; } .p25 { padding: 25px; } .p30 { padding: 30px; }

.box { float: left; margin: 0 10px; }
.box.last { margin: 0 0 0 0; }
.box.w12{width:490px;}.box.w13{width:320px;}.box.w14{width:235px;}.box.w16{width:150px;}.box.w23{width:660px;}.box.w34{width:745px;}

/*------------- TYPE ------------------*/

body { font-family: 'Roboto', Tahoma, Arial, sans-serif; font-weight: 300; font-size: 14px; }

#main ul.menu li a,
h1, h2, h3, h4, th { font-family: 'Roboto Condensed', Futura, "Century Gothic", "Apple Gothic", sans-serif; font-weight: 400; text-transform: uppercase; }

h1 { font-size: 30px; margin: 0 0 20px 0; }
h2 { font-size: 24px; margin: 0 0 10px 0;  }
h3 { font-size: 18px; margin: 0 0 10px 0; }
h4 { font-size: 14px; margin: 0 0 5px 0; }
th { font-size: 18px; }

a { color: #9c1928; text-decoration: none; }
a:hover { color: black; }

input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="tel"], textarea { background: #fff; border: 0 none; padding: 7px;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; }
input[type="text"]:focus, textarea:focus { background: white; border: 0 none; }

a.btn, input[type="submit"] { display: inline-block; background: #9c1928; color: white; text-decoration: none; padding: 5px 10px 7px 10px; border: 0 none; font-weight: bold;
-moz-border-radius: 2px; -webkit-border-radius: 2px; -khtml-border-radius: 2px; border-radius: 2px; }
a.btn:hover, input[type="submit"]:hover { background: gray; }

p { margin: 0 0 1.5em 0; line-height: 1.4; }

#content ul li { margin: 0 0 5px 0; line-height: 1.4; list-style-type: disc; }
#content ul, #content ol { padding: 0 0 0 30px; margin: 0 0 1.5em 0; }
#content ol li { margin: 0 0 5px 0; line-height: 1.4; list-style-type: decimal; }

#content .box.w13 ul, #content .box.w14 ul, #content .box.w12 ul { padding: 0; }
#content .box.w13 ul li, #content .box.w14 ul li, #content .box.w12 ul li { list-style-type: none; }

img.alignleft { margin: 0 15px 10px 0; }
img.alignright { margin: 0 0 10px 15px; }
img.aligncenter { display: block; margin: 0 auto 3px auto; }

#content img.size-large , #content img.attachment-large { max-width: 100%; height: auto; margin: 0 0 20px 0; }

table { margin: 0 0 12px 0; }
thead { background: #f6f6f6; }
th { padding: 5px; border: 1px solid white; }
td { padding: 5px; vertical-align: top; }

blockquote { padding: 10px; border: 2px solid #dedede; margin: 0 0 5px 0;
-moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; }
blockquote em { font-size: 12px; color: gray; }

hr { border: 0 none; margin: 30px 0; border-bottom: 1px solid #ddd; }

.wpcf7-list-item { display: block; }


/*------------- HEADER ------------------*/

#header-wrap { background: #fff; }
header { position: relative; padding: 20px 0; }

header a#header-logo { display: block; float: left; font-family: 'Roboto Condensed', Futura, "Century Gothic", "Apple Gothic", sans-serif; font-weight: 400; text-transform: uppercase; font-size: 40px; color: black; }

.menu-main-nav-container, .menu-main-nav-french-container { position: relative; z-index: 100; }
#main ul.menu { text-align: center; }
#main ul.menu > li { display: inline-block; position: relative; margin-bottom: 10px; }
#main ul.menu > li > a { display: block; font-size: 18px; text-decoration: none; padding: 0 15px; height: 30px; line-height: 30px; }
/* #main ul.menu > li:first-child > a { border-left: 1px solid black; } */
#main ul.menu > li:hover > a { color: black; background: white; }
#main ul.menu > li.current_page_item > a, #main ul.menu > li.current_page_ancestor > a  { color: black; }

#main ul.menu > li > ul { display: none; position: absolute; width: 210px; left: 0px; top: 30px; background: white; z-index: 50; }
#main ul.menu > li:hover > ul { display: block; }
#main ul.menu > li > ul > li { display: block; position: relative; }
#main ul.menu li > ul > li > a { display: block; font-size: 14px; line-height: normal; padding: 10px 15px; }
#main ul.menu li > ul > li a:hover { background: #f6f6f6; }

#main ul.menu > li > ul > li > ul { position: relative; }
#main ul.menu > li > ul > li > ul > li > a { color: gray; padding: 5px 10px; text-indent: 10px; }

#main .menu-main-nav-french0-container ul.menu > li > a { font-size: 16px; }

#header-social { float: right; position: relative; top: 10px; }
#header-social a.social { background: #1a1a1a; color: #c5c5c5; font-size: 16px; width: 30px; height: 30px; line-height: 30px; }
#header-social a.social:hover { background: #9c1928; color: white; }

#header_language_list { float: right; position: relative; top: 15px; }
#header_language_list ul li { display: inline; padding: 0 10px; font-weight: bold; border-right: 1px solid black; }
#header_language_list ul li:last-child { border: 0 none; }

.search-box { float: right; margin: 0 15px; position: relative; top: 12px; }
.search-box input.search-field { border: 0 none; background: #f1f0f0; padding: 7px 10px; width: 120px;
-moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; -khtml-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; }
span.submit-btn { display: inline-block; background: #9c1928; border: 0 none; height: 27px; line-height: 27px; width: 30px; color: white; position: relative; text-align: center;
-moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; -khtml-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; }
.search-box input[type="submit"] { position: absolute; left: 0px; top: 0px; width: 30px; height: 27px; background: none; }
.search-box input[type="submit"].submit-btn:hover { background-color: black; }

/*------------- FOOTER ------------------*/

#footer-wrap {  }
footer { padding: 30px 0; font-size: 12px; color: white; }

footer a { color: white; }
footer a:hover { color: #999; }
footer ul { margin: 0; padding: 0; }
footer p { margin: 0 0 5px 0; }

footer .w23 .w14 { margin: 0 20px 0 0; width: 200px; }
footer .w23 .w14:last-child { margin: 0; }
footer .w13 { text-align: center; }
footer .w13 img { margin: 0 0 20px 0; }

.menu-footer-nav-container, .menu-footer-nav-french0-container { margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 1px solid #666666; }
footer ul.menu { }
footer ul.menu li { display: inline; }
footer ul.menu li a { margin: 0 10px 0 0; }
footer ul.menu li a:hover {  }

p#footer-copy { font-size: 10px; margin: 0 0 10px 0; }

a.social { display: inline-block; width: 30px; height: 30px; line-height: 30px; margin: 0 5px 0 0; background-color: #9c1928; color: white; font-size: 14px; text-align: center;
-moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; }
a.social:hover { background-color: #fff; color: #9c1928; }


/*------------- POSTS ------------------*/

.post { margin: 0 0 40px 0; }
.post h3 {  }
.post-footer { font-size: 10px; margin: 10px 0 0 0; padding: 5px; border-top: 1px solid #ddd; }
.pf-date { color: #666; }

.post .wp-post-image { width: 200px; height: auto; }

.post.testi { padding: 0 0 0 40px; position: relative; }
.post.testi:before { content: "\201D"; font-size: 60px; color: #ccc; position: absolute; left: 0px; top: -10px; }

ol.commentlist { padding: 0 !important; }
ol.commentlist li { list-style-type: none !important; padding: 5px; border: 1px solid #eee; margin: 0 0 5px 0; position: relative; }
.comment-meta { position: absolute; right: 10px; top: 30px; font-size: 11px;  }
.comment-author { background: #f6f6f6; padding: 5px; margin: 0 0 10px 0; font-size: 18px; color: gray; }

#respond { margin: 30px 0 0 0; }

.post-type-archive-media-item .post, .single-media-item #page-full { text-align: justify; }

.addthis_toolbox br { display: none; }

/*------------- SIDEBAR ------------------*/

#content ul.xoxo { padding: 0; margin: 0; }
#content ul.xoxo li { list-style-type: none; }
#content ul.xoxo > li { margin: 0 0 25px 0; }
#content ul.xoxo > li > h2 { margin: 0 0 10px 0; font-size: 14pt; }
#content ul.xoxo > li > ul { padding: 0; }
#content ul.xoxo > li > ul > li {  }

#content ul.xoxo > li#flickrrss img { width: auto; height: 150px; }
#content ul.xoxo > li#flickrrss a.flickrthumb { display: block; width: 150px; height: 150px; overflow: hidden; float: left; margin: 0 10px 10px 0; }

ul#sub-pages {  }
ul#sub-pages li, li.widget_categories ul li { margin: 0 0 2px 0; }
ul#sub-pages li a, li.widget_categories ul li a { display: block; background: #ffffff; padding: 7px; }
ul#sub-pages li a:hover, ul#sub-pages li.current_page_item a, li.widget_categories ul li a:hover, li.widget_categories ul li.current-cat a  { background: #9c1928; color: white; }

ul#side-videos li { position: relative; }
ul#side-videos li:before { position: absolute; top: 20px; right: 20px; color: white; font-size: 40px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5); }
ul#side-videos li img { width: 100%; height: auto; }
ul#side-videos li span { display: block; width: 100%; padding: 10px; background: rgba(0,0,0,0.75); color: white; position: absolute; left: 0px; bottom: 0px; box-sizing: border-box; -moz-box-sizing: border-box; }
ul#side-videos li span a { color: white; }
ul#side-videos li span a:hover { text-decoration: underline; }

.flickr-me-feed a.flickr-me-grid { width: 48% !important; margin: 1% !important; box-sizing: border-box !important; }

/*------------- HOME ------------------*/

#slider-wrap-wrap { position: relative; margin: 0 0 30px 0; }
#slider-wrap-wrap:after { position: absolute; left: -60px; bottom: -25px; content: url(images/slider-shadow.png); z-index: 1; }
#slider-wrap { height: 440px; overflow: hidden; border: 30px solid white; z-index: 10; background: white; }
.slide { height: 440px; width: 100%; background-position: center center; background-size: cover; }
.slide-text { background: url(images/trans-black.png); position: absolute; z-index: 10; left: 0px; bottom: 0px; color: white; padding: 20px 80px 50px 80px; width: 100%; font-size: 16px; box-sizing: border-box; }
.slide-text a.btn { padding: 15px 25px; font-size: 18px; display: block; float: right; }

#slider-nav { position: relative; z-index: 60; height: 60px; margin: -60px 0 0 0; text-align: center; }
#slider-nav a { display: inline-block; width: 15px; height: 15px; margin: 0 5px; text-indent: -9999px; background: white;
-moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; }
#slider-nav a.activeSlide { background: #9c1928; }
#slider-nav a:hover {  }
#slider-nav a:last-child { margin: 0; }

#slider-next, #slider-prev { display: block; width: 200px; height: 80px; line-height: 80px; font-size: 30px; position: absolute; top: 200px; text-align: center; background: black; background: rgba(0,0,0,0.75); z-index: 1; color: white; padding: 0 5px;
-moz-border-radius: 40px; -webkit-border-radius: 40px; -khtml-border-radius: 40px; border-radius: 40px; }
#slider-prev { left: -45px; text-align: left; }
#slider-next { right: -45px; text-align: right;   }
#slider-next:hover, #slider-prev:hover { cursor: pointer; background-color: #9c1928; }

#newsletter { padding: 0 0 30px 0; margin: 0 0 30px 0; border-bottom: 1px solid #cacaca; }
#newsletter h3 { display: inline; margin: 0 10px 10px 0; font-size: 24px; position: relative; top: 5px; }
.fr #newsletter h3 { display: block; }
#newsletter form { display: inline; }
#newsletter input { display: inline; margin: 0 10px 0 0; }
#newsletter input[type="text"] { width: 250px; }

#expense-report { padding: 20px 0 30px 0; border-top: 1px solid #cacaca; border-bottom: 1px solid #cacaca; }
#expense-report img { display: inline; position: relative; top: 10px; margin: 0 15px 0 0; }
#expense-report h3 { font-size: 26px; margin-bottom: 20px; }

ul.pdfs { padding: 0 !important; }
ul.pdfs li { list-style-type: none !important; }
ul.pdfs li a { font-size: 18px; text-transform: uppercase; font-weight: 700; }

ul.tweets li { margin-bottom: 15px !important; }
ul.tweets li p { margin-bottom: 5px; }

/*------------- PAGE ------------------*/

#page-banner-wrap { position: relative; }
#page-banner { height: 350px; position: relative; margin: 0 0 30px 0; background-size: cover; background-position: center center; border: 30px solid white; z-index: 10; }
#page-banner-wrap:after { position: absolute; left: -60px; bottom: -25px; content: url(images/slider-shadow.png); z-index: 1; }

/*------------- EVENTS ------------------*/

.em-events-search { margin: 0 0 20px 0; }
table.events-table { width: 100%; }


/*------------- GALLERY ------------------*/

a.flickr-thumb, a.gallery-thumb { display: block; float: left; margin: 0 15px 20px 0; }


/*------------- VIDEOS PAGE ------------------*/

.vid-slider-wrap { position: relative; }
.vid-slider { width: 940px; position: relative; left: 40px; }
.vid-slide { width: 940px; height: 220px; }
.vid-slide a { display: block; float: left; margin: 0 5px; width: 302px; height: 220px; overflow: hidden; position: relative; }
.vid-slide a img { display: block; width: 100%; height: auto; }
.vid-slide a span { display: block; box-sizing: border-box; -moz-box-sizing: border-box; padding: 7px; background: rgba(0,0,0,0.75); color: white; position: absolute; left: 0px; bottom: 0px; width: 100%; z-index: 10; }
.vid-slide a:before { position: absolute; top: 10px; right: 10px; color: white; font-size: 40px; text-shadow:0px 1px 3px rgba(0,0,0,0.5); }

span.vid-slider-arrow { display: block; position: absolute; top: 80px; width: 30px; height: 40px; text-align: center; line-height: 40px; color: white; background: #999; font-size: 30px; }
span.vid-slider-arrow:hover { background: #9c1928; cursor: pointer; }
span.vid-slider-arrow.right { right: 0px; }
span.vid-slider-arrow.left { left: 0px; }

a.btn.icon-youtube { display: block; width: 400px; font-size: 20px; padding: 15px 0; margin: 50px auto 0 auto; text-align: center; text-transform: uppercase; }
a.btn:before { font-size: 30px; }