/*
Theme Name: On The Wight Mobile
Theme URI: http://onthewight.com/
Description: On The Wight mobile theme
Author: Joseph Moore
Author URI: http://www.josephmoore.co.uk/

*/

* { margin: 0px; padding: 0px; }
.cf:after,
.menu:after { content: ""; display: table; clear: both; }

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

body { margin: 0px; padding-bottom: 80px; background: #ffffff; text-align: center; color: #555555; font-family: Arial,Helvetica,sans-serif; font-size: 14px; line-height: 18px; word-wrap: break-word; }

h1 { font-size: 28px; line-height: 30px; font-weight: bold; margin-bottom: 10px; }
h2 { font-size: 24px; line-height: 28px; font-weight: normal; margin-bottom: 10px; }
h3 { font-size: 18px; line-height: 22px; font-weight: normal; margin-bottom: 10px; }
h4 { font-size: 14px; line-height: 18px; font-weight: normal; margin-bottom: 10px; }
ul,
ol { margin: 0px 0px 10px 40px; }
li { font-size: 18px; line-height: 1.65;  }
p { font-size: 18px; line-height: 1.65; margin-bottom: 10px; }
a { color: #455FB3; text-decoration: none; }
a:hover,
a:active { text-decoration: underline; }
hr { height: 0px; border: none; border-top: 1px dashed #555555; margin-bottom: 10px; }
blockquote { background-color: #F6F6F6; border-left: 4px solid #CCCCCC; color: #555555; font-style: normal; margin: 20px 0 20px 20px; padding: 10px 10px 1px; }
blockquote p { font-size: 16px; }
img { max-width: 100%; height: auto; }

body > header { display: block; background: #F3860F; }
body > header #logo { float: left; margin: 8px 0 8px 2%; }
body > header #logo img { display: block; }

body > header nav#menu-triggers { float: right; }
body > header nav#menu-triggers ul { list-style: none; margin: 0px; padding: 0px; }
body > header nav#menu-triggers ul li { float: left; line-height: 56px; padding: 0px 20px; color: #ffffff; font-family: 'BebasNeue',sans-serif; font-size: 24px; border-left: 1px solid #ffffff; }
body > header nav#menu-triggers ul li.active { color: #666666; background: #ffffff; }
body > header nav#menu-triggers ul li .header-menu { vertical-align: middle; height: 25px; width: 25px; background: url('images/menu.png') no-repeat left top; display: inline-block; }
body > header nav#menu-triggers ul li.active .header-menu { background: url('images/menu.png') no-repeat left bottom; }

body > header #main-menus { clear: both; border-top: 1px solid #ffffff; border-bottom: 2px solid #ffaa44; text-align: left; background: #ffffff; }
body > header #main-menus > nav { display: none; }
body > header #main-menus > nav ul { list-style: none; margin: 0px; padding: 0px; }
body > header #main-menus > nav ul li { border-top: 1px solid #dddddd; }
body > header #main-menus > nav ul li:hover,
body > header #main-menus > nav ul li:active { background: #f2f2f2; }
body > header #main-menus > nav ul li a { color: #666666; text-decoration: none; display: block; line-height: 40px; padding: 4px 2% 0px 2%; margin: 0px; font-family: 'BebasNeue',sans-serif; font-size: 28px; }
body > header #main-menus > nav ul li a:hover,
body > header #main-menus > nav ul li a:active { color: #444444; text-decoration: none; }
body > header #main-menus > nav > div > ul > li:nth-child(6) > a { font-style: italic; }
body > header #main-menus > nav > div > ul > li:nth-child(n+6) { float: left; width: 50%; }
body > header #main-menus > nav > div > ul > li:nth-child(n+6) > a { font-size: 22px; line-height: 32px; padding: 4px 4% 0px 4%; }
body > header #main-menus > nav > div > ul > li:nth-child(n+18) { width: 33.3%; }
body > header #main-menus > nav > div > ul > li:nth-child(n+18) > a { font-size: 16px; line-height: 28px; padding: 4px 6% 0px 6%; }
body > header #main-menus > nav > div > ul > li:first-child,
body > header #main-menus > nav > div > ul > li:nth-child(6),
body > header #main-menus > nav > div > ul > li:nth-child(7),
body > header #main-menus > nav > div > ul > li:nth-child(12),
body > header #main-menus > nav > div > ul > li:nth-child(13),
body > header #main-menus > nav > div > ul > li:nth-child(18),
body > header #main-menus > nav > div > ul > li:nth-child(19),
body > header #main-menus > nav > div > ul > li:nth-child(20) { border-top: 3px solid #dddddd; }

body > header #main-menus > nav #searchform { padding: 6px 2%; }

aside.sidebar { display: block; }
aside.sidebar ul { list-style: none; margin: 0px; }
aside.sidebar ul li { margin: 0px 0px 10px 0px; }
aside.sidebar ul li:first-child { margin-top: 5px; }

#searchform { position: relative; }
#searchform label { display: none; }
#searchform input[type="text"] { display: block; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid #777777; height: 28px; line-height: 28px; padding: 0px 30px 0px 5px; }
#searchform input[type="submit"] { position: absolute; right: 10px; top: 50%; margin-top: -7px; display: block; background: url('images/icon-search.png'); height: 14px; width: 14px; border: none; font-size: 0px; }

.article,
.listing { text-align: left; }
.listing .description { padding: 0px 0px 5px 0px; margin: 0px 2%; position: relative; overflow: hidden; }
.listing .description h2 { display: none; }
.listing .description .read-more,
.listing .description .read-less { position: absolute; bottom: 0px; width: 100%; text-align: center; background: linear-gradient(transparent, #ffffff 50%); padding: 30px 0px 15px; }
.listing .description .read-less { padding-top: none; background: none; }
.listing > img { display: block; width: 100%; }
.listing article { border-top: 1px dotted #999999; padding: 15px 0px 5px 0px; margin: 0px 2%; }
.listing article:first-of-type { border-top: none; padding-top: 10px; }
.listing article img { float: left; margin: 0px 10px 0px 0px; height: 75px; width: 75px; }
.listing h1 { font-family: 'BebasNeue',sans-serif; padding: 15px 2% 10px 2%; margin-bottom: 0px; font-size: 24px; font-weight: normal; }
.listing h2 { font-size: 22px; line-height: 1.1; margin-bottom: 3px; }
.listing .excerpt { font-size: 12px; }
.listing .excerpt p { font-size: 16px; line-height: 1.2; }
.listing .paging { font-size: 20px; }

article.post > header { padding: 15px 2% 10px 2%; }
article.post > header small { display: block; font-size: 12px; line-height: 18px; }
article.post > header div.excerpt p { font-style: italic; font-size: 16px; margin-bottom: 1px; line-height: 18px; }
article.post .content,
article.page .content { padding: 15px 2%; }
article.post .content *,
article.page .content * { max-width: 100%; }
article.post img.alignleft,
article.page img.alignleft { float: left; margin: 0px 20px 5px 0px; }
article.post img.alignright,
article.page img.alignright { float: right; margin: 0px 0px 5px 20px; }
article.post img.aligncenter,
article.page img.aligncenter { display: block; margin: 0px auto; }
article.post .post-date { font-size: 12px; font-style: italic; color: #999999; }

#comments { padding: 15px 2%; }
#comments h2 { font-family: 'BebasNeue',sans-serif; font-size: 26px; }
#comments .commentlist { list-style: none; margin: 0px; padding: 0px; }
#comments .commentlist ul { list-style: none; margin: 0px 0px 0px 30px; }
#comments .commentlist li { margin-bottom: 15px; }
#comments .commentlist li time { display: block; color: #808080; font-size: 9px; line-height: 12px; margin-bottom: 10px; }
#comments .commentlist li .comment-reply-link { color: #808080; font-size: 20px; font-weight: bold; text-decoration: none; }
#comments .commentlist li .comment-report { float: right; margin-left: 5px; }
#comments .comment-report { font-size: 10px; }
#comments .comment-report { font-size: 12px; overflow: hidden; }
#comments .comment-report textarea { width: 100%; }
#comments .comment-report input[type="button"] { float: right; }

#respond { padding: 15px 2%; }
#comments #respond { padding: 15px 0px 0px 0px; }
#respond h2 { font-family: 'BebasNeue',sans-serif; }
#respond #commentform label { display: block; font-size: 14px; font-family: Arial,Helvetica,sans-serif; padding-bottom: 5px; }
#respond #commentform input[type=text] { display: block; box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; margin-bottom: 10px; padding: 8px; font-size: 14px; line-height: 18px; border: 1px solid #DDDDDD; color: #555555; }
#respond #commentform #comment { box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; height: 130px; margin-bottom: 10px; padding: 8px; border: 1px solid #DDDDDD; font-family: Arial,Helvetica,sans-serif; font-size: 14px; color: #555555; }
#respond #commentform #submit { display: inline-block; font-family: Arial,Helvetica,sans-serif; font-size: 14px; height: 38px; padding: 0px 10px; border: none; cursor: pointer; background: #F26522; color: #ffffff; }
#respond #commentform .subscribe-to-comments { margin-top: 10px; }
#respond #commentform .subscribe-to-comments label { display: inline; }

nav.paging { }
nav.paging a { display: block; padding: 10px 2%; background: #f2f2f2; margin-bottom: 5px; }
nav.paging a[rel="prev"]:before,
nav.paging a[rel="next"]:before { text-transform: uppercase; color: #555555; font-weight: bold; font-size: 22px; display: block; }
nav.paging a[rel="prev"]:before { content: 'Previous article'; }
nav.paging a[rel="next"]:before { content: 'Next article'; }

.escn-inner { width: 100%; }
.escn-inner > div { width: 100%; -moz-box-sizing: border-box; -wekbit-box-sizing: border-box; box-sizing: border-box; margin: 0px; padding: 0px 2%; }
.escn-links a { display: inline; }

div.isle-of-wight-news { float: right; margin: 0px 0px 0px 20px; }
div.isle-of-wight-news img { width: 90px; height: auto; }
div.sponsored-feature { color: #f3860f; }
div.opinion-piece { color: #f3860f; }

.social-links { list-style: none; margin: -30px 0px 0px 0px; padding: 0px; text-align: center; width: 100%; }
.social-links.bottom { position: fixed; bottom: 2px; z-index: 100; } /* z-index to sit in front of map plugin */
.social-links li { margin: 0px 0px 0px 10px; padding: 0px; background: url(images/icon-social.png) no-repeat; display: inline-block; height: 48px; width: 48px; border-radius: 27px; border: 3px solid #ffffff; }
.social-links li:first-child { margin-left: 0px; }
.social-links li.facebook { background-position: 0px 0px; background-color: #39599f; }
.social-links li.twitter { background-position: 0px -48px; background-color: #45b0e3; }
.social-links li.email { background-position: 0px -96px; background-color: #b2b2b2; }
.social-links li.whatsapp { background-position: 0px -144px; background-color: #4fc338; }
.social-links li a { display: inline-block; height: 48px; width: 48px; }

.widget { text-align: center; }
.widget > ul { list-style: none; margin: 10px auto; padding: 0px; }

/* newsletter signup */
.widget input[type="text"] { border: none; box-sizing: border-box; margin: 0; padding: 8px; background-color: #ffcc66; color: #333; width: 190px; }
.widget input[type="submit"] { padding: 10px; background: #f26522; border: none; color: #fff; cursor: pointer; margin: 0; padding: 8px; }