/* Theme Name: MS Portfolio Theme URI: http://www.maxstanworth.com Description: Custom portfolio theme for maxstanworth.com Version: 1.0 Author: Max Stanworth Author URI: http://www.maxstanworth.com/ Tags: right-sidebar,fixed-width,two-columns,portfolio */ /*Import RESETS*/ @import url("css/reset.css"); @import url("css/typography.css"); a { color:#993300; text-decoration:underline; } a:hover { text-decoration:none; color:#0066CC; } html, body{text-align:center; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } body{background:#c19663 url(images/body-bg.jpg) repeat; width:100%; height:100%;} .clear{clear:both;} #pagewidth{ width:976px; text-align:left; margin-left:auto; margin-right:auto;} #fade{width:100%; background:url(images/fade.png) repeat-x; height:100%; position:absolute; top:0; left:0;} /*--------HEADER--------*/ #header{float:left; position:relative; width:100%; display:inline; margin-bottom:20px; } /*Logo*/ #logo{height:122px; width:135px; position:relative; margin-top:20px; margin-left:17px; float:left; display:inline;} #logo a {height:100%; width:100%; display:block; background:url(images/logo.png) 0 0 no-repeat; text-indent:-5000px;} #logo a:hover {background:url(images/logo.png) -166px 0 no-repeat;} /*Main Nav*/ #mainnav {float:right; display:inline; margin-right:7px;} #mainnav ul{padding:0; margin:0; list-style:none; text-transform:uppercase; font-size:28px; } #mainnav ul li{padding:0; margin:0; float:left; display:inline; margin-left:10px;} #mainnav ul li a{padding:70px 15px 0 15px; margin:0; float:left; display:block; height:35px; background: #362310 url(images/brown-overlay.jpg) bottom left repeat-x; text-decoration:none; color:#8b7457;} #mainnav ul li a:hover{color:#0066CC;} #mainnav ul li.current_page_item a{color:#FFFFFF;} #mainnav ul li.current-cat-parent a{color:#FFFFFF;} #mainnav ul li.current-cat a{color:#FFFFFF;} ul#subcats li.current-cat a{color:#FFFFFF;} a.current-cat{color:#FFFFFF;} #mainnav ul li a.current-cat{color:#FFFFFF;} /*Sub Nav*/ ul#subcats{background: url(images/subnav-bg.png) bottom left repeat-x; float:left; clear:both; margin:50px 0 0 24px; width:638px; display:inline;} ul#subcats li{padding:0; margin:0; list-style:none; text-transform:uppercase; font-size:22px; float:left; display:inline;} ul#subcats li a{padding:15px; margin:0; float:left; display:block; text-decoration:none;} /*--------RIGHTCOL--------*/ #rightcol h3{font-size:28px; color:#8b7457;} #rightcol a{color:#b79716;} #rightcol #first-sidebar .slider_menu{position:relative; margin:10px 0 0 20px;} #rightcol #first-sidebar .slider_menu a { color:#706c57; font-size:10px; text-transform:uppercase; } #rightcol{width:300px; float:right; position:relative; display:inline; color:#e9e9e9;} .sidebar{background: url(images/sidebar-bg.png) repeat-y; position:relative; margin-bottom:110px; padding-top:67px; width:296px; float:right; } .widget{padding:0 43px 0 40px; position:relative; margin-bottom:60px; z-index:100;} .sidebar .footer{background: url(images/sidebar-footer.png) no-repeat; width:296px; height:187px; position:absolute; bottom:-72px; left:0; z-index:90;} .sidebar .header{background: url(images/sidebar-top.png) no-repeat top left; width:296px; height:303px; position:absolute; top:-57px; left:0;} #first-sidebar .header{background: url(images/first-sb-top.png) no-repeat top left; width:296px; height:303px; position:absolute; top:0; left:0;} .flag{background: url(images/flag.png) no-repeat; width:66px; height:41px; position:absolute; top:-5px; right:16px; } #aboutme .flag a{position:absolute; top:13px; left:20px; text-transform:uppercase; font-size:11px; color:#706c57;} /*Delicious*/ #bookmarks ul{padding:0; margin:0; list-style:none; font-size:12px; } #bookmarks ul li{border-bottom:1px dotted #171614} #bookmarks ul li a{text-decoration:none; display:block; padding:5px 0 5px 0; color:#8b866e;} #bookmarks ul li a:hover{color:#e9e3c1;} #bookmarks .flag a{position:absolute; background: url(images/icons.png) -20px -22px no-repeat; width:20px; height:20px; top:10px; right:25px; text-indent:-5000px;} #bookmarks .flag a:hover{background: url(images/icons.png) -20px 0 no-repeat;} /*Flickr*/ #flickrcont a img{border:5px solid #000000; width:85px; height:85px; margin:0 7px 7px 0;} #flickrcont a:hover img{border:5px solid #121212} #flickr .flag a{position:absolute; background: url(images/icons.png) 0 -22px no-repeat; width:20px; height:20px; top:10px; right:25px; text-indent:-5000px;} #flickr .flag a:hover{background: url(images/icons.png) 0 0 no-repeat;} /*Twitter*/ #twitter ul{padding:0; margin:0; list-style:none;} #twitter ul li.tweetinfo{text-transform:uppercase; font-size:11px; color:#9a9a9b;} #twitter ul li.tweettext{margin-bottom:10px;} #twitter .flag a{position:absolute; background: url(images/icons.png) -41px -22px no-repeat; width:20px; height:20px; top:10px; right:25px; text-indent:-5000px;} #twitter .flag a:hover{background: url(images/icons.png) -41px 0 no-repeat;} /*--------MAINCOL--------*/ #maincol{float:left; display:inline; position: relative; width:100%; } #wrapper{float:left; position:relative; display:inline; width:666px; } #content{/*background-color:#0066CC;*/ } .image{border:10px solid #d7d7d8; background-color:#333333; z-index:95; position:relative;} .title {background:url(images/title-bg.png) repeat-x; height:53px; float:left; position:relative;} ul.infolinks{ position:absolute; right:45px; top:-32px; list-style:none; z-index:75; line-height:11px; margin:0 0 0 0;} ul.infolinks li{float:left; display:inline; text-transform:uppercase; font-size:11px; margin-left:10px; } ul.infolinks li a{text-decoration:none; padding:11px 27px 10px 15px; float:left; display:inline;} ul.infolinks li.readmore a{color:#9a9a9b; background:url(images/grey-arrow.png) no-repeat 86% 11px; } ul.infolinks li.visit a{color:#b89816; background:url(images/green-arrow.png) no-repeat 86% 11px; } ul.infolinks li.readmore a:hover{color:#101010;} ul.infolinks li.visit a:hover{color:#302704;} ul.infolinks li.readmore{background:url(images/grey-overlay.jpg) repeat-x top left;} ul.infolinks li.visit{background:url(images/green-overlay.jpg) repeat-x top left;} .sectioncont{position:relative; margin-top:60px; margin-bottom:90px;} .sectioncont .section{background:url(images/section-bg.png) repeat-y; width:635px; position:relative; z-index:75; padding:20px 0 20px 40px;} .sectioncont .section .content{ position:relative; z-index:77; width:600px; margin-top:30px;} .sectioncont .section .header{background:url(images/section-header.png) no-repeat; height:54px; width:675px; position:absolute; z-index:76; top:-9px; left:0;} .sectioncont .section .footer{background:url(images/section-footer.png) no-repeat; height:60px; width:675px; position:absolute; z-index:76; bottom:-15px; left:0;} .sectioncont .section .titlecont{position:absolute; top:-32px; left:38px; z-index:100} .sectioncont .section .titlecont a{text-decoration:none; text-transform:uppercase; color:#1f1407;} .sectioncont .section .titlecont .title{background:url(images/title-bg.png) repeat-x; height:64px; float:left; position:relative;} .sectioncont .section .titlecont .title h1{margin:10px 0 0 0 ;} .sectioncont .section .titlecont .title h2{margin:16px 0 0 0 ;} .sectioncont .section .titlecont .title h2 a{color:#1f1407;} .sectioncont .section .titlecont .title h2 a:hover{color:#0066CC;} .sectioncont .section .titlecont .title .l-end{background:url(images/title-l-end.png) no-repeat; width:52px; height:67px; position:absolute; top:0; left:-52px;} .sectioncont .section .titlecont .title .r-end{background:url(images/title-r-end.png) no-repeat; width:105px; height:67px; position:absolute; top:0; right:-105px;} .sectioncont .section #tech ul{list-style:none; margin-left:0;} .sectioncont .section #tech ul li{border:none;} .sectioncont .section .content ul li{padding:10px 0 10px 0; border-bottom:1px dotted #171614;} a#close{padding:10px; background-color:#CCCCCC; text-transform:uppercase; font-size:11px; text-decoration:none; position:relative;} .sectioncont .section #tech ul{list-style:none; margin-left:0;} .sectioncont .section #tech ul li{border:none;} .sectioncont .section .content ul li{padding:10px 0 10px 0; border-bottom:1px dotted #171614;} a#close{padding:10px; background-color:#CCCCCC; text-transform:uppercase; font-size:11px; text-decoration:none; position:relative;} .navigation{float:left; padding:0 5px 0 20px; display:inline; width:641px; margin-bottom:40px; } .alignleft {float:left; display:inline;} .alignright {float:right; display:inline;} .alignleft a{padding:10px; background-color:#CCCCCC; text-transform:uppercase; font-size:11px; text-decoration:none; position:relative;} .alignright a{padding:10px; background-color:#CCCCCC; text-transform:uppercase; font-size:11px; text-decoration:none; position:relative;} /*--------Footer--------*/ #footer{height:75px; clear:both; width:100%; border-top:1px dotted #93734f; } #footercont{text-align:center; margin-top:20px;} /* *** Float containers fix: http://www.csscreator.com/attributes/containedfloat.php *** */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix{height: 1%;} .clearfix{display: block;} /* End hide from IE-mac */ /*printer styles*/ @media print{ /*hide the left column when printing*/ #rightcol{display:none;} #twocols, #maincol{width:100%; float:none;} }