| 1 |
/* (C) Copyright Bobbing Wide 2010-2014 |
| 2 |
|
| 3 |
The oik.css stylesheet provides the default formatting for the HTML generated by the oik plugin |
| 4 |
For oik version 1.17 and above this stylesheet is now optional. |
| 5 |
In oik version 2.1 the blueprint CSS grid class definitions have been extracted to a separate file. |
| 6 |
|
| 7 |
To read more about the oik.css file see: http://www.oik-plugins.com/oik-css |
| 8 |
|
| 9 |
*/ |
| 10 |
em, dfn {font-style:italic;} |
| 11 |
abbr, acronym {border-bottom:1px dotted #666;} |
| 12 |
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;} |
| 13 |
.large {font-size:1.4em;margin-bottom:0.25em;} |
| 14 |
.hide {display:none;} |
| 15 |
.quiet {color:#666;} |
| 16 |
.loud {color:#000;} |
| 17 |
.highlight {background:#ff0;} |
| 18 |
.added {background:#060;color:#fff;} |
| 19 |
.removed {background:#900;color:#fff;} |
| 20 |
.first {margin-left:0;padding-left:0;} |
| 21 |
.last {margin-right:0;padding-right:0;} |
| 22 |
.top {margin-top:0;padding-top:0;} |
| 23 |
.bottom {margin-bottom:0;padding-bottom:0;} |
| 24 |
|
| 25 |
|
| 26 |
form.bw_inline { display: inline;} |
| 27 |
form.bw_inline p {margin-bottom:0;} |
| 28 |
|
| 29 |
|
| 30 |
/** Use a new solution for the clearfix problem |
| 31 |
@link http://css-tricks.com/snippets/css/clear-fix/ |
| 32 |
to cater for Artisteer 4.0 themes which define .clearfix slightly differently |
| 33 |
*/ |
| 34 |
|
| 35 |
/* .clearfix:after, .container:after {content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;} */ |
| 36 |
/* .clearfix { display: block; } */ |
| 37 |
.group:after { |
| 38 |
content: ""; |
| 39 |
display: table; |
| 40 |
clear: both; |
| 41 |
} |
| 42 |
|
| 43 |
/* .clearfix, */ |
| 44 |
.container {display:block;} |
| 45 |
.clear {clear:both;} |
| 46 |
|
| 47 |
/* background image for the oik dashboard icon */ |
| 48 |
|
| 49 |
#toplevel_page_oik_menu .wp-menu-image { |
| 50 |
background: url( 'images/oik-icon.png' ) 0 90% no-repeat; } |
| 51 |
|
| 52 |
#toplevel_page_oik_menu.current .wp-menu-image, |
| 53 |
#toplevel_page_oik_menu.wp-has-current-submenu .wp-menu-image, |
| 54 |
#toplevel_page_oik_menu:hover .wp-menu-image { |
| 55 |
background-position: 0px 0px; |
| 56 |
} |
| 57 |
|
| 58 |
|
| 59 |
/* background image for the oik-types dashboard icon */ |
| 60 |
|
| 61 |
#toplevel_page_oik_types_menu .wp-menu-image { |
| 62 |
background: url( 'images/oik-icon.png' ) 0 90% no-repeat; } |
| 63 |
|
| 64 |
#toplevel_page_oik_types_menu.current .wp-menu-image, |
| 65 |
#toplevel_page_oik_types_menu.wp-has-current-submenu .wp-menu-image, |
| 66 |
#toplevel_page_oik_types_menu:hover .wp-menu-image { |
| 67 |
background-position: 0px 0px; |
| 68 |
} |
| 69 |
|
| 70 |
/* Class for styling the contact style button created using [bw_contact_button] */ |
| 71 |
a.bw_contact { } |
| 72 |
|
| 73 |
|
| 74 |
/* Classes for the [bw_block] shortcode to set the minimum height for a block |
| 75 |
e.g. |
| 76 |
[bw_block class="column span-6 bd-200"] |
| 77 |
If these are not sufficient you can add more to your custom stylesheet |
| 78 |
*/ |
| 79 |
div.bd-100 .art-blockcontent, .bd-100 { min-height: 100px; } |
| 80 |
div.bd-150 .art-blockcontent, .bd-150 { min-height: 150px; } |
| 81 |
div.bd-200 .art-blockcontent, .bd-200 { min-height: 200px; } |
| 82 |
div.bd-250 .art-blockcontent, .bd-250 { min-height: 250px; } |
| 83 |
div.bd-300 .art-blockcontent, .bd-300 { min-height: 300px; } |
| 84 |
div.bd-350 .art-blockcontent, .bd-350 { min-height: 350px; } |
| 85 |
div.bd-400 .art-blockcontent, .bd-400 { min-height: 400px; } |
| 86 |
div.bd-450 .art-blockcontent, .bd-450 { min-height: 450px; } |
| 87 |
div.bd-500 .art-blockcontent, .bd-500 { min-height: 500px; } |
| 88 |
div.bd-550 .art-blockcontent, .bd-550 { min-height: 550px; } |
| 89 |
|
| 90 |
/* Classes for the emergency telephone number - darkish red */ |
| 91 |
div.bw_emergency { color: #b53030 } |
| 92 |
|
| 93 |
/* For [bw_show_googlemap] */ |
| 94 |
#bw_map_canvas { height: 100%; min-height: 100% } |
| 95 |
#bw_map_canvas img { max-width: none; } |
| 96 |
|
| 97 |
/* For [bw_address] */ |
| 98 |
div.bw_address div.type { display: none; } |
| 99 |
|
| 100 |
/* disable the background on Mail Chimp's Email Format radio buttons */ |
| 101 |
div#mc_embed_signup ul li { background-image: none; } |
| 102 |
|
| 103 |
/* Make the custom header image fit inside the meta box */ |
| 104 |
img.bw-header-box { margin: 0 auto; position: relative; max-width: 100%; margin-top: 0; margin-bottom: 0; } |
| 105 |
|
| 106 |
/* If there is a menu called 'footer' in the footer then make it horizontal */ |
| 107 |
div.art-footer ul#menu-footer li { display: inline; text-transform: lowercase; } |
| 108 |
|
| 109 |
/* Styling for the "(C) Copyright company yearfrom-yearto" from [bw_copyright] */ |
| 110 |
span.bw_copyright { } |
| 111 |
|
| 112 |
|
| 113 |
ul.tick, ul.cross, ul.x { list-style: none; list-style-position: outside; padding-left: 0; } |
| 114 |
ul.tick li, li.tick { background: transparent url( 'images/green_tick_64x64.png' ) no-repeat; background-size: 16px 16px; padding-left: 2em; } |
| 115 |
ul.cross li, li.cross, .tick li.x { background: transparent url( 'images/red_x_64x64.png' ) no-repeat; background-size: auto 100%; padding-left: 2em; } |
| 116 |
|
| 117 |
|
| 118 |
/* For rules on using the PDF logo see "Adobe PDF file icon" in http://www.adobe.com/misc/linking.html */ |
| 119 |
a.bw_attachment[href*='.pdf'] { background: transparent url( 'images/pdficon_small.png' ) no-repeat; background-size: auto; padding-left: 32px; } |
| 120 |
div.noicon a[href*='.pdf'] { background-image: none; padding-left: 3px; } |
| 121 |
|
| 122 |
a.bw_portfolio { background: none; padding-left: 0px; } |
| 123 |
/* columns required %ages to use |
| 124 |
---------------- --------------- |
| 125 |
1 100 |
| 126 |
2 50% |
| 127 |
3 33% 66% |
| 128 |
4 25% 50% 75% |
| 129 |
5 20% 40% 60% 80% |
| 130 |
6 16% 33% 50% 66% 83% |
| 131 |
7 14.285714% |
| 132 |
*/ |
| 133 |
.w100pc { float: left; width: 100%; } |
| 134 |
.w90pc { float: left; width: 90%; } |
| 135 |
.w83pc { float: left; width: 83.3333333%; } |
| 136 |
.w80pc { float: left; width: 80%; } |
| 137 |
.w75pc { float: left; width: 75%; } |
| 138 |
.w70pc { float: left; width: 70%; } |
| 139 |
.w66pc { float: left; width: 66.6666667%; } |
| 140 |
.w60pc { float: left; width: 60%; } |
| 141 |
.w50pc { float: left; width: 50%; } |
| 142 |
.w40pc { float: left; width: 40%; } |
| 143 |
.w33pc { float: left; width: 33.3333333%; } |
| 144 |
.w30pc { float: left; width: 30%; } |
| 145 |
.w25pc { float: left; width: 25%; } |
| 146 |
.w20pc { float: left; width: 20%; } |
| 147 |
.w15pc { float: left; width: 15%; } |
| 148 |
.w16pc { float: left; width: 16.6666667%; } |
| 149 |
.w14pc { float: left; width: 14.285714%; } |
| 150 |
.w10pc { float: left; width: 10%; } |
| 151 |
|
| 152 |
/* Prevent images from going outside their bounding divs */ |
| 153 |
/* Does it matter what the class of the div is? Can't we do it for every image? */ |
| 154 |
div.art-block img, div.textwidget img { max-width: 100% } |
| 155 |
img { max-width: 100%; width: auto/9; /* Prevent stretching of full-size images in IE8 */ } |
| 156 |
div.nivo-slice img, div.nivo-box img { margin: 0px; max-width: none; } |
| 157 |
|
| 158 |
/* Fix for nested Artisteer blocks - see Support case 69871. |
| 159 |
Although it was Closed with a recommendation to use the following |
| 160 |
|
| 161 |
.art-blockcontent .art-blockheader, .art-blockcontent .art-blockcontent { z-index: 0; } |
| 162 |
I find that doesn't work for blocks in the content. |
| 163 |
So I'm using a slightly modified version of my original solution. |
| 164 |
|
| 165 |
.art-bar is needed to complete the RHS of the header bar for the box |
| 166 |
but we need to work at a lower level to ensure that the drop down of the horizontal menu appears |
| 167 |
|
| 168 |
.art-box is needed to complete the RHS of the content of the box |
| 169 |
|
| 170 |
2012/03/22 discovered that this can stop hmenu drop down items from appearing |
| 171 |
So I have removed my latest fix and added a new line for the |
| 172 |
blocks in body content |
| 173 |
|
| 174 |
*/ |
| 175 |
/* .art-box-body .art-bar { z-index: 0; } */ |
| 176 |
/* .art-box { z-index: 0; } */ |
| 177 |
/* .art-box-body .art-nav { z-index: 1; } */ |
| 178 |
/* .art-bar, .art-box { z-index: 0; } */ |
| 179 |
|
| 180 |
.art-blockcontent .art-blockheader, .art-blockcontent .art-blockcontent { z-index: 0; } |
| 181 |
.art-block-body .art-blockheader, .art-block-body .art-blockcontent { z-index: 0; } |
| 182 |
|
| 183 |
|
| 184 |
/* Default to no borders on tables used by [bw_squeeze] ( oik-squeeze plugin ) and [bw_contact_form] */ |
| 185 |
.bw_squeeze td { border: none; } |
| 186 |
.bw_contact_form td { border: none;} |
| 187 |
|
| 188 |
/* Styling for the bw_wtf shortcode */ |
| 189 |
div.bw_wtf p { font-weight: bold; } |
| 190 |
p.bw_wtf { font-family: Courier, Monospace; } |
| 191 |
|
| 192 |
/* CSS for responsive [bw_video] shortcode when width and height are not specified. |
| 193 |
@link http://alistapart.com/article/creating-intrinsic-ratios-for-video |
| 194 |
*/ |
| 195 |
.bw_video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;margin-bottom: 20px; } |
| 196 |
.bw_video_inner {display: block;position: absolute; top: 0;left: 0; width: 100%;height: 100% } |
| 197 |
|
| 198 |
/* CSS for responsive [bw_testimonial] shortcode */ |
| 199 |
.bw_testimonial { width: 100% !important; background-color: #eeeeee; } |
| 200 |
.bw_testimonial img { max-width: 100% !important; } |
| 201 |
|
| 202 |
/* CSS for bw_jquery fancybox - setting the inline content to display none initially */ |
| 203 |
.bw_display_none { display: none; } |
| 204 |
|
| 205 |
/* Format a field hint */ |
| 206 |
span.bw_hint { display: block; font-style: italic; } |
| 207 |
/* Styling for oik-rating stars */ |
| 208 |
img[src$='star-on.png'], img[src$='star-off.png'] { margin: 0px; } |
| 209 |
|
| 210 |
/* Styling for an error message from bw_display_messages() */ |
| 211 |
div.bw_messages div.error { color: red; font-weight: bold; } |
| 212 |
|
| 213 |
/* Styling for WordPress 3.8 */ |
| 214 |
.form-table td textarea, |
| 215 |
.form-table td input[type="text"], |
| 216 |
.form-table td input[type="email"] { width: 100%; max-width: none; } |
| 217 |
.form-table td select { width: auto; max-width: 100%; } |
| 218 |
/* input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"] */ |
| 219 |
/* We may also need to style these similarly */ |
| 220 |
|
| 221 |
/** |
| 222 |
* TinyMCE button images... until we can find appropriate dashicons |
| 223 |
*/ |
| 224 |
.mce-container .mce-i-bw-sc-icon { background-image: url( 'bw-sc-icon.gif' ); } |
| 225 |
.mce-container .mce-i-bw-bn-icon { background-image: url( 'bw-bn-icon.gif' ); } |
| 226 |
.mce-container .mce-i-bw-pp-icon { background-image: url( 'bw-pp-icon.gif' ); } |
| 227 |
|
| 228 |
/* Styling for the edit CSS link - {} */ |
| 229 |
.bw_custom_css { background: #444; color: #eee !important; font-size: 32px; text-decoration: none !important; padding: 0px 10px 10px 10px; } |
| 230 |
.bw_custom_css:hover { background: #222; color: #0074a2 !important;} |
| 231 |
|
| 232 |
/** |
| 233 |
* Styling for theme=dash or theme=gener on the [bw_follow] based shortcodes |
| 234 |
* and also for the dummy theme called texticons which is used by [bw_dash] when the |
| 235 |
* icon is not recognised as being in dashicons or genericons but is implemented as a 'text icon'. |
| 236 |
*/ |
| 237 |
a span.bw_follow_me { text-decoration: none; width: auto; height: auto; vertical-align: bottom; } |
| 238 |
.bw_follow_me { background-color: #222; padding: 4px; margin-right: 4px; border-radius: 10% 10%; } |
| 239 |
.bw_code.bw_follow_me { background-color: transparent; } |
| 240 |
a span.dashicons-linkedin span { vertical-align: text-bottom; font-family: 'Myriad Pro',Futura,Arial,sans-serif; font-weight: bold; padding: 0px 5px 10px; 5px; } |
| 241 |
|
| 242 |
.dashicons.x2, .genericon.x2 { font-size: 200%; width: auto; } |
| 243 |
.dashicons.x24, .genericon.x24 { font-size: 39px; width: auto; } |
| 244 |
.dashicons.x3, .genericon.x3 { font-size: 300%; width: auto; } |
| 245 |
.dashicons.x4, .genericon.x4 { font-size: 400%; width: auto; } |
| 246 |
.dashicons.x5, .genericon.x5 { font-size: 500%; width: auto; height: auto; } |
| 247 |
|
| 248 |
.texticons.x1, .texticons { font-size: .9em; font-family: arial, serif; vertical-align: top;} |
| 249 |
.texticons.x2 { font-size: 190%; margin-top: -2px; display: inline-block; } |
| 250 |
.texticons.x3 { font-size: 290%; margin-top: -2px; display: inline-block;} |
| 251 |
.texticons.x4 { font-size: 390%; margin-top: -2px; display: inline-block;} |
| 252 |
.texticons.x5 { font-size: 435%; margin-top: 0px; display: inline-block;} |
| 253 |
|
| 254 |
.texticons-cent:before { content: "\00a2"; } |
| 255 |
.texticons-css:before { content: "{}"; } |
| 256 |
.texticons-dollar:before { content: "$"; } |
| 257 |
.texticons-euro:before { content: "\20ac"; } |
| 258 |
.texticons-shortcode:before { content: "[]"; } |
| 259 |
.texticons-sterling:before { content: "\00a3"; } |
| 260 |
.texticons-yen:before { content: "\00a5"; } |
| 261 |
|
| 262 |
/* Special classes for defining border-radius */ |
| 263 |
.br0 { border-radius: 0% 0%; } |
| 264 |
.br10 { border-radius: 10% 10% } |
| 265 |
.br15 { border-radius: 15% 15% } |
| 266 |
.br20 { border-radius: 20% 20% } |
| 267 |
.br25 { border-radius: 25% 25% } |
| 268 |
.br50 { border-radius: 50% 50% } |
| 269 |
|
| 270 |
|
| 271 |
/* Sizing for the original images used by bw_follow_me. |
| 272 |
* x24 matches the original default image size, but the margins would have been set by the theme. |
| 273 |
*/ |
| 274 |
a.x1 img.bw_follow { max-width: 25px; margin: 0 4px 0 0;} |
| 275 |
a.x2 img.bw_follow { max-width: 41px; margin: 0 4px 0 0;} |
| 276 |
a.x24 img.bw_follow { max-width: 48px; margin: 0 4px 0 0; } |
| 277 |
a.x3 img.bw_follow { max-width: 48px; margin: 2px;} |
| 278 |
|
| 279 |
|
| 280 |
|
| 281 |
|
| 282 |
|
| 283 |
|
| 284 |
|
| 285 |
|
