/*================================================= // Version : 2.0 // Project : helloalchemy.com //=================================================*/ /* ----- html tag reset & clearfix ----- */ body,div,dl,dt,dd,ul,ol,li,h1, h2,h3,h4,h4,h6,pre,form,fieldset, input,textarea,p,blockquote,th,td { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; vertical-align: bottom; } a,h1 { overflow: hidden; } address,caption,cite,code, dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h4,h6 { font-size: 100%; font-weight: normal; } q:before,q:after { content: ''; } abbr,acronym { border: 0;} .clear:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clear { display: inline-block; } html[xmlns] .clear { display: block; } * html .clear { height: 1%; } /* ----- general */ body { font-family: arial,verdana,tahoma,sans-serif; font-size: 12px; background: #51c8e8; color: #54301a; text-align: center; } #container { width: 840px; margin: 42px auto 0 auto; position: relative; text-align: left; background: #fff; padding: 40px 30px 50px 30px; } /* ----- logo */ h1 { text-indent: -9999px; background: url(../images/logo.png) no-repeat; width: 135px; height: 38px; margin: 0 0 10px 704px; } h1 a { display: block; width: 135px; height: 38px; } /* ----- sideBar */ #sideBar { float: left; border-top: 3px solid #51c8e8; width: 155px; border-bottom: 1px solid #51c8e8; } .menuLink { color: #54301a; text-decoration: none; font-weight: bold; text-transform: uppercase; padding: 8px 0 6px 2px; display: block; cursor: pointer; border-top: 1px solid #51c8e8; font-size: 14px; outline: none; } #sideBar ul { margin: 5px 0 15px 0; padding: 0 0 0 5px; } #sideBar ul li { padding-bottom: 2px; line-height: 11px; } #sideBar ul li a { color: #54301a; font-weight: bold; font-size: 11px; display: block; padding: 2px 0; text-decoration: none; } #sideBar ul li a:hover { color: #70c5d9 } .selectedLink { color: #70c5d9 !important; font-weight: bold !important; } /* ----- mainContent */ #mainContent { float: right; border-top: 4px solid #51c8e8; width: 662px; padding: 6px 0 0 0; } .projectDesc { background: #51c8e8; width: 662px; height: 85px; margin: 3px 0 0 0; position: relative; } .projectOptions { float: left; padding: 10px 0 0 12px; width: 220px; height: 70px; } .projectOptions h2 { color: #fff; font-weight: bold; font-size: 17px; } .projectOptions ul { width: 120px; color: #fff; margin: 5px 0 0 0; } .projectOptions address { color: #fff; margin: 2px 0 0 0; } .projectOptions a {color: #fff; text-decoration: none; font-size: 11px; } .projectDesc p { float: right; color: #fff; width: 320px; font-size: 13px; line-height: 20px; padding: 10px 25px 0 0; text-align: left; } #videoThumbs { margin: 10px 0 0 0; } #videoThumbs li { float: left; padding: 0 1px 2px 1px; } /* |_____ clientLogin */ #clientLogin { font-size: 12px; } #clientLogin label { display: block; font-weight: bold; } #clientLogin div { padding: 5px 0 10px 0; } #username,#password { border: 0; background: #53c0de; padding: 2px; font-family: arial, sans-serif; width: 180px; height: 16px; color: #fff; } #loginBtn { background: #53c0de; border: 0; color: #fff; font-family: arial, sans-serif; font-size: 11px; font-weight: bold; width: 50px; height: 20px; cursor: pointer; } /* |_____ aboutAlchemy */ #aboutText { margin: 10px 0 0 0; } #aboutText p { line-height: 22px; color: #54301a; font-size: 12px; } #aboutTextL { float: left; width: 310px; text-align: left; } #aboutTextR { float: right; width: 310px; text-align: left; } #aboutDesc { width: 300px; padding: 10px 10px 0 0 } /* |_____ aboutStaff */ .person { float: left; width: 165px; height: 330px; color: #54301a; padding: 25px 0 0 0; } .face { display: block; width: 75px; height: 75px; } .person h2 { margin: 10px 0 0 0; font-size: 14px; } .person h3 { margin: 4px 0 0 0; font-size: 12px; } .person p { font-size: 11px; margin: 10px 0 0 0; width: 130px; line-height: 20px; } /* |_____ contact */ #contactUs a { color: #fff; text-decoration: none; } #contactUs { color: #fff; float: left; display: inline; margin: 15px 0 0 100px; width: 200px } #contactInfos ul { margin: 15px 0 0 0; } #contactInfos ul { color: #543019; } #contactInfos ul.float { width: 150px; float: left; } #contactInfos ul.clear { margin: 15px 182px 0 0; clear: both; } #contactInfos ul a { color: #543019; text-decoration: none; } #contactInfos ul b { color: #4dc8e9; font-size: 15px; } /* |_____ playlist */ .playlistThumbs img { width: 150px; height: 112px; } .playlistThumbs li { float: left; width: 165px; padding: 0 0 14px 0; } .playlistThumbs a { display: block; width: 150px; height: 112px; } #playlistLinks { position: absolute; top: 15px; left: 200px; } #playlistLinks li { margin: 0 0 4px 0; } #playlistLinks a { font-size: 12px; font-weight: bold; } #playlistLinks a:hover { text-decoration: underline; } #emailPlaylist { position: absolute; top: 4px; left: 340px; width: 300px; font-size: 12px; font-weight: bold; } #dvdRequest { position: absolute; top: 15px; left: 495px; font-size: 12px; } #emailPlaylist li,#dvdRequest li { padding: 0 0 1px 0; } .emailInput { border: 1px solid #51c8e8; background: #fff; color: #51c8e8; padding: 2px; font-size: 11px; height: 13px; } .playlistBtn { margin: 2px 0 0 1px; border: 0; background: #fff; color: #51c8e8; font-weight: bold; font-size: 9px; width: 50px; height: 16px; } * html .playlistBtn { height: 14px; } #myGallery { width: 662px !important; height: 495px !important; } #playlistText { line-height: 12px !important; font-size: 10px !important; font-weight: bold; width: 140px; position: absolute; top: 25px; left: 10px;} /* Clearing Floats Class STARTS */ .clearfloat { display: inline-block;} .clearfloat:after { Content: "."; display: block; height: 0; clear: both; visibility: hidden;} * html .clearfloat { height: 1%; } .clearfloat { display: block;} /* Clearing Floats Class ENDS */