Print.css
Permalink
Hi,
I need someone to setup my print.css up I do not know HTML code or css I just want to make some print friendly pages and have not managed to make them the main page I have dificulty with is
http://rodtechuk.com/user-manual-2/...
I really just want to be able to press print and the document print on A4 portrait with a margin at the top and a margin at the bottom I am now remaking the page into smaller blocks to try to stop the images from going over 2 pages.
Please help...
this is the print.css
1. CSS RESET
2. SITE STRUCTURE
3. NAVIGATION
4. HEADER STYLES
5. MAIN CONTENT STYLES
6. COLUMNS
7. FOOTER STYLES
8. ASSITIVE CLASSES
9. BUTTONS
10. BLOCKS
11. PORTFOLIO PAGE
12. MEDIA QUERIES
================================================== */
/* 1. CSS RESET
=====================
================================================== */
@page {size:Landscape;}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td
{
margin: 0; padding: 0;
}
caption,
th
{
text-align: left
}
q:before,
q:after
{
content: ''
}
abbr,
acronym
{
border: 0
}
/* END OF RESET
================================================== */
/* 2. SITE STRUCTURE
======================
================================================== */
.c5wrap table {width: 90% !important;}
.c5wrap
{
width: 100%; overflow: hidden; background: none !important;
}
#sub_page
{
background: url(img/subheader.jpg) repeat-x center top
}
.c5wrap .outer
{
width: 100%; overflow: hidden;
}
.c5wrap .inner
{
width: 100%; margin: 0 auto;
}
.c5wrap .main_inner
{
width: 100%; float: left; overflow: hidden;
}
.c5wrap .sidebar
{
display: none;}
.c5wrap #upper_decor
{
display: none;
}
.c5wrap #lower_decor
{
display: none;}
.c5wrap #shadow1
{
display: none;
}
.c5wrap #shadow2
{
display: none;
}
.c5wrap #shadow3
{
display: none;
}
.c5wrap #toTop
{
display: none;}
#logo {
display: none;
}
.swp-pagination-link {
display: none;
}
/* END OF SITE STRUCTURE
================================================== */
/* 3. NAVIGATION
================================================== */
#navigation {display: none;}
.mega-menuh {display: none;}
body .c5wrap ul#nav ul
{
background-color: #FFF
}
.c5wrap ul.nav-header
{
float: left
}
.c5wrap ul.nav-header li
{
float: left; display: inline;
}
.c5wrap ul.nav-header li a
{
float: left; padding: 10px 15px; text-decoration: none;
}
.c5wrap ul.nav-header li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav-header .nav-selected
{
background-color: #ccc
}
.c5wrap ul.nav
{
float: left
}
.c5wrap ul.nav li
{
float: left; display: inline;
}
.c5wrap ul.nav li a
{
float: left; padding: 10px 15px; text-decoration: none;
}
.c5wrap ul.nav li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav .nav-selected
{
background-color: #ccc
}
/* END OF NAVIGATION
================================================== */
/* 4. HEADER STYLES
================================================== */
.c5wrap #header_outer
{
overflow: visible
}
.c5wrap #logo
{
min-width: 300px; margin-top: 28px;
}
.c5wrap #header_inner
{
overflow: visible; min-height: 100px; background: url(img/headerhighlight.png) center top no-repeat;
}
/* END OF HEADER
================================================== */
/* 5. MAIN CONTENT STYLES
================================================== */
.c5wrap #main_outer
{
}
.c5wrap #main_inner
{
:
}
.c5wrap .image-link
{
margin-bottom: 20px
}
/* END OF MAIN CONTENT
================================================== */
/* 6. COLUMNS
================================================== */
.c5wrap .vidall_row
{
width: 960px; clear: both; overflow: hidden;
}
.c5wrap .TwoColumn
{
width: 464px
}
.c5wrap .ThreeColumn
{
width: 300px; margin-right: 30px;
}
.c5wrap .FourColumn
{
width: 219px; margin-right: 28px;
}
/* END OF COLUMNS
================================================== */
/* 7. FOOTER STYLES
================================================== */
.c5wrap #footer_inner
{
padding-top: 80px
}
.c5wrap #footer_outer
{
display: none;
}
.copyright {
display: none;
}
/* END OF FOOTER
================================================== */
/* 8. ASSITIVE CLASSES
================================================== */
.c5wrap .FloatLeft
{
float: left
}
.c5wrap .FloatRight
{
float: right
}
.c5wrap .last
{
margin-right: 0px
}
.ie8 .c5wrap a img
{
border: none
}
.ie7 .c5wrap a img
{
border: none
}
.c5wrap .marginTop
{
margin-top: 40px
}
img {max-width: 100%; height: auto;}
table td img {max-width: 100%; height: auto;}
/* END OF ASSISTIVE CLASSES
================================================== */
/* 9. BUTTONS
================================================== */
a.CustomButton
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #E0E0E0; background-image: -moz-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -ms-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -o-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#E0E0E0)); background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%); background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%); -moz-box-shadow: inset 0 0 1px #fff; vertical-align: middle; -ms-box-shadow: inset 0 0 1px #fff; border-radius: 3px; border-color: #CCC; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 0 white; box-shadow: inset 0 0 1px #fff; font-size: 11px; word-wrap: normal; padding: 10px; /* height: 18px; */ border: 1px solid #ccc; cursor: pointer; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); color: #8f8f8f;
}
.CustomButton:hover
{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; border-color: #afafaf; box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;
}
/* END OF BUTTONS
================================================== */
/* 10. BLOCKS
================================================== */
/* pro blog */
.c5wrap .sidebar .ccm-page-list a
{
color: #8f8f8f
}
.c5wrap .ccm-page-list.tagC a
{
float: left; text-decoration: none; padding: 5px; background-color: #f1f1f1; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 0 8px 10px 0; font-size: 13px !important;
}
.c5wrap .sidebar a.months
{
padding: 4px; /* background-color: #f1f1f1; */width: 300px; display: block; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 8px; clear: both;;
}
.c5wrap #pb_sidebar .ccm-page-list a.months
{
padding: 4px; /* background-color: #f1f1f1; */width: 300px; display: block; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 8px; clear: both;;
}
.c5wrap a.posts_title
{
display: block; margin-bottom: 0px !important; clear: both; margin-left: 10px;
}
.c5wrap .no_margin
{
margin-bottom: 0px
}
.smoother
{
margin-bottom: 10px
}
.c5wrap h4.underline
{
border-bottom: 1px solid #ededed; padding-bottom: 5px; clear: left;
}
.c5wrap #pb_body
{
width: 600px; padding: 0;
}
.c5wrap #pb_sidebar
{
width: 300px; color: #8f8f8f;
}
.c5wrap #pb_sidebar a
{
color: #8f8f8f
}
.c5wrap .content-sbBlog-title
{
border: none
}
.c5wrap #trackback
{
margin-bottom: 20px
}
div.toggleButton
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div.toggleButton1
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton1
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div.toggleButton2
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton2
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div.toggleButton3
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton3
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
.tagcloud_wrap
{
float: left; clear: both; overflow: hidden; position: relative; width: 100%;
}
.archive_wrap
{
float: left; clear: both; overflow: hidden;
}
div.clear
{
height: 1px; width: 100%; float: left; clear: both;
}
.ccm-page-list
{
clear: both; padding: 0px 0px 30px 20px;
}
.tagC
{
padding-bottom: 30px !important; font-size: 13px !important;
}
.meta_footer
{
width: 500px; min-height: 30px; background-color: #f6f6f6; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-top: 20px;
}
/* End of pro blog */
/* form */
.c5wrap .BlockForm input,
textarea
{
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 4px; border: 1px solid #ccc;
}
.c5wrap .BlockForm input:focus,
textarea:focus
{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9;
}
.c5wrap .BlockForm label
{
padding-top: 5px; margin: 0 12px 0 0;
}
.c5wrap .BlockForm td
{
padding: 0 0 12px 0
}
.c5wrap .BlockForm .question
{
padding-top: 4px
}
.c5wrap .BlockForm .formBlockSubmitButton
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #E0E0E0; background-image: -moz-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -ms-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -o-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#E0E0E0)); background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%); background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%); -moz-box-shadow: inset 0 0 1px #fff; vertical-align: middle; -ms-box-shadow: inset 0 0 1px #fff; border-radius: 3px; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 0 white; box-shadow: inset 0 0 1px #fff; font-size: 11px; word-wrap: normal; padding: 0 .91em; height: 2.95em; border: 1px solid #ccc; cursor: pointer; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); color: #8f8f8f;
}
.c5wrap .BlockForm .formBlockSubmitButton:hover
{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; border-color: #afafaf; box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;
}
.c5wrap .BlockForm .success
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; margin-bottom: 20px; border-radius: 3px; background: #91d886; background: -moz-linear-gradient(top, #91d886 0%, #1bc41b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91d886), color-stop(100%,#1bc41b)); background: -webkit-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -o-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -ms-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: linear-gradient(top, #91d886 0%,#1bc41b 100%); padding: 10px; border: 1px solid #14c916; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91d886', endColorstr='#1bc41b',GradientType=0 ); color: #fff;
}
.c5wrap .BlockForm .fail
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #ff3019; background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: linear-gradient(top, #ff3019 0%,#cf0404 100%); padding: 10px; margin: 10px 0 20px 0; border: 1px solid #ec2c3e; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); color: #fff;
}
.c5wrap .BlockForm .required
{
color: red
}
/* end of form */
/* search */
.c5wrap .BlockSearch
{
margin-bottom: 12px
}
.c5wrap .BlockSearch .ccm-search-block-text
{
border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px; border-radius: 3px 0px 0px 3px; line-height: 16px; border-right: none; margin-right: 0px; width: 160px; -moz-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; color: #bbb; -webkit-appearance: none;
}
.c5wrap .BlockSearch .ccm-search-block-submit
{
border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-left: none; line-height: 18px; padding: 4px; position: relative; background: url(img/glass.png) no-repeat 0px -1px #fff; cursor: pointer; border-radius: 0px 3px 3px 0px; -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; margin-left: -4px; width: 25px;
}
.ie8 .c5wrap .BlockSearch .ccm-search-block-submit
{
height: 28px; padding: 0px; margin-bottom: 0px; float: left; background: url(img/glass.png) no-repeat 0px 0px #fff;
}
.ie8 .c5wrap .BlockSearch .ccm-search-block-text
{
float: left; margin-bottom: 20px;
}
.ie7 .c5wrap .BlockSearch .ccm-search-block-submit
{
height: 28px; padding: 0px; margin-bottom: 0px; float: left; background: url(img/glass.png) no-repeat 0px 0px #fff;
}
.ie7 .c5wrap .BlockSearch .ccm-search-block-text
{
float: left; margin-bottom: 20px;
}
.c5wrap .BlockSearch .ccm-search-block-submit:hover
{
background: url(img/glass_hover.png) no-repeat 0px -1px #fff
}
.c5wrap .BlockSearch .ccm-search-block-text:focus
{
outline: none
}
/* end of search */
/* Standard blog*/
.c5wrap .Excerpt
{
padding-bottom: 50px; margin-bottom: 40px; background: url(img/blog_div.png) no-repeat center bottom;
}
.c5wrap .ccm-tags-display
{
margin-bottom: 20px
}
.c5wrap ul.ccm-tag-list li
{
background-color: #e7e7e7; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
/* End of standard blog*/
/* guestbook */
.c5wrap .BlockGuestbook input,
textarea
{
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 4px; border: 1px solid #ccc; margin: 5px 0 12px 0;
}
.c5wrap .BlockGuestbook textarea
{
width: 380px; height: 185px;
}
.c5wrap .BlockGuestbook .error
{
height: 15px; width: 300px; clear: both; display: block; padding: 5px; color: #fff; background: #ff3019; background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: linear-gradient(top, #ff3019 0%,#cf0404 100%); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #ec2c3e;
}
.c5wrap .BlockGuestbook input:focus,
textarea:focus
{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9;
}
.c5wrap .BlockGuestbook .button
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #E0E0E0; background-image: -moz-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -ms-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -o-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#E0E0E0)); background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%); background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%); -moz-box-shadow: inset 0 0 1px #fff; vertical-align: middle; -ms-box-shadow: inset 0 0 1px #fff; border-radius: 3px; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 0 white; box-shadow: inset 0 0 1px #fff; font-size: 11px; word-wrap: normal; padding: 0 .91em; height: 2.95em; border: 1px solid #ccc; cursor: pointer; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); color: #8f8f8f;
}
.c5wrap .BlockGuestbook .button:hover
{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; border-color: #afafaf; box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;
}
.c5wrap .BlockGuestbook .guestBook-entry
{
margin: 10px 0 30px 0; padding: 15px; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.c5wrap .BlockGuestbook .contentByLine
{
margin-bottom: 15px; padding-left: 40px; background: url(img/talk.png) no-repeat top left; height: 32px;
}
.c5wrap .BlockGuestbook .thanks
{
background-color: green; width: 300px; heigh: 50px; color: #fff; background: #91d886; background: -moz-linear-gradient(top, #91d886 0%, #1bc41b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91d886), color-stop(100%,#1bc41b)); background: -webkit-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -o-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -ms-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: linear-gradient(top, #91d886 0%,#1bc41b 100%); padding: 5px; border: 1px solid #14c916; margin-bottom: 15px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
/* end of guestbook */
/* next and prev */
.c5wrap .nandpwrapper .ccm-next-previous-previouslink
{
float: left; width: 33%; text-align: left; padding: 5px 0 0 10px; height: 26px;
}
.c5wrap .nandpwrapper .ccm-next-previous-nextlink
{
float: right; width: 33%; text-align: right; padding: 5px 10px 0 0; /* border-left: 1px solid #ccc; */ height: 26px;
}
.c5wrap .nandpwrapper .ccm-next-previous-parentlink
{
float: left; width: 30%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin: 0 auto !important; text-align: center; padding: 5px 0 0 0; height: 26px;
}
.c5wrap .nandpwrapper
{
width: 100%; border: 1px solid #ccc; height: 30px; overflow: hidden; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-top: 20px;
}
.c5wrap .nandpwrapper .ccm-next-previous-previouslink a,
.nandpwrapper .ccm-next-previous-nextlink a,
.nandpwrapper .ccm-next-previous-parentlink a
{
text-decoration: none; color: #8f8f8f;
}
/* end of next and prev */
/* END OF BLOCKS
================================================== */
/* 11. PORTFOLIO PAGE
================================================== */
.c5wrap .port_header
{
max-width: 219px; clear: both;
}
.c5wrap .port_body
{
max-width: 219px; clear: both; position: relative;
}
.c5wrap .port_body img
{
border: 1px solid #ccc
}
.c5wrap .port_desc
{
max-width: 219px; clear: both;
}
.imageOver
{
background: url(img/Hoverover.png) no-repeat 50% 50%; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 1.5;
}
/* END OF PORTFOLIO PAGE
================================================== */
/* 12. MEDIA QUERIES
================================================== */
/* #Tablet (Portrait)
==================================================
================================================== */
/* ===[ Note: Design for a width of 768px ]=== */
@media only screen and (min-width: 768px) and (max-width: 959px)
{
.c5wrap .outer
{
width: 100%; overflow: hidden;
}
.c5wrap #pb_sidebar
{
width: 200px; color: #8f8f8f;
}
.c5wrap #pb_body{
width: 400px;
}
.c5wrap .meta_footer{
width: 300px;
}
.c5wrap div#shadow1
{
height: 80px; width: 728px !important;
}
.c5wrap #shadow2
{
height: 80px; width: 728px;
}
.c5wrap #shadow3
{
height: 80px; width: 728px;
}
.c5wrap img
{
max-width: 100%; height: auto;
}
.c5wrap .BlockSearch .ccm-search-block-text
{
width: 120px
}
.c5wrap #navigation
{
float: left !important
}
.c5wrap .inner
{
width: 748px; margin: 0 auto; padding: 0px 10px 0px 10px;
}
.c5wrap .vidall_row
{
width: 748px; clear: both; overflow: hidden;
}
.c5wrap .main_inner
{
width: 400px; float: left;
}
.c5wrap .TwoColumn
{
width: 344px
}
.c5wrap .ThreeColumn
{
width: 226px; margin-right: 30px;
}
.c5wrap .FourColumn
{
width: 167px; margin-right: 20px;
}
.c5wrap .last
{
margin-right: 0px
}
}
/* #Mobile (Portrait)
==================================================
================================================== */
/* ===[ Note: Design for a width of 320px ]=== */
/* #Mobile (Portrait)
==================================================
================================================== */
/* ===[ Note: Design for a width of 320px ]=== */
@media only screen and (max-width: 767px)
{
.c5wrap
{
background: none;
}
.c5wrap img
{
max-width: 100%; height: auto;
}
.c5wrap .outer
{
width: 100%; overflow: hidden;
}
#upper_decor
{
background: url(img/upper_decorMOB.png) no-repeat left center !important
}
#lower_decor
{
background: url(img/lower_decorMOB.png) no-repeat left top !important
}
.c5wrap .inner
{
width: 300px; margin: 0 auto; padding: 10px;
}
.c5wrap .vidall_row
{
width: 320px; clear: both; overflow: hidden;
}
.c5wrap .main_inner
{
width: 300px; float: left;
}
#slider
{
display: none
}
.c5wrap .TwoColumn
{
width: 300px; float: left;
}
.c5wrap .ThreeColumn
{
width: 300px; margin-right: 30px; float: left;
}
.c5wrap .FourColumn
{
width: 300px; margin-right: 20px; float: left;
}
.c5wrap .pageSection
{
width: 300px
}
.c5wrap .Excerpt
{
width: 300px; padding-bottom: 30px;
}
.c5wrap textarea
{
width: 250px !important
}
.c5wrap .sidebar
{
float: left; clear: both;
}
.c5wrap .last
{
margin-right: 0px
}
.c5wrap ul#nav
{
float: left
}
.slideImgWrap
{
width: 100%; height: auto;
}
.c5wrap ul#nav ul
{
background: #eee
}
body .c5wrap ul#nav ul li a
{
width: 150px !important
}
.c5wrap ul#nav li
{
float: left; clear: both;
}
.c5wrap ul#nav li a
{
padding: 10px 15px; text-decoration: none; background: #4E708C; width: 270px; border-bottom: 1px solid #000; margin-bottom: 5px;
}
.c5wrap #navigation
{
width: 280px; float: left;
}
.c5wrap ul#nav li a:hover,
ul#nav li a:focus
{
color: #eee; background: #222;
}
.c5wrap ul#nav ul ul
{
border-top: 1px solid #000; margin-top: -1px;
}
span.sf-arrow
{
top: 18px; right: 0;
}
ul ul span.sf-arrow
{
right: 12px; top: 16px;
}
.c5wrap ul.nav-header
{
float: left
}
.c5wrap ul.nav-header
{
float: left
}
.c5wrap ul.nav-header li
{
float: left; display: inline;
}
.c5wrap ul.nav-header li a
{
float: left; padding: 10px 15px; text-decoration: none;
}
.c5wrap ul.nav-header li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav-header .nav-selected
{
background-color: #ccc
}
.c5wrap ul.nav
{
float: left
}
.c5wrap ul.nav li
{
float: left; display: block; clear: both;
}
.c5wrap ul.nav li a
{
float: left; padding: 10px 15px; text-decoration: none; width: 298px; border: 1px solid #ccc; margin-bottom: 5px;
}
.c5wrap ul.nav li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav .nav-selected
{
background-color: #ccc
}
.meta_footer
{
width: 280px
}
.addthis_toolbox
{
float: left !important; clear: both; margin-top: 30px;
}
}
/* #Mobile (Landscape)
==================================================
================================================== */
/* ===[ Note: Design for a width of 480px ]=== */
@media only screen and (min-width: 480px) and (max-width: 767px)
{
.c5wrap
{
background: none;
}
}
I need someone to setup my print.css up I do not know HTML code or css I just want to make some print friendly pages and have not managed to make them the main page I have dificulty with is
http://rodtechuk.com/user-manual-2/...
I really just want to be able to press print and the document print on A4 portrait with a margin at the top and a margin at the bottom I am now remaking the page into smaller blocks to try to stop the images from going over 2 pages.
Please help...
this is the print.css
1. CSS RESET
2. SITE STRUCTURE
3. NAVIGATION
4. HEADER STYLES
5. MAIN CONTENT STYLES
6. COLUMNS
7. FOOTER STYLES
8. ASSITIVE CLASSES
9. BUTTONS
10. BLOCKS
11. PORTFOLIO PAGE
12. MEDIA QUERIES
================================================== */
/* 1. CSS RESET
=====================
================================================== */
@page {size:Landscape;}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td
{
margin: 0; padding: 0;
}
caption,
th
{
text-align: left
}
q:before,
q:after
{
content: ''
}
abbr,
acronym
{
border: 0
}
/* END OF RESET
================================================== */
/* 2. SITE STRUCTURE
======================
================================================== */
.c5wrap table {width: 90% !important;}
.c5wrap
{
width: 100%; overflow: hidden; background: none !important;
}
#sub_page
{
background: url(img/subheader.jpg) repeat-x center top
}
.c5wrap .outer
{
width: 100%; overflow: hidden;
}
.c5wrap .inner
{
width: 100%; margin: 0 auto;
}
.c5wrap .main_inner
{
width: 100%; float: left; overflow: hidden;
}
.c5wrap .sidebar
{
display: none;}
.c5wrap #upper_decor
{
display: none;
}
.c5wrap #lower_decor
{
display: none;}
.c5wrap #shadow1
{
display: none;
}
.c5wrap #shadow2
{
display: none;
}
.c5wrap #shadow3
{
display: none;
}
.c5wrap #toTop
{
display: none;}
#logo {
display: none;
}
.swp-pagination-link {
display: none;
}
/* END OF SITE STRUCTURE
================================================== */
/* 3. NAVIGATION
================================================== */
#navigation {display: none;}
.mega-menuh {display: none;}
body .c5wrap ul#nav ul
{
background-color: #FFF
}
.c5wrap ul.nav-header
{
float: left
}
.c5wrap ul.nav-header li
{
float: left; display: inline;
}
.c5wrap ul.nav-header li a
{
float: left; padding: 10px 15px; text-decoration: none;
}
.c5wrap ul.nav-header li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav-header .nav-selected
{
background-color: #ccc
}
.c5wrap ul.nav
{
float: left
}
.c5wrap ul.nav li
{
float: left; display: inline;
}
.c5wrap ul.nav li a
{
float: left; padding: 10px 15px; text-decoration: none;
}
.c5wrap ul.nav li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav .nav-selected
{
background-color: #ccc
}
/* END OF NAVIGATION
================================================== */
/* 4. HEADER STYLES
================================================== */
.c5wrap #header_outer
{
overflow: visible
}
.c5wrap #logo
{
min-width: 300px; margin-top: 28px;
}
.c5wrap #header_inner
{
overflow: visible; min-height: 100px; background: url(img/headerhighlight.png) center top no-repeat;
}
/* END OF HEADER
================================================== */
/* 5. MAIN CONTENT STYLES
================================================== */
.c5wrap #main_outer
{
}
.c5wrap #main_inner
{
:
}
.c5wrap .image-link
{
margin-bottom: 20px
}
/* END OF MAIN CONTENT
================================================== */
/* 6. COLUMNS
================================================== */
.c5wrap .vidall_row
{
width: 960px; clear: both; overflow: hidden;
}
.c5wrap .TwoColumn
{
width: 464px
}
.c5wrap .ThreeColumn
{
width: 300px; margin-right: 30px;
}
.c5wrap .FourColumn
{
width: 219px; margin-right: 28px;
}
/* END OF COLUMNS
================================================== */
/* 7. FOOTER STYLES
================================================== */
.c5wrap #footer_inner
{
padding-top: 80px
}
.c5wrap #footer_outer
{
display: none;
}
.copyright {
display: none;
}
/* END OF FOOTER
================================================== */
/* 8. ASSITIVE CLASSES
================================================== */
.c5wrap .FloatLeft
{
float: left
}
.c5wrap .FloatRight
{
float: right
}
.c5wrap .last
{
margin-right: 0px
}
.ie8 .c5wrap a img
{
border: none
}
.ie7 .c5wrap a img
{
border: none
}
.c5wrap .marginTop
{
margin-top: 40px
}
img {max-width: 100%; height: auto;}
table td img {max-width: 100%; height: auto;}
/* END OF ASSISTIVE CLASSES
================================================== */
/* 9. BUTTONS
================================================== */
a.CustomButton
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #E0E0E0; background-image: -moz-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -ms-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -o-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#E0E0E0)); background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%); background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%); -moz-box-shadow: inset 0 0 1px #fff; vertical-align: middle; -ms-box-shadow: inset 0 0 1px #fff; border-radius: 3px; border-color: #CCC; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 0 white; box-shadow: inset 0 0 1px #fff; font-size: 11px; word-wrap: normal; padding: 10px; /* height: 18px; */ border: 1px solid #ccc; cursor: pointer; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); color: #8f8f8f;
}
.CustomButton:hover
{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; border-color: #afafaf; box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;
}
/* END OF BUTTONS
================================================== */
/* 10. BLOCKS
================================================== */
/* pro blog */
.c5wrap .sidebar .ccm-page-list a
{
color: #8f8f8f
}
.c5wrap .ccm-page-list.tagC a
{
float: left; text-decoration: none; padding: 5px; background-color: #f1f1f1; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 0 8px 10px 0; font-size: 13px !important;
}
.c5wrap .sidebar a.months
{
padding: 4px; /* background-color: #f1f1f1; */width: 300px; display: block; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 8px; clear: both;;
}
.c5wrap #pb_sidebar .ccm-page-list a.months
{
padding: 4px; /* background-color: #f1f1f1; */width: 300px; display: block; border: 1px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-bottom: 8px; clear: both;;
}
.c5wrap a.posts_title
{
display: block; margin-bottom: 0px !important; clear: both; margin-left: 10px;
}
.c5wrap .no_margin
{
margin-bottom: 0px
}
.smoother
{
margin-bottom: 10px
}
.c5wrap h4.underline
{
border-bottom: 1px solid #ededed; padding-bottom: 5px; clear: left;
}
.c5wrap #pb_body
{
width: 600px; padding: 0;
}
.c5wrap #pb_sidebar
{
width: 300px; color: #8f8f8f;
}
.c5wrap #pb_sidebar a
{
color: #8f8f8f
}
.c5wrap .content-sbBlog-title
{
border: none
}
.c5wrap #trackback
{
margin-bottom: 20px
}
div.toggleButton
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div.toggleButton1
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton1
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div.toggleButton2
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton2
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div.toggleButton3
{
height: 22px; width: 22px; float: right; background: url(img/expandButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
div#expandButton3
{
height: 22px; width: 22px; float: right; background: url(img/collapseButton.png) no-repeat; cursor: pointer; padding: 8px 5px 5px 0px;
}
.tagcloud_wrap
{
float: left; clear: both; overflow: hidden; position: relative; width: 100%;
}
.archive_wrap
{
float: left; clear: both; overflow: hidden;
}
div.clear
{
height: 1px; width: 100%; float: left; clear: both;
}
.ccm-page-list
{
clear: both; padding: 0px 0px 30px 20px;
}
.tagC
{
padding-bottom: 30px !important; font-size: 13px !important;
}
.meta_footer
{
width: 500px; min-height: 30px; background-color: #f6f6f6; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin-top: 20px;
}
/* End of pro blog */
/* form */
.c5wrap .BlockForm input,
textarea
{
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 4px; border: 1px solid #ccc;
}
.c5wrap .BlockForm input:focus,
textarea:focus
{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9;
}
.c5wrap .BlockForm label
{
padding-top: 5px; margin: 0 12px 0 0;
}
.c5wrap .BlockForm td
{
padding: 0 0 12px 0
}
.c5wrap .BlockForm .question
{
padding-top: 4px
}
.c5wrap .BlockForm .formBlockSubmitButton
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #E0E0E0; background-image: -moz-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -ms-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -o-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#E0E0E0)); background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%); background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%); -moz-box-shadow: inset 0 0 1px #fff; vertical-align: middle; -ms-box-shadow: inset 0 0 1px #fff; border-radius: 3px; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 0 white; box-shadow: inset 0 0 1px #fff; font-size: 11px; word-wrap: normal; padding: 0 .91em; height: 2.95em; border: 1px solid #ccc; cursor: pointer; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); color: #8f8f8f;
}
.c5wrap .BlockForm .formBlockSubmitButton:hover
{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; border-color: #afafaf; box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;
}
.c5wrap .BlockForm .success
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; margin-bottom: 20px; border-radius: 3px; background: #91d886; background: -moz-linear-gradient(top, #91d886 0%, #1bc41b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91d886), color-stop(100%,#1bc41b)); background: -webkit-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -o-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -ms-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: linear-gradient(top, #91d886 0%,#1bc41b 100%); padding: 10px; border: 1px solid #14c916; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91d886', endColorstr='#1bc41b',GradientType=0 ); color: #fff;
}
.c5wrap .BlockForm .fail
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background: #ff3019; background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: linear-gradient(top, #ff3019 0%,#cf0404 100%); padding: 10px; margin: 10px 0 20px 0; border: 1px solid #ec2c3e; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); color: #fff;
}
.c5wrap .BlockForm .required
{
color: red
}
/* end of form */
/* search */
.c5wrap .BlockSearch
{
margin-bottom: 12px
}
.c5wrap .BlockSearch .ccm-search-block-text
{
border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 5px; border-radius: 3px 0px 0px 3px; line-height: 16px; border-right: none; margin-right: 0px; width: 160px; -moz-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; color: #bbb; -webkit-appearance: none;
}
.c5wrap .BlockSearch .ccm-search-block-submit
{
border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-left: none; line-height: 18px; padding: 4px; position: relative; background: url(img/glass.png) no-repeat 0px -1px #fff; cursor: pointer; border-radius: 0px 3px 3px 0px; -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; margin-left: -4px; width: 25px;
}
.ie8 .c5wrap .BlockSearch .ccm-search-block-submit
{
height: 28px; padding: 0px; margin-bottom: 0px; float: left; background: url(img/glass.png) no-repeat 0px 0px #fff;
}
.ie8 .c5wrap .BlockSearch .ccm-search-block-text
{
float: left; margin-bottom: 20px;
}
.ie7 .c5wrap .BlockSearch .ccm-search-block-submit
{
height: 28px; padding: 0px; margin-bottom: 0px; float: left; background: url(img/glass.png) no-repeat 0px 0px #fff;
}
.ie7 .c5wrap .BlockSearch .ccm-search-block-text
{
float: left; margin-bottom: 20px;
}
.c5wrap .BlockSearch .ccm-search-block-submit:hover
{
background: url(img/glass_hover.png) no-repeat 0px -1px #fff
}
.c5wrap .BlockSearch .ccm-search-block-text:focus
{
outline: none
}
/* end of search */
/* Standard blog*/
.c5wrap .Excerpt
{
padding-bottom: 50px; margin-bottom: 40px; background: url(img/blog_div.png) no-repeat center bottom;
}
.c5wrap .ccm-tags-display
{
margin-bottom: 20px
}
.c5wrap ul.ccm-tag-list li
{
background-color: #e7e7e7; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
/* End of standard blog*/
/* guestbook */
.c5wrap .BlockGuestbook input,
textarea
{
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 4px; border: 1px solid #ccc; margin: 5px 0 12px 0;
}
.c5wrap .BlockGuestbook textarea
{
width: 380px; height: 185px;
}
.c5wrap .BlockGuestbook .error
{
height: 15px; width: 300px; clear: both; display: block; padding: 5px; color: #fff; background: #ff3019; background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); background: linear-gradient(top, #ff3019 0%,#cf0404 100%); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #ec2c3e;
}
.c5wrap .BlockGuestbook input:focus,
textarea:focus
{
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); outline: 0; outline: thin dotted \9;
}
.c5wrap .BlockGuestbook .button
{
-webkit-border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #E0E0E0; background-image: -moz-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -ms-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -o-linear-gradient(top,white 0,#E0E0E0 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,white),color-stop(100%,#E0E0E0)); background-image: -webkit-linear-gradient(top,white 0,#E0E0E0 100%); background-image: linear-gradient(to bottom,white 0,#E0E0E0 100%); -moz-box-shadow: inset 0 0 1px #fff; vertical-align: middle; -ms-box-shadow: inset 0 0 1px #fff; border-radius: 3px; font-weight: bold; white-space: nowrap; text-shadow: 0 1px 0 white; box-shadow: inset 0 0 1px #fff; font-size: 11px; word-wrap: normal; padding: 0 .91em; height: 2.95em; border: 1px solid #ccc; cursor: pointer; filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0); color: #8f8f8f;
}
.c5wrap .BlockGuestbook .button:hover
{
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; -ms-box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff; border-color: #afafaf; box-shadow: 0 1px 2px rgba(0,0,0,0.25),inset 0 0 3px #fff;
}
.c5wrap .BlockGuestbook .guestBook-entry
{
margin: 10px 0 30px 0; padding: 15px; border: 1px solid #ccc; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
.c5wrap .BlockGuestbook .contentByLine
{
margin-bottom: 15px; padding-left: 40px; background: url(img/talk.png) no-repeat top left; height: 32px;
}
.c5wrap .BlockGuestbook .thanks
{
background-color: green; width: 300px; heigh: 50px; color: #fff; background: #91d886; background: -moz-linear-gradient(top, #91d886 0%, #1bc41b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91d886), color-stop(100%,#1bc41b)); background: -webkit-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -o-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: -ms-linear-gradient(top, #91d886 0%,#1bc41b 100%); background: linear-gradient(top, #91d886 0%,#1bc41b 100%); padding: 5px; border: 1px solid #14c916; margin-bottom: 15px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
/* end of guestbook */
/* next and prev */
.c5wrap .nandpwrapper .ccm-next-previous-previouslink
{
float: left; width: 33%; text-align: left; padding: 5px 0 0 10px; height: 26px;
}
.c5wrap .nandpwrapper .ccm-next-previous-nextlink
{
float: right; width: 33%; text-align: right; padding: 5px 10px 0 0; /* border-left: 1px solid #ccc; */ height: 26px;
}
.c5wrap .nandpwrapper .ccm-next-previous-parentlink
{
float: left; width: 30%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; margin: 0 auto !important; text-align: center; padding: 5px 0 0 0; height: 26px;
}
.c5wrap .nandpwrapper
{
width: 100%; border: 1px solid #ccc; height: 30px; overflow: hidden; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-top: 20px;
}
.c5wrap .nandpwrapper .ccm-next-previous-previouslink a,
.nandpwrapper .ccm-next-previous-nextlink a,
.nandpwrapper .ccm-next-previous-parentlink a
{
text-decoration: none; color: #8f8f8f;
}
/* end of next and prev */
/* END OF BLOCKS
================================================== */
/* 11. PORTFOLIO PAGE
================================================== */
.c5wrap .port_header
{
max-width: 219px; clear: both;
}
.c5wrap .port_body
{
max-width: 219px; clear: both; position: relative;
}
.c5wrap .port_body img
{
border: 1px solid #ccc
}
.c5wrap .port_desc
{
max-width: 219px; clear: both;
}
.imageOver
{
background: url(img/Hoverover.png) no-repeat 50% 50%; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 1.5;
}
/* END OF PORTFOLIO PAGE
================================================== */
/* 12. MEDIA QUERIES
================================================== */
/* #Tablet (Portrait)
==================================================
================================================== */
/* ===[ Note: Design for a width of 768px ]=== */
@media only screen and (min-width: 768px) and (max-width: 959px)
{
.c5wrap .outer
{
width: 100%; overflow: hidden;
}
.c5wrap #pb_sidebar
{
width: 200px; color: #8f8f8f;
}
.c5wrap #pb_body{
width: 400px;
}
.c5wrap .meta_footer{
width: 300px;
}
.c5wrap div#shadow1
{
height: 80px; width: 728px !important;
}
.c5wrap #shadow2
{
height: 80px; width: 728px;
}
.c5wrap #shadow3
{
height: 80px; width: 728px;
}
.c5wrap img
{
max-width: 100%; height: auto;
}
.c5wrap .BlockSearch .ccm-search-block-text
{
width: 120px
}
.c5wrap #navigation
{
float: left !important
}
.c5wrap .inner
{
width: 748px; margin: 0 auto; padding: 0px 10px 0px 10px;
}
.c5wrap .vidall_row
{
width: 748px; clear: both; overflow: hidden;
}
.c5wrap .main_inner
{
width: 400px; float: left;
}
.c5wrap .TwoColumn
{
width: 344px
}
.c5wrap .ThreeColumn
{
width: 226px; margin-right: 30px;
}
.c5wrap .FourColumn
{
width: 167px; margin-right: 20px;
}
.c5wrap .last
{
margin-right: 0px
}
}
/* #Mobile (Portrait)
==================================================
================================================== */
/* ===[ Note: Design for a width of 320px ]=== */
/* #Mobile (Portrait)
==================================================
================================================== */
/* ===[ Note: Design for a width of 320px ]=== */
@media only screen and (max-width: 767px)
{
.c5wrap
{
background: none;
}
.c5wrap img
{
max-width: 100%; height: auto;
}
.c5wrap .outer
{
width: 100%; overflow: hidden;
}
#upper_decor
{
background: url(img/upper_decorMOB.png) no-repeat left center !important
}
#lower_decor
{
background: url(img/lower_decorMOB.png) no-repeat left top !important
}
.c5wrap .inner
{
width: 300px; margin: 0 auto; padding: 10px;
}
.c5wrap .vidall_row
{
width: 320px; clear: both; overflow: hidden;
}
.c5wrap .main_inner
{
width: 300px; float: left;
}
#slider
{
display: none
}
.c5wrap .TwoColumn
{
width: 300px; float: left;
}
.c5wrap .ThreeColumn
{
width: 300px; margin-right: 30px; float: left;
}
.c5wrap .FourColumn
{
width: 300px; margin-right: 20px; float: left;
}
.c5wrap .pageSection
{
width: 300px
}
.c5wrap .Excerpt
{
width: 300px; padding-bottom: 30px;
}
.c5wrap textarea
{
width: 250px !important
}
.c5wrap .sidebar
{
float: left; clear: both;
}
.c5wrap .last
{
margin-right: 0px
}
.c5wrap ul#nav
{
float: left
}
.slideImgWrap
{
width: 100%; height: auto;
}
.c5wrap ul#nav ul
{
background: #eee
}
body .c5wrap ul#nav ul li a
{
width: 150px !important
}
.c5wrap ul#nav li
{
float: left; clear: both;
}
.c5wrap ul#nav li a
{
padding: 10px 15px; text-decoration: none; background: #4E708C; width: 270px; border-bottom: 1px solid #000; margin-bottom: 5px;
}
.c5wrap #navigation
{
width: 280px; float: left;
}
.c5wrap ul#nav li a:hover,
ul#nav li a:focus
{
color: #eee; background: #222;
}
.c5wrap ul#nav ul ul
{
border-top: 1px solid #000; margin-top: -1px;
}
span.sf-arrow
{
top: 18px; right: 0;
}
ul ul span.sf-arrow
{
right: 12px; top: 16px;
}
.c5wrap ul.nav-header
{
float: left
}
.c5wrap ul.nav-header
{
float: left
}
.c5wrap ul.nav-header li
{
float: left; display: inline;
}
.c5wrap ul.nav-header li a
{
float: left; padding: 10px 15px; text-decoration: none;
}
.c5wrap ul.nav-header li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav-header .nav-selected
{
background-color: #ccc
}
.c5wrap ul.nav
{
float: left
}
.c5wrap ul.nav li
{
float: left; display: block; clear: both;
}
.c5wrap ul.nav li a
{
float: left; padding: 10px 15px; text-decoration: none; width: 298px; border: 1px solid #ccc; margin-bottom: 5px;
}
.c5wrap ul.nav li a:hover
{
background-color: #ccc
}
.c5wrap ul.nav .nav-selected
{
background-color: #ccc
}
.meta_footer
{
width: 280px
}
.addthis_toolbox
{
float: left !important; clear: both; margin-top: 30px;
}
}
/* #Mobile (Landscape)
==================================================
================================================== */
/* ===[ Note: Design for a width of 480px ]=== */
@media only screen and (min-width: 480px) and (max-width: 767px)
{
.c5wrap
{
background: none;
}
}
I think your problem may be related to the use of tables for layout. If you want me to take a closer look PM me an admin login and Ill see what needs to be fixed.
Try putting this in your print.css file:
http://stackoverflow.com/questions/2649169/print-styles-how-to-ensu...
img { page-break-inside: avoid; }
http://stackoverflow.com/questions/2649169/print-styles-how-to-ensu...
Where in the css does
img {
page-break-inside: avoid;
}
go or is it anywere
img {
page-break-inside: avoid;
}
go or is it anywere
I put the content into blocks to make
page-break-before: always;
page-break-inside:avoid;
work they didn't work in content
page-break-before: always;
page-break-inside:avoid;
work they didn't work in content
It goes in your print.css
Let me clarify something. A dedicated print.css file should include those rules that apply to printing. I had a look at your site and it appears that you have just copied your style.css and included it as 'print.css'. If you have all those rules in the style.css, you don't need to include them again in the print.css. Just add the code I posted above to your print.css along with any other tweaks (like setting 'background-image:none') that apply only to printing.
(sorry for changing this post a bunch of times)
Let me clarify something. A dedicated print.css file should include those rules that apply to printing. I had a look at your site and it appears that you have just copied your style.css and included it as 'print.css'. If you have all those rules in the style.css, you don't need to include them again in the print.css. Just add the code I posted above to your print.css along with any other tweaks (like setting 'background-image:none') that apply only to printing.
(sorry for changing this post a bunch of times)
Sorry I ment does it go in a perticular place
It doesn't matter where it goes in the css file but see my expanded code above