My logo for all mobile is too big! WordPress
Hi,
My logo, Herman, is too large for any devices. How to downsize the logo, without affecting the desktop theme? it is the same theme.
I tried using the grid.css, but nothing has changed. :(
how can i change all mobile device, except the iPad, stop all music?
Answers (2)
Marko Nikolic answers:
Hey,
add something like this in your style.css:
#logo img {
width: 100%;
height: auto;
}
I assume that your logo is within
<div id="logo">logo path</div>
UPDATE ---
Hey,
If it's not defined in your grid.css, then you should be able to change this only in style.css.
Of course, you can edit your grid.css, but I can't be sure in that before you give more details.
In fact, if you already have desktop and mobile version, it would be better to go with Sean's solution.
Solution I wrote is more flexible, because it would automatically resize your logo. There are many mobile smartphones and tablets that use different screen size and resolution, so you would never be able to match all of them.
Cheers
kidd comments:
Hi,
Pardon me. is style.css not grid.css? cos style.css only changes the desktop theme, whereas grid.css changes the mobile theme.
kidd comments:
Hi,
in my style.css file, 1 match of "logo":
#wrapper
{
width: 80%;
}
.logo_wrapper
{
margin: 29px 40px 0 0;
display: block;
float: left;
}
But isn't that changes the Desktop theme? I don't want to changed the Desktop theme, i just want to change the mobile theme?
Hermanfurniture.com
Sean H answers:
Hi there,
The best method is to specify different rules for devices with smaller screens. You can do this by using the @media property in your style.css file, e.g.:
@media handheld, only screen and (max-width: 600px) {
#logo {
width: 200px;
}
}
This code will resize the logo to a width of 200px for devices that have a screen width smaller than 600px. You can put in several of these rules, one specific for the iPad if you wish.
Let me know if you need further help.
Regards
Sean
kidd comments:
Hi,
Pardon me. is style.css not grid.css? cos style.css only changes the desktop theme, whereas grid.css changes the mobile theme.
Sean H comments:
Hi kidd,
You can make the changes I have suggested above in style.css, I do it all the time and it works.
And in regards to this comment:
<em>"Solution I wrote is more flexible, because it would automatically resize your logo. There are many mobile smartphones and tablets that use different screen size and resolution, so you would never be able to match all of them."</em>
The @media property is designed to "catch all" screen sizes if you use it in the right way, e.g. you can have multiple rules for screen sizes smaller than 600px, and then scrfeen sizes smaller than 480px etc etc.
Regards
Sean
kidd comments:
Hi,
Where is the @media property, I can't find it on the styles.css?
I attached the style.css file.
Maybe you would like to visit my homepage to understand better, Desktop and mobile.
I don't want to changed the Desktop theme, i just want to change the mobile theme only.
/*
CSS Reset
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
body
{
line-height:1.5;
}
blockquote:before, blockquote:after, q:before, q:after
{
content:"";
}
blockquote, q
{
quotes:"" "";
}
a img
{
border:none;
}
p {
padding-top:0.7em;
padding-bottom:0.7em;
}
em
{
font-style: italic;
}
/*
Global Layout
*/
@font-face {
font-family: 'Gnuolane';
src: url('../fonts/gnuolane_free-webfont.eot');
src: url('../fonts/gnuolane_free-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/gnuolane_free-webfont.woff') format('woff'),
url('../fonts/gnuolane_free-webfont.ttf') format('truetype'),
url('../fonts/gnuolane_free-webfont.svg#GnuolaneFree') format('svg');
font-weight: normal;
font-style: normal;
}
html
{
overflow-x: hidden;
}
body
{
background: #fff;
font-size: 12px;
font-family: "helvetica neue",Helvetica, Arial,Verdana,sans-serif;
padding: 0;
margin: 0;
color: #666;
}
.alignright {float:right; margin:0 0 1em 1em}
.alignleft {float:left; margin:0 1em 1em 0}
.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}
hr
{
height: 1px;
border: 0;
border-top: 1px solid #959595;
background: transparent;
margin: auto;
margin-bottom: 20px;
width: 100%;
}
a
{
color: #222;
text-decoration: none;
}
a:hover
{
color: #999;
text-decoration: none;
}
a:active
{
color: #cccccc;
text-decoration: none;
}
h1
{
font-size: 40px;
color: #797979;
}
h2
{
font-size: 32px;
font-weight: normal;
color: #797979;
}
#searchform label
{
font-size: 20px;
color: #797979;
display: block;
margin-bottom: 10px;
font-weight: normal;
display:none;
}
#searchform input[type=text]
{
width: 90%;
}
h3
{
font-size: 26px;
font-weight: normal;
color: #797979;
}
h4
{
font-size: 24px;
font-weight: normal;
color: #797979;
}
h5
{
font-size: 22px;
font-weight: normal;
color: #797979;
}
h1, h2, h3, h4, h5
{
text-transform: uppercase;
font-family: 'Gnuolane';
}
.page_caption
{
width: 960px;
margin: auto;
margin-top: 10px;
}
.page_caption h1
{
font-size: 120px;
}
pre, code, tt {font:12px 'andale mono', 'lucida console', monospace;line-height:1.5;display: block;word-wrap: break-word; color: #888;
overflow:auto; padding: 20px 0 20px 0;
}
.clear
{
clear: both;
}
img.mid_align
{
vertical-align: middle;
margin-right: 5px;
border: 0;
}
label.error, .error
{
font-size: 11px;
color: #ff0000;
display: block;
}
.with_bg
{
background: #f9f9f9;
border: 1px solid #ebebeb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
img.frame
{
border: 3px solid #fff;
}
div.frame
{
border: 10px solid #fff;
}
.post_img img.frame
{
border: 10px solid #fff;
}
.frame_left
{
padding: 5px;
float: left;
margin: 0 20px 10px 0;
text-align: center;
}
.frame_left .caption, .frame_right .caption, .frame_center .caption
{
margin: 7px 0 2px 0;
display: block;
color: #999;
}
.frame_right
{
padding: 5px;
float: right;
margin: 0 0 10px 20px;
text-align: center;
}
.frame_center
{
padding: 5px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
clear: both;
display: table;
}
.dropcap1
{
display: block;
float: left;
margin: 0 8px 0 0;
font-size: 40px;
line-height: 40px;
}
blockquote
{
padding-left: 60px;
width: 90%;
background: transparent url("../images/quote_bg.png") no-repeat top left;
min-height: 50px;
margin: 20px 0 10px 0;
}
blockquote h2
{
font-weight: normal;
font-size: 20px;
}
blockquote h3
{
font-weight: normal;
font-size: 18px;
}
.middle
{
vertical-align: -30%;
}
.arrow_list, .check_list, .star_list
{
margin-top: 15px;
}
.arrow_list li
{
margin: 5px 0 0 20px;
list-style-image: url("../images/arrow_li.png");
}
.check_list li
{
margin: 5px 0 0 25px;
list-style-image: url("../images/tick_button.png");
}
.star_list li
{
margin: 5px 0 0 25px;
list-style-image: url("../images/icon_star.png");
}
#respond
{
width: 100%;
float: left;
margin: 0 0 40px 0;
}
#wrapper
{
width: 80%;
}
.logo_wrapper
{
margin: 29px 40px 0 0;
display: block;
float: left;
}
#menu_border_wrapper select
{
display: none;
}
.nav, .subnav
{
list-style: none;
display: block;
margin:26px 0 0 60px;
float: left;
font-family: 'Gnuolane';
}
.subnav
{
background: none;
}
.nav li
{
float: left;
margin: 0 30px 0 8px;
display: block;
}
.nav li a
{
text-transform:uppercase;
color: #b7b7b7;
font-size: 14px;
letter-spacing: 1px;
display: block;
}
.nav li ul
{
display: none;
padding: 10px 10px 5px 10px;
margin: 0 0 10px -10px;
list-style: none;
position:absolute;
float: left;
width: 150px;
height: 130px;
z-index: 999;
background: #fff;
border-bottom: 1px solid #ebebeb;
}
.nav li ul li a
{
width: 150px;
display: block;
}
.nav li ul li ul
{
display: none;
margin: -45px 0 0 140px;
}
.nav li ul li
{
line-height: 2.5em;
}
.nav li ul li a
{
font-size: 14px;
}
.nav li.current-menu-parent ul
{
display: none;
}
.nav li.current-menu-item > a, .nav li > a:hover, .nav li > a:active
{
color: #222;
}
body.home#pp_flow #footer, body.home #footer, body.single-gallery#pp_flow #footer
{
width: 960px;
margin: auto;
padding: 20px 0 0 0;
}
#footer
{
padding: 10px 0 10px 0;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
background: #fff;
bottom: 0;
left: 0;
width: 100%;
z-index: 998;
text-align: center;
font-family: 'Gnuolane';
}
#copyright
{
font-size: 11px;
margin: 60px 0 0 10px;
padding: 30px 0 0 30px;
float: left;
width: 250px;
height: 110px;
}
body.home #content_wrapper
{
padding-top: 20px;
}
#content_wrapper
{
width: 100%;
margin: -7px 0 0 0;
background: #f9f9f9;
color: #999;
}
#page_content_wrapper
{
width: 960px;
margin: auto;
padding: 30px 0 30px 0;
}
#page_content_wrapper .inner
{
width: 100%;
float: left;
margin: 0 0 0 0;
}
#view_slideshow
{
position: absolute;
background: #000000;
padding: 5px;
font-size: 11px;
top: 35px;
right: 20px;
z-index: 3;
cursor: pointer;
}
#move_next
{
position: fixed;
width: 60px;
height: 60px;
bottom: 250px;
right: 20px;
z-index: 2;
background: transparent url('../images/move_next.png') no-repeat center center;
display: block;
}
#move_prev
{
position: fixed;
width: 60px;
height: 60px;
bottom: 250px;
left: 20px;
z-index: 2;
background: transparent url('../images/move_prev.png') no-repeat center center;
display: block;
}
.card.desc h1
{
display: block;
padding: 0 0 30px 0;
border-bottom: 1px solid #ccc;
margin: 0 0 30px 0;
}
#content_wrapper .card
{
float: left;
height: 600px;
overflow: hidden;
margin: 0;
}
#content_wrapper .card .title
{
display: block;
position: relative;
top: -44px;
padding: 10px 0 10px 15px;
left: 0px;
width: 80%;
background: #000;
font-size: 11px;
}
#content_wrapper .card .title h2
{
color: #fff;
font-weight: bold;
font-size: 13px;
font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
}
#content_wrapper .card_content
{
background: #999;
color: #000;
height:200px;
top: -10px;
position: relative;
padding: 10px 15px 10px 15px;
}
#content_wrapper .card.desc
{
float: left;
padding: 30px 40px 30px 30px;
width: 260px;
background: transparent url('../images/kwicks_shadow.png') repeat-y center right;
}
.post_img
{
margin: 0 0 20px 5px;
}
.post_wrapper
{
width: 100%;
padding-bottom:20px;
margin: 0 0 40px 0;
float: left;
border-bottom: 1px solid #e0e0e0;
}
.post_wrapper.single
{
width: 100%;
margin: 0;
}
.post_header
{
width: 100%;
float: left;
margin-bottom: 5px;
margin-top: -10px;
}
.post_header h2
{
color: #999;
font-size: 24px;
}
.post_detail
{
float:left;
margin: -5px 0 0 0;
}
.post_social
{
margin-top: 20px;
}
.post_header .post_detail, .recent_post_detail
{
font-size: 11px;
width: 100%;
padding: 5px 10px 15px 8px;
margin: 0;
}
.tagcloud
{
margin: 10px 0 10px 3px;
}
#about_the_author
{
width: 98%;
float: left;
background: #fff;
border-bottom: 1px solid #ccc;
}
#about_the_author .header span
{
display: block;
padding: 10px 0 10px 20px;
font-size: 14px;
}
#about_the_author .thumb
{
width: 80px;
float: left;
margin: 20px 0 0 20px;
}
#about_the_author .thumb img
{
padding: 3px;
width: 50px;
}
#about_the_author .description
{
width: 370px;
float: left;
padding: 20px 0 20px 0;
}
.comment .left img.avatar
{
width: 50px;
border: 3px solid #fff;
}
.comment
{
width: 630px;
margin-bottom: 20px;
padding: 10px;
float: left;
background: #fff;
}
.comment .left
{
width: 80px;
float: left;
}
.comment .right
{
width: 65%;
float: left;
}
#page_content_wrapper ul.children
{
list-style: none;
float: left;
margin: 0 0 15px 0;
width: 650px;
border: 0;
}
ul.children .comment
{
width: 70%;
margin: 0px 0 0 90px;
padding: 10px 0 10px 15px;
float: left;
background: transparent;
border-left: 1px solid #e0e0e0;
}
ul.children ul.children .comment
{
width: 40%;
margin: 0 0 40px 170px;
padding: 15px 0 15px 15px;
float: left;
}
.arrow_list, .check_list, .star_list
{
margin-top: 15px;
}
.arrow_list li
{
margin: 5px 0 0 20px;
list-style-image: url("../images/arrow_li.png");
}
.one_half
{
float: left;
width: 47%;
}
.one_half.last
{
position: relative;
left: 5%;
}
.one_third
{
width: 30%;
float: left;
min-height: 50px;
margin-right: 3%;
}
.one_third.last
{
margin-right: 0;
}
.two_third
{
float: left;
width: 64%;
margin-right: 3%;
}
.one_fourth
{
width: 22%;
float: left;
margin-right: 3%;
margin-bottom: 2%;
}
.one_fourth.last
{
margin-right: 0;
}
.one_fifth
{
width: 14%;
float: left;
margin-right: 6%;
margin-bottom: 2%;
}
.one_fifth.last
{
margin-right: 0;
}
.one_sixth
{
width: 11%;
float: left;
margin-right: 6%;
margin-bottom: 2%;
}
.one_sixth.last
{
margin-right: 0;
}
.cufon.space
{
margin-bottom: 15px;
}
#content_slider_wrapper
{
width: 100%;
height: 20px;
background: transparent;
position: fixed;
bottom: 200px;
}
#content_slider
{
width: 90%;
height: 20px;
background: transparent;
margin: 0;
cursor: pointer;
position: relative;
}
#content_slider .ui-slider-handle
{
width: 11%;
background: transparent url('../images/000_slider.png') repeat center center;
height: 20px;
margin: 0;
position: absolute;
display: block;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#page_content_wrapper ul
{
margin: 10px 0 10px 20px;
}
#page_content_wrapper .inner .sidebar_content
{
width: 650px;
padding: 0 30px 0 0;
float: left;
}
#page_content_wrapper .inner .sidebar_content.full_width
{
width: 960px;
}
#page_content_wrapper .inner .sidebar_content h1
{
display: block;
margin: 0;
}
#page_content_wrapper .inner .sidebar_wrapper
{
width: 280px;
float: left;
}
#page_content_wrapper .inner .sidebar_wrapper .sidebar
{
width: 260px;
float: left;
}
#page_content_wrapper .inner .sidebar_wrapper .sidebar .content
{
width: 100%;
margin: -25px 10px 0 20px;
}
/*
Input layout
*/
input[type=text], input[type=password]
{
padding: 10px;
font-size: 12px;
font-family: Helvetica, Arial,Verdana,sans-serif;
margin: 0;
background: #fff;
border: 0;
color: #666;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
input[type=text].blur, textarea.blur
{
color: #999;
font-style: italic;
}
label
{
font-weight: bold;
color: #797979;
}
textarea
{
padding: 10px;
font-size: 12px;
color: #666;
margin: 0;
height: 200px;
overflow: auto;
background: #fff;
font-family: Helvetica, Arial,Verdana,sans-serif;
border: 0;
border-top: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
border-bottom: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
input[type=submit], input[type=button], a.button, a.comment-reply-link
{
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 12px/100% Helvetica, Arial,Verdana,sans-serif;
padding: .5em 2em .55em;
color: #fff;
text-shadow: 0 -1px #666;
border: solid 1px #888888;
background: #888888;
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#888888));
background: -moz-linear-gradient(top, #cccccc, #888888);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#888888');
}
a.comment-reply-link
{
margin: 10px 0 5px 0;
padding: .5em .7em .55em;
}
a.button
{
padding-top:8px;
}
input[type=submit].medium, input[type=button].medium, a.button.medium
{
font: 16px/100% Arial, Helvetica, sans-serif;
}
input[type=submit].large, input[type=button].large, a.button.large
{
font: 20px/100% Arial, Helvetica, sans-serif;
}
input[type=submit]:active, input[type=button]:active, a.button:active, a.comment-reply-link:active
{
position: relative;
top: 1px;
left: 1px;
background: #888888;
background: -webkit-gradient(linear, left top, left bottom, from(#888888), to(#cccccc));
background: -moz-linear-gradient(top, #888888, #cccccc);
}
input[type=submit].left, input[type=button].left, a.button.left
{
float: left;
}
input[type=submit].right, input[type=button].right, a.button.right
{
float: right;
}
input[type=submit].center, input[type=button].center, a.button.center
{
margin: auto;
}
a.cufon
{
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
}
.pagination {
margin: 0;
text-align: left;
font-size: 11px;
font-weight: bold;
margin-left: 10px;
}
.pagination a {
}
.pagination a:hover, .pagination a:active, .pagination a.active {
}
#anything_slider, .slideshow
{
width: 940px;
height: 400px;
margin: auto;
position: relative;
clear: both;
}
.slideshow
{
margin: 0 0 15px 0;
}
#anything_slider .wrapper, .slideshow .wrapper{
width: 939px;
overflow: hidden;
height: 400px;
margin: 0;
position: absolute;
}
.slideshow .wrapper
{
padding: 5px;
}
#anything_slider .wrapper ul, .slideshow .wrapper ul{
width: 30000px;
list-style: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
}
#anything_slider ul li, .slideshow ul li { display: block; float: left; padding: 0; height: 391px; width: 959px; margin: 0; }
#anything_slider #start-stop, .slideshow #start-stop
{
display: none;
}
#anything_slider .arrow, .slideshow .arrow
{
position: relative;
top: 450px;
left: -813px;
display:block;
width: 40px;
height: 40px;
cursor: pointer;
float: right;
margin-right: 7px;
}
#anything_slider .arrow.forward, .slideshow .arrow.forward
{
background: transparent url('../images/right_slide_nav.png') no-repeat;
text-indent: -9999px;
}
#anything_slider .arrow.back, .slideshow .arrow.back
{
background: transparent url('../images/left_slide_nav.png') no-repeat;
text-indent: -9999px;
}
#anything_slider a.arrow:hover, .slideshow a.arrow:hover
{
/* CSS3 standard */
opacity:0.6;
}
.slideshow #thumbNav
{
position: relative;
clear: both;
top: 94%;
}
/*@-moz-document url-prefix() { .slideshow #thumbNav { margin-top: 52% } } */
#thumbNav a{
display:block;
width: 14px;
height: 14px;
background: url(../images/slider_bullet_nav.png) no-repeat 0 -14px;
border:0;
margin-right: 3px;
float: left;
cursor: pointer;
position: relative;
top: 140px;
left: 0;
padding-right: 4px;
cursor: pointer;
color: transparent;
text-indent: -9999px;
}
.slideshow #thumbNav a
{
top: 0;
}
#thumbNav a:hover{ background-position: 0 0px; }
#thumbNav a.cur{ background-position: 0 0; }
.caption-left h3, .caption-right h3, .caption-bottom h3
{
color: #b11623;
line-height: 0.9em;
text-transform: uppercase;
font-size: 40px;
padding-top: 25px;
letter-spacing: -2px;
display: none;
}
.caption-left p, .caption-right p, .caption-bottom p
{
color: #fff;
margin: 10px 0 0 3px;
}
@-moz-document url-prefix() { .caption-left p, .caption-right p, .caption-bottom p { margin-top: 30px } }
.caption-left
{
background: #000;
width: 300px !important;
position: relative;
top: -200px;
padding: 0 12px 20px 15px;
z-index: 999;
display: none;
}
.caption-right
{
width: 300px;
background: transparent;
position: relative;
left: 612px;
padding: 0 12px 20px 15px;
top: -200px;
z-index: 999;
display: none;
}
#page_content_wrapper .sidebar .content .sidebar_widget li
{
margin: 20px 0 40px 0;
padding: 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li h2
{
font-size: 20px;
display: block;
text-align: left;
}
#page_content_wrapper .sidebar .content .sidebar_widget li:first-child
{
padding-top: 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul
{
list-style: none;
margin: 0 0 15px 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul li:first-child
{
border-top: 1px solid #e0e0e0;
padding: 10px 0 10px 0;
margin: 10px 0 0 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul li
{
padding: 10px 0 10px 0;
border-bottom: 1px solid #e0e0e0;
margin: 0 0 0 0;
}
#page_content_wrapper table#wp-calendar
{
background: #fff;
color: #999;
border: 1px solid #e0e0e0;
margin-bottom: 30px;
font-size: 1.1em;
width: 100%;
}
#page_content_wrapper table#wp-calendar a
{
color: #222;
font-weight: bold;
}
#page_content_wrapper table#wp-calendar caption
{
text-align: center;
padding: 10px 0 10px 0;
font-weight: bold;
border-top: 1px solid #e0e0e0;
}
#page_content_wrapper table#wp-calendar tr th, #page_content_wrapper table#wp-calendar tr td
{
padding: 0 8px 0 7px;
border-bottom: 0;
}
table#wp-calendar tr th
{
background: #ebebeb;
}
#page_content_wrapper table#wp-calendar tfoot tr
{
display: none;
}
#page_content_wrapper .sidebar .content .sidebar_widget li.widget_calendar h2, #searchsubmit
{
margin-top: 10px;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.flickr
{
list-style: none;
margin: 5px 0 30px 0;
float: left;
display: block;
padding: 0 0 3px 0;
}
#page_content_wrapper .sidebar .content .posts.blog li img, #page_content_wrapper .posts.blog li img
{
float: left;
margin: 0 10px 2px 0;
width: 50px;
}
#page_content_wrapper .sidebar .content .sidebar_widget, #page_content_wrapper .sidebar .content .posts.blog
{
list-style: none;
margin-left: 0;
padding: 0;
}
#page_content_wrapper .sidebar .content .posts.blog li
{
padding: 15px 0 15px 0;
}
#page_content_wrapper .sidebar .content .posts.blog
{
list-style: none;
margin-top: 10px;
font-size: 11px;
}
#page_content_wrapper .sidebar .content .posts.blog li, #page_content_wrapper .posts.blog li
{
clear: both;
background: none;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.flickr li, #content_wrapper .sidebar .content .sidebar_widget li ul.flickr li a
{
display: block;
float: left;
margin: 0 5px 5px 0;
padding: 0;
border: 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.flickr li img
{
padding: 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.twitter
{
margin: 0;
margin-top: 10px;
list-style:none;
font-size: 11px;
padding: 0 0 3px 0;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.twitter li
{
padding-left:32px;
padding-bottom: 10px;
padding-top: 10px;
background-image:url(../images/icon_twitter_bird.png);
background-repeat:no-repeat;
background-position:0px 12px;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.social_media
{
list-style: none;
margin: 10px 0 15px 0;
float: left;
display: block;
padding: 0 0 3px 0;
margin-left: -5px;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.social_media li
{
display: block;
float: left;
margin: 0 5px 0 0;
}
ul.list
{
margin: 5px 0 0 20px;
}
/*
* jQuery Nivo Slider v2.1
* http://nivo.dev7studios.com
*
* Copyright 2010, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width: 960px;
height: 340px;
margin: auto;
background: #000 url('../images/ajax-loader.gif') no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
/* The slices in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
right:-10px;
bottom:-10px;
padding: 10px;
width: 400px;
height: auto;
z-index:89;
background: transparent;
display:none;
z-index:9999;
text-align: right;
}
.nivo-caption.right {
right: 0;
}
.nivo-caption h4
{
color: #fff;
font-size: 13px;
letter-spacing: 2px;
}
.nivo-caption p {
padding:10px 15px 10px 15px;
margin:0;
}
.nivo-caption a.button
{
text-shadow: -1px 0 1px #000;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:block;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav
{
display: none;
}
.nivo-directionNav a {
position:relative;
top:120px;
z-index:99;
cursor:pointer;
width: 40px;
height: 80px;
display: block;
}
.nivo-directionNav a.nivo-prevNav {
background: transparent url('../images/left_slide_nav.png') no-repeat center 15px;
text-indent: -9999px;
left: 20px;
}
.nivo-directionNav a.nivo-nextNav {
background: transparent url('../images/right_slide_nav.png') no-repeat center 15px;
text-indent: -9999px;
left: 895px;
top: 42px;
}
.nivo-prevNav:active {
background: transparent url('../images/left_slide_nav_dark.png') no-repeat center 15px;
}
.nivo-nextNav:active {
background: transparent url('../images/right_slide_nav_dark.png') no-repeat center 15px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav
{
display: none;
background: transparent;
z-index:99;
float: none;
margin: auto;
padding: 13px 0 0 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
width:auto;
top:301px;
left: 5px;
}
#slider_wrapper .nivo-controlNav
{
width: 950px;
}
.nivoslide .nivo-controlNav
{
top: 0;
width: auto;
left: 0;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
width: 14px;
height:14px;
background: transparent url('../images/bullet_nav_bg.png') no-repeat top;
display: block;
float: left;
text-indent: -9999px;
margin: 0 7px 0 0;
opacity: 1;
}
.nivo-controlNav a:hover, .nivo-controlNav a.active {
background: transparent url('../images/bullet_nav_bg_active.png') no-repeat top;
opacity: 1;
}
.nivo-controlNav {
position:absolute;
bottom: 0px; /* Put the nav below the slider */
position:absolute;
}
.nivo-controlNav img {
display:inline; /* Unhide the thumbnails */
position:relative;
margin-right:10px;
}
.nivo-html-caption {
display: none;
}
.highlight_yellow
{
background: #ffc600;
color: #000;
text-shadow: -1px 0 1px #fff;
}
.highlight_black
{
background: #000;
color: #fff;
}
#page_content_wrapper ul.twitter
{
margin: 0;
list-style:none;
}
#page_content_wrapper ul.twitter li
{
padding-left:32px;
background-image:url(../images/icon_twitter_bird.png);
background-repeat:no-repeat;
background-position:0px 0.3em;
padding-bottom: 2em;
}
#page_content_wrapper .sidebar .content .sidebar_widget li ul.flickr, ul.flickr
{
list-style: none;
margin: 15px 0 -20px 0;
float: left;
display: block;
clear: both;
}
ul.flickr li
{
float: left;
margin: 0 5px 5px 0;
}
#page_content_wrapper .sidebar .content .posts.blog li strong.header, #page_content_wrapper .posts.blog li strong.header
{
font-weight: bold;
font-size: 13px;
}
.gallery-caption
{
font-weight: bold;
}
#imageFlow {
position: absolute;
width: 100%;
height: 80%;
left: 0%;
top: 14%;
overflow: hidden;
background: transparent;
}
#imageFlow .diapo {
position: absolute;
left: -4000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #fff 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: 16%;
text-align: center;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left: 10%;
bottom: 10%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 1%;
width: 98%;
height: 10px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
#imageFlow .arrow-left {
position: absolute;
display: none;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
display: none;
}
#imageFlow .bar {
position: absolute;
height: 10px;
left: 0;
width: 100px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
}
.diapo {
opacity: 1;
}
.diapo.current {
opacity: 1;
}
.top_right
{
float: right;
margin: 30px 0 0 0;
}
.top_right img
{
float: left;
margin: 0 5px 0 0;
}
.small_thumb
{
width: 75px;
height: 75px;
float: left;
margin: 0 5px 5px 0;
}
#top_bar
{
background: #fff;
z-index: 999;
width: 960px;
margin: auto;
}
body.home #top_bar
{
padding-bottom: 20px;
}
.accordion
{
}
.accordion h3, .accordion div
{
border: 0;
background: transparent;
}
.pp_accordion, .pp_accordion_close
{
margin:0;
margin-bottom: 10px;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus
{
}
.ui-corner-all, .ui-corner-top, .ui-corner-bottom
{
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-state-default, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, .ui-widget-content
{
}
.ui-accordion .ui-accordion-header
{
font-weight: bold;
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 0 10px 0;
}
.ui-accordion-content
{
border-top: 1px solid #ccc;
}
.pp_accordion
{
}
.accordion div
{
border-top: 1px solid #ebebeb;
}
.accordion h3
{
padding: 5px 0 5px 8px;
}
.ui-accordion .ui-accordion-header .ui-icon
{
left: 10px;
}
.ui-tabs-panel
{
margin-top: 10px;
-moz-box-shadow: 0 1px 3px #ccc;
-webkit-box-shadow: 0 1px 3px #ccc;
box-shadow: 0px 1px 3px #ccc;
}
.ui-widget-header
{
border-bottom: 1px solid #ebebeb;
}
.tabs .ui-state-default
{
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ebebeb));
background: -moz-linear-gradient(top, #ffffff, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb');
}
.tabs .ui-state-default a
{
color: #999;
}
.ui-tabs .ui-tabs-nav li a
{
padding: 5px 20px 5px 20px;
font-size: 14px;
}
.tabs .ui-state-active
{
font-weight: bold;
background: #fff;
text-shadow: 0 1px 1px #fff;
display: block;
}
.tabs .ui-widget-header
{
border: 0;
}
.tabs .ui-tabs-panel
{
border: 1px solid #ccc;
margin:0;
padding-top: 0em;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ebebeb));
background: -moz-linear-gradient(top, #ffffff, #ebebeb);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ebebeb');
}
.tabs .ui-state-active a
{
color: #666;
font-weight: bold;
}
.ui-tabs li:first-child
{
margin-left: -2px;
}
.rm_wrapper{
width:1160px;
margin:0 auto;
position:relative;
}
.rm_container{
width:1050px;
overflow:hidden;
position:relative;
height:530px;
margin:0 auto;
}
.rm_container h2{
padding:10px 30px;
position:absolute;
bottom:170px;
right:0px;
color:#444;
background: #f9f9f9;
font-size:36px;
text-transform:uppercase;
text-shadow:1px 0px 1px #fff;
}
.rm_container ul{
width:1170px;
}
.rm_container ul li{
float:left;
margin-left:-80px;
position:relative;
overflow:hidden;
width:305px;
height:465px;
border:30px solid #f9f9f9;
border-width:50px 30px 0px 30px;
background-color:#f9f9f9;
}
.rm_container ul li img{
position:absolute;
top:0px;
left:0px;
cursor: pointer;
}
.rm_mask_right, .rm_mask_left{
position: absolute;
height: 110px;
background: #f9f9f9;
width: 530px;
bottom: -30px;
left: 0px;
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.rm_mask_right{
left:auto;
right:0px;
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);
transform:rotate(3deg);
}
.rm_corner_right, .rm_corner_left{
background: #f9f9f9;
position:absolute;
width:200px;
height:100px;
bottom:0px;
left:-65px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.rm_corner_right{
left:auto;
right:-65px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.rm_nav a{
position:absolute;
top:200px;
width:38px;
height:87px;
cursor:pointer;
opacity:0.7;
}
.rm_nav a:hover{
opacity:1.0;
}
.rm_nav a.rm_next{
background:transparent url(../images/next.png) no-repeat top left;
right:0px;
}
.rm_nav a.rm_prev{
background:transparent url(../images/prev.png) no-repeat top left;
left:0px;
}
.rm_controls{
position:absolute;
top:0px;
left:-40px;
height:20px;
}
.rm_controls a{
cursor:pointer;
opacity:0.7;
padding-left:24px;
font-size:16px;
text-transform:uppercase;
height:20px;
float:left;
line-height:20px;
}
.rm_controls a:hover{
opacity:1.0;
}
.rm_controls a.rm_play{
display:none;
visibility: hidden;
}
.rm_controls a.rm_pause{
display: none;
visibility: hidden;
}
.social_wrapper
{
float: right;
margin: 0 -215px 0 -50px;
}
.social_wrapper ul
{
list-style: none;
}
.social_wrapper li
{
float: left;
}
#jquery_jplayer_1
{
display: none;
}
#jp_interface_1
{
float: left;
margin: 2px 3px 0 0;
}
.jp-play, .jp-pause
{
float: right;
position: static;
width: 22px;
height: 20px;
background:transparent url(../images/sound_off.png) no-repeat left center;
text-indent: -9999px;
z-index: 998;
}
.jp-pause
{
background:transparent url(../images/sound_on.png) no-repeat left center;
}
#imageflow .title {
font-size: 14px;
color: #555;
}
/*
Recaptcha Style Captcha
=======================
re-Captcha Style Captcha with php and jQuery
Created By: Zeeshan Rasool
URL : http://www.99Points.info
Get JQuery, PHP, AJAX, Codeigniter and MYSQL Tutorials and Demos on Blog
*/
#captcha-wrap{
border:solid #870500 1px;
width:270px;
-webkit-border-radius: 10px;
float:left;
-moz-border-radius: 10px;
border-radius: 10px;
background:#870500;
text-align:left;
padding:3px;
margin-top:3px;
height:107px;
}
#captcha-wrap .captcha-box{
-webkit-border-radius: 7px;
background:#fff;
-moz-border-radius: 7px;
border-radius: 7px;
text-align:center;
border:solid #fff 1px;
}
#captcha-wrap .text-box{
-webkit-border-radius: 7px;
background:#ffdc73;
-moz-border-radius: 7px;
width:140px;
height:43px;
float:left;
margin:4px;
border-radius: 7px;
text-align:center;
border:solid #ffdc73 1px;
}
#captcha-wrap .text-box input{
width:120px;
-webkit-appearance: textfield;
padding: 1px;
background-color: white;
border: 2px inset;
border-image: initial;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
cursor: auto;
float: none;
margin-top: -2px;
}
#captcha-wrap .text-box label{
color:#000000;
font-family: helvetica,sans-serif;
font-size:11px;
width:140px;
padding-top:3px;
padding-bottom:3px;
margin: 0;
font-weight: normal;
}
#captcha-wrap .captcha-action{
float:right; width:117px;
background:url(../images/logos.jpg) top right no-repeat;
height:44px; margin-top:3px;
}
#captcha-wrap img#captcha-refresh{
margin-top:9px;
border:solid #333333 1px;
margin-right:6px;
cursor:pointer;
}
Sean H comments:
Hi kidd,
that's a lot of work for $1. send me a private message if you want to discuss a higher rate.
cheers
Sean