/* Theme Name: MediaSprout Theme URI: http://mediasprout.com Description: Custom Media Sprout theme. Version: 2.8 Author: Brandon Setter Author URI: http://media-sprout.com Tags: default, naked, clean, basic */ /* ******************************************************************* */ /* MASTER RESET */ * {margin: 0; padding: 0; outline: 0; text-decoration: none;} html, body, form {height: 100%; background: #fff;} #wrapper {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px; /* the bottom margin is the negative value of the footer's height */} #push {height: 250px; /* .push must be the same height as .footer */} #footer {height: 250px; background: url(images/footer.jpg) repeat-x;} :focus {outline: 0;} a img {border: 0;} /* TABLES */ table {border-collapse: collapse; border-spacing: 0;} caption, th, td {text-align: left;} /* ALIGNMENT */ .alignleft {float: left; padding: 0 5px 10px 0;} .alignright {float: right; padding: 0 0 10px 5px;} .clear {clear: both; height: 1px; margin: 0; padding: 0;} .clearfloat {clear: both; height: 1px; margin: 0; padding: 0;} .hide {display: none;} .show {display: block;} img.alignleft {border: none; padding: 0 10px 10px 0;} img.alignright {border: none; padding: 0 0 10px 10px;} .wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px } /* HEADER & HEADER LINKS */ h1, h2, h3, h4, h5, h6 {font-family: Arial,sans-serif; line-height: 100%; font-weight: bold;} h1 {font-size: 33px; padding: 0 0 10px 0; font-weight: 100; color: #00b6de;} h2 {font-size: 30px; padding: 0 0 10px 0; font-weight: 100; color: #00b6de;} h3 {font-size: 22px; padding: 0 0 10px 0; font-weight: 100; color: #666;} h4 {font-size: 20px; padding: 0 0 10px 0; font-weight: 100; color: #666;} h5 {font-size: 18px; padding: 0 0 5px 0; font-weight: 100; color: #666;} h6 {font-size: 16px; padding: 0 0 5px 0; font-weight: 100; color: #666;} h1 a, h1 a:link, h1 a:visited {font-size: 33px; padding: 0 0 10px 0; font-weight: 100; color: #00b6de;} h2 a, h2 a:link, h2 a:visited {font-size: 30px; padding: 0 0 10px 0; font-weight: 100; color: #00b6de;} h3 a, h3 a:link, h3 a:visited {font-size: 22px; padding: 0 0 10px 0; font-weight: 100; color: #00b6de;} h4 a, h4 a:link, h4 a:visited {font-size: 20px; padding: 0 0 10px 0; font-weight: 100; color: #00b6de;} h5 a, h5 a:link, h5 a:visited {font-size: 18px; padding: 0 0 5px 0; font-weight: 100; color: #00b6de;} h6 a, h6 a:link, h6 a:visited {font-size: 16px; padding: 0 0 5px 0; font-weight: 100; color: #00b6de;} h1 a, h1 a:hover, h2 a, h2 a:hover, h3 a, h3 a:hover, h4 a, h4 a:hover, h5 a, h5 a:hover, h6 a, h6 a:hover {color: #333;} /* LINKS */ a, a:visited {color: #00b6de;} a:hover {color: #333;} /* HORIZONTAL RULE */ hr {border: 0; width: 100%; color: #ccc; background-color: #ccc; height: 8px; margin: 20px 0 30px 0;} /* GLOBAL BUTTONS */ div.clearbutton {clear:both; height:0; font-size: 1px; line-height: 1px;} a.GlobalOrangeButton span {background: transparent url("images/GlobalButtons/button_left_orange.png") no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} a.GlobalOrangeButton {background: transparent url("images/GlobalButtons/button_right_orange.png") no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;} a.GlobalOrangeButton:hover span {background-position: 0 -34px; color: #fff;} a.GlobalOrangeButton:hover {background-position: right -34px;} a.GlobalRedButton span {background: transparent url("images/GlobalButtons/button_left_red.png") no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} a.GlobalRedButton {background: transparent url("images/GlobalButtons/button_right_red.png") no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;} a.GlobalRedButton:hover span {background-position: 0 -34px; color: #fff;} a.GlobalRedButton:hover {background-position: right -34px;} a.GlobalBlueButton span {background: transparent url("images/GlobalButtons/button_left_blue.png") no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} a.GlobalBlueButton {background: transparent url("images/GlobalButtons/button_right_blue.png") no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;} a.GlobalBlueButton:hover span {background-position: 0 -34px; color: #fff;} a.GlobalBlueButton:hover {background-position: right -34px;} a.GlobalBlackButton span {background: transparent url("images/GlobalButtons/button_left_black.png") no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff;} a.GlobalBlackButton {background: transparent url("images/GlobalButtons/button_right_black.png") no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;} a.GlobalBlackButton:hover span {background-position: 0 -34px; color: #fff;} a.GlobalBlackButton:hover {background-position: right -34px;} pre {background: #eee; padding: 10px; border: 2px solid #00b6de; overflow: hidden; margin: 0 0 15px 0; width: 640px; font-family: Courier, Monospace;} /* ******************************************************************* */ /* LAYOUT AND BLOCKING */ /* Twitter Thingy */ .twtr-ft { display: none; } /* HEADER OVERLAYS */ #topleft { position:absolute; left:0; top:0; width: 280px; height: 52px; z-index:10; background: url(images/topleft.png) no-repeat;} #logo { position:absolute; right:100px; top:0; z-index:11; width: 472px; height: 158px;} #rss a { position:absolute; right:297px; top:0; z-index:11; width: 109px; height: 80px; background: url(images/topright-rss.png) top no-repeat; text-indent: -9999;} #rss a:hover { background-position: 0 -80px;} #twitter a { position:absolute; right:251px; top:0; z-index:11; width: 46px; height: 60px; float: left; background: url(images/topright-twitter.png) top no-repeat; text-indent: -9999;} #twitter a:hover { background-position: 0 -60px;} #face a { position:absolute; right:200px; top:0; z-index:11; width: 51px; height: 80px; float: left; background: url(images/topright-face.png) top no-repeat; text-indent: -9999;} #face a:hover { background-position: 0 -81px;} #topright { position:absolute; right:0; top:0; z-index:11; width: 200px; height: 117px; float: left; background: url(images/topright-topright.png) left no-repeat;} /* MAINMENU */ #menu { position:relative; top:60px; z-index:11; height: 40px; list-style: none; margin-bottom: 120px;} #menu ul, #menu ul li { margin: 0 3px; list-style: none; display: inline; float: left; display: block;} #menu ul li a { color: #fffff9; font: italic 18px Georgia; background: #00b6dd; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; line-height: 30px;} #menu ul li a:hover, #menu ul li.current_page_item a { color: #00b6dd; background: #333; -moz-border-radius: 5px; -webkit-border-radius: 5px;} /* NAV DROP DOWN */ #menu ul li ul { position: absolute; display: none; background: #333; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;} #menu ul li ul li { float: none; display:block;} #menu ul li ul li a, #menu ul li ul li a:visited { padding:5px; line-height: 20px; color:#fffff9; background: #333; font-size:14px; font-weight:100; text-decoration:none; clear:both; display: block; -moz-border-radius: 0px; -webkit-border-radius: 0px;} #menu ul li ul li a:hover { color:#00b6dd; background: #333;} /* Categories */ .tagList li a { color: #fffff9; font: italic 18px Georgia; background: #00b6dd; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; line-height: 30px;} .tagList li a:hover, .tagList li a.current_page_item { color: #00b6dd; background: #333; -moz-border-radius: 5px; -webkit-border-radius: 5px;} /* LAYOUT */ #main-centered-wrapper { width: 1000px; margin: 0 auto; font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.5em; color:#666666;} /* LATEST WORK */ #latestwork { width: 1000px; height: 495px; margin: 0 auto; margin-top: -90px;} #latestwork .top { width: 960px; height: 149px; background: url(images/latestwork-top.png) no-repeat;} #latestwork #center { width: 960px; height: 255px; overflow: hidden;} #latestwork #center .left { width: 104px; height: 255px; background: url(images/latestwork-left.png) no-repeat; float: left;} #latestwork #center .center { width: 752px; height: 255px; background: #00b6dd; float: left; overflow: hidden;} #latestwork #center .right { width: 104px; height: 266px; background: url(images/latestwork-right.png) no-repeat; float: left;} #latestwork .bottom { width: 960px; height: 150px; background: url(images/maincontent-top.png) no-repeat; } /* HOME COLUMN MAIN CONTENT */ #homecolumns { width: 100%; margin-top: -20px;} #homecolumns .homepost { height: 155px; background: #fff; border: 10px solid #eee; padding: 10px; margin:0 0 18px 0; overflow: hidden; -moz-border-radius: 5px; } #homecolumns .homepost:hover { -moz-box-shadow: 0 0 4px #999999; } #homecolumns #leftcolumn { width: 240px; float: left; margin-right: 12px;} #homecolumns #centercolumn { width: 240px; float: left; margin-right: 12px;} #homecolumns #centercolumn2 { width: 240px; float: left; margin-right: 12px;} #homecolumns #rightcolumn { width: 240px; float: left;} #homecolumns ul li { font-family:Arial, Helvetica, sans-serif; font-size:13px; line-height:1.5em; color:#666666; margin-bottom:13px; padding: 10px; list-style: none; display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px;} #homecolumns h2, #homecolumns h2 a { font-size: 14px; font-weight: bold; color: #00b6dd; padding: 0 0 12px; 0; margin: 0;} #homecolumns h2 a:hover { color: #333;} div#homethumbnail { width: 200px; height: 130px; overflow: hidden; } div#homethumbnail img { width: 230px; } /* TWO COLUMN MAIN CONTENT */ #twocolumn { width:100%; font-family:Arial, sans-serif; color:#666666; font-size:14px; margin-bottom:13px; line-height:1.5em;} #twocolumn p { padding: 0 0 20px 0;} #twocolumn img { max-width: 660px;} #twocolumn:after { clear: both; height: 1%;} #twocolumn #top { width: 960px; height: 132px; padding: 55px 0 0 0; background: url(images/twocolumn-top.png) bottom no-repeat;} #twocolumn #title { width: 960px; height: 58px; background: url(images/twocolumn-title.png) top no-repeat;} #twocolumn #title h1 { color: #fffff9; font-size: 35px; padding: 10px 0 0 40px;} #twocolumn #bot { width: 960px; height: 129px; background: url(images/twocolumn-bot2.png) top no-repeat;} #twocolumn #leftcolumn { width: 720px; float: left;} #twocolumn #rightcolumn { width: 260px; float: left; margin: 0 0 0 20px;} #twocolumn #leftcolumn ul {padding: 3px 0 10px 30px; list-style-type: disc inside;} #twocolumn #rightcolumn ul li {padding: 3px 4px; list-style: none; display: block;} #twocolumn #leftcolumn ol {padding: 3px 0 20px 30px; list-style-type: decimal inside;} #twocolumn #rightcolumn ol li {padding: 3px 4px; list-style: none; display: block;} /* ANYTHING SLIDER */ .anythingSlider { width: 752px; height: 255px; position: relative; margin: 0 auto; } .anythingSlider .wrapper { width: 752px; overflow: auto; height: 255px; margin: 0 0; position: absolute; top: 0; left: 0; } .anythingSlider .wrapper ul { width: 99999px; list-style: none; position: absolute; top: 0; left: 0; background: #00b6dd; } .anythingSlider ul li { display: block; float: left; padding: 0; height: 255px; width: 752px; margin: 0; } .anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 35px; cursor: pointer; z-index: 100; opacity:0.4;filter:alpha(opacity=40)} .anythingSlider .forward { background-position: 0 0; right: -27px; } .anythingSlider .back { background-position: -67px 0; left: -27px; } .anythingSlider .forward:hover { background-position: 0 -200px; } .anythingSlider .back:hover { background-position: -67px -200px; } .anythingSlider .wrapper ul ul { position: static; margin: 0; overflow: visible; width: auto; border: 0; } .anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; } /* SLIDER TEXT AREA */ .anythingSlider .wrapper #textarea { float: right; width: 320px; height: 235px; overflow: hidden; margin-right: 54px; color: white; padding-top: 20px; } .anythingSlider .wrapper #textarea h2 a, .anythingSlider .wrapper #textarea h2 a:visited { color: white; font-size: 26px; } .anythingSlider .wrapper #textarea h2 a:hover { color: #333; } .anythingSlider .wrapper #textarea a.button { background: #eee; color: #00b6dd; } .anythingSlider .wrapper #textarea a.button:hover { background: #333; color: #00b6dd; } .anythingSlider .wrapper #imgarea { float: left; width: 320px; height: 205px; overflow: hidden; margin-left: 48px; padding-top: 15px; } .anythingSlider .wrapper #imgarea img { width: 320px; padding: 10px 0 0 0; } /* POSTS AND SIDEBAR */ .widget { background: #fbfbfb; border: 10px solid #eee; padding: 10px; margin: 0 0 20px 0; list-style-type: none; -moz-border-radius: 5px;} .widget h2, .widget h2 a { padding: 0 0 3px 0; font-size: 24px; } .widget h2 a img { display: none; } .widget:hover { -moz-box-shadow: 0 0 4px #999999; } .widget li { list-style-type: none; border-bottom: 1px solid #eee; font-size: 13px; line-height: 15px; } .post, .hentry { background: #fff; border: 10px solid #eee; padding: 20px; margin:0 0 10px 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* POST HEADER AND DATE */ .post:hover { -moz-box-shadow: 0 0 4px #999999; } .post-header { } .post-header .date { float:left; width:43px; margin: 6px 8px 0 0; border:1px solid #eee; text-align:center; color:#777; } .post-header .date .month { font-weight:bold; background:#fff; font-size:85%; } .post-header .date .day { font-size:1.60em; background:#eee; } .post-header .details { width:604px; float:left; } .post-header .details h2, .post-header .details h2 a { margin:4px 0 0 0; padding: 0; } .post-header .details .meta { margin: 0 0 10px 0; } .post-header .details .comments {} div#postthumbnail { width: 275px; height: 180px; float: left; padding: 0 10px 0 0; overflow: hidden; } div#postthumbnail img { width: 275px; } div#postexcerpt { width: 375px; float: left; } /* BUTTON STYLE */ a.button { color: #fffff9; font: italic 14px Georgia; background: #00b6dd; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 5px; line-height: 16px;} a.button:hover { color: #00b6dd; background: #333; -moz-border-radius: 5px; -webkit-border-radius: 5px;} /* COMMENT STYLES */ .authcomment { background-color: #fff !important; } ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; border: 10px solid #eee; -webkit-border-radius: 8px; -moz-border-radius: 8px; } ol.commentlist li {} ol.commentlist li.alt {} ol.commentlist li.bypostauthor {} ol.commentlist li.byuser {} ol.commentlist li.comment-author-admin {} ol.commentlist li.comment { padding:1em; } ol.commentlist li.comment div.comment-author {} ol.commentlist li.comment div.vcard { font:normal 16px georgia,times,serif; } ol.commentlist li.comment div.vcard cite.fn { font-style:normal; } ol.commentlist li.comment div.vcard cite.fn a.url {} ol.commentlist li.comment div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; } ol.commentlist li.comment div.vcard img.avatar-32 {} ol.commentlist li.comment div.vcard img.photo {} ol.commentlist li.comment div.vcard span.says {} ol.commentlist li.comment div.commentmetadata {} ol.commentlist li.comment div.comment-meta { font-size:9px; } ol.commentlist li.comment div.comment-meta a { color:#ccc; } ol.commentlist li.comment p { font-size:11px; margin:0 0 1em; } ol.commentlist li.comment ul { font-size:11px; list-style:square; margin:0 0 1em 2em; } ol.commentlist li.comment div.reply { font-size:11px; } ol.commentlist li.comment div.reply a { font-weight:bold; } ol.commentlist li.comment ul.children { list-style:none; margin:1em 0 0; text-indent:0; } ol.commentlist li.comment ul.children li {} ol.commentlist li.comment ul.children li.alt {} ol.commentlist li.comment ul.children li.bypostauthor {} ol.commentlist li.comment ul.children li.byuser {} ol.commentlist li.comment ul.children li.comment {} ol.commentlist li.comment ul.children li.comment-author-admin {} ol.commentlist li.comment ul.children li.depth-2 { border-left:5px solid #666; margin:0 0 .25em .25em; } ol.commentlist li.comment ul.children li.depth-3 { border-left:5px solid #666; margin:0 0 .25em .25em; } ol.commentlist li.comment ul.children li.depth-4 { border-left:5px solid #666; margin:0 0 .25em .25em; } ol.commentlist li.comment ul.children li.depth-5 {} ol.commentlist li.comment ul.children li.odd {} ol.commentlist li.even { background:#fff; } ol.commentlist li.odd { background:#eee; } ol.commentlist li.parent { border-left:5px solid #00b6de; } ol.commentlist li.thread-alt {} ol.commentlist li.thread-even {} ol.commentlist li.thread-odd {} /* SEARCH FORM */ #searchform { background: #fff;} #searchform input#s { width: 90%; font-family: Helvetica; font-size: 16px; line-height: 16px; color: #00b6de; background: #eee; border: none; padding: 10px;} #searchform label {display: none;} #searchform input#searchsubmit { color: #eee; background: #00b6de; font-size: 16px; line-height: 16px; border: none; -moz-border-radius: 3px; padding: 2px 3px; cursor: pointer; margin: 10px 0} #searchform input#searchsubmit:hover { color: #eee; background: #333;} /* WIDGET FORM */ #followemail { background: #fff;} #followemail input#email { font-family: Helvetica; font-size: 16px; line-height: 16px; color: #00b6de; background: #eee; border: none; padding: 10px;} #followemail label { display: none;} #followemail input { color: #eee; background: #00b6de; font-size: 16px; line-height: 16px; border: none; -moz-border-radius: 3px; padding: 2px 3px; cursor: pointer; margin: 10px 0} #followemail input:hover { color: #eee; background: #333;} /* COMMENT FORM */ #respond #commentform {background: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 20px; border: 10px solid #eee;} #respond input {width: 30%; font-family: Helvetica; font-size: 16px; line-height: 16px; color: #00b6de; background: #eee; border: none; padding: 10px;} #respond label {font-size: 18px; font-family: Helvetica; font-weight: bold; color: #00b6de; padding: 0 0 0 10px;} #respond textarea {width: 90%; height: 60px; font-family: Helvetica; font-size: 16px; line-height: 16px; color: #00b6de; background: #eee; border: none; padding: 10px;} #respond input#submit { width: 150px; color: #eee; background: #00b6de; -moz-border-radius: 3px; -webkit-border-radius: 5px; padding: 3px; cursor: pointer; margin: 10px 0;} #respond input#submit:hover {color: #eee; background: #333;} #respond #subscribe label {font-size: 12px;} /* COLUMN TITLES */ a#webdesigntuts {display: block; width: 240px; height: 40px; text-indent: -9999px; background: url(images/title-webdesigntuts.png) top center no-repeat; border: none; padding: 0; } a#webdesigntuts:hover {background-position: 0 -41px;} a#videotuts {display: block; width: 240px; height: 40px; text-indent: -9999px; background: url(images/title-videotuts.png) top center no-repeat; border: none; padding: 0; } a#videotuts:hover {background-position: 0 -41px;} a#tipstricks {display: block; width: 240px; height: 40px; text-indent: -9999px; background: url(images/title-tipstricks.png) top center no-repeat; border: none; padding: 0; } a#tipstricks:hover {background-position: 0 -41px;} a#ontheblog {display: block; width: 240px; height: 40px; text-indent: -9999px; background: url(images/title-ontheblog.png) top center no-repeat; border: none; padding: 0; } a#ontheblog:hover {background-position: 0 -41px;} /* FOOTER */ #footer-centered-wrapper {width: 960px; margin: 0 auto; padding: 90px 0 0 0;} #footer a {color: #fff;} #footer a:hover {color: #333;} #footer p {color: #fff; font-size: 13px;} #footer p a { background: #666; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 15px; line-height: 200%; padding: 5px; margin: 0 0 2px 0;} #footer p a:hover { background: #fff; color: #00b6de; } #footer h3 { color: #fff; padding: 0 0 10px 0; } #footer #leftcolumn {width: 300px; height: 160px; float: left; padding:0 10px 0 0; text-align: left;} #footer #centercolumn {width: 300px; height: 160px; float: left; padding: 0 10px 0 10px; text-align: center;} #footer #rightcolumn {width: 300px; height: 160px; float: left; padding: 0 0 0 10px; text-align: right; background: url(/images/logos/Brandon.png) 50px bottom no-repeat; } #footer #rightcolumn p {margin-left: 150px; font-size: 12px; line-height: 100%;} #footer .copy {font-size: 10px; color: white; padding: 10px 0 0 0;} /* SOCIALNAV BUTTONS */ #socialnav-wrapper2 {width: 900px; height: 32px; overflow: hidden;} #socialnav {width: 400px; height: 32px; float: left; overflow: hidden;} #socialnav li {display: inline;} #socialnav li a {display: block; width: 32px; height: 32px; text-indent: -9999px; background: url(images/SocialMediaIcons.png); float: left; border: none; padding: 0; } #socialnav li a#rss {background-position: 0 0;} #socialnav li a#rss:hover {background-position: 0 -32px;} #socialnav li a#twitter {background-position: -32px 0;} #socialnav li a#twitter:hover {background-position: -32px -32px;} #socialnav li a#facebook {background-position: -64px 0;} #socialnav li a#facebook:hover {background-position: -64px -32px;} #socialnav li a#vimeo {background-position: -96px 0;} #socialnav li a#vimeo:hover {background-position: -96px -32px;} #socialnav li a#linkedin {background-position: -128px 0;} #socialnav li a#linkedin:hover {background-position: -128px -32px;} #socialnav li a#stumble {background-position: -160px 0;} #socialnav li a#stumble:hover {background-position: -160px -32px;} #socialnav li a#skype {background-position: -192px 0;} #socialnav li a#skype:hover {background-position: -192px -32px;} #socialnav li a#gtalk {background-position: -224px 0;} #socialnav li a#gtalk:hover {background-position: -224px -32px;} #socialnav li a#email {background-position: -256px 0;} #socialnav li a#email:hover {background-position: -256px -32px;}