/* Fotofolio Premium Photography Portfolio Template CSS File - 17 Decembrie 2009 T.O.C =RESET =GENERAL =LAYOUT =NAVIGATION =PHOTO =TEXT =ENDING =OTHER =SOCIALMEDIA =CONTACT-FORM =HOVER-NAVIGATION */ /* =RESET =------------------------------------*/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:black;background:white}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""} /* =GENERAL --------------------- */ body{ position:relative; background:#1d1d1d url(images/bg-body.jpg) repeat top left; color:#5d5d5d; font-family: "Gill Sans" ; } strong{ font-weight:700; } em{ font-style:italic; } /* Clear Fix Hack - add class="fixed" to div's that have floated elements in them */ .fixed:after{content:"."; display:block; height:0; clear:both; visibility:hidden;} .fixed{display:block;} /* \*/ .fixed{min-height:1%;} * html .fixed{height:1%;} /* =LAYOUT --------------------- */ #line-top{ position:absolute; left:0; top:53px; height:2px; background:url(images/bg-line-top.jpg) repeat-x top left; } ul#container{ position:absolute; top:75px; left:0px; height:500px; /* ! height must be the same with the height of the pictures you will be using */ padding:25px 0; background-color:#ffffff; list-style:none; } ul#container li{} /* =NAVIGATION --------------------- */ ul#container li.navigation{ position:relative; float:left; height:500px; /* ! height must be the same with the height of the pictures you will be using */ width:300px; margin-right:25px; background-color:#EDEFF0; } #logo{ position:absolute; top:0px; left:18px; } ul#nav{ position:absolute; top:188px; left:0; width:292px; height:47px; padding:14px 0 0 15px; background:url(images/bg-nav.png) no-repeat top right; list-style-type:none; font-style: italic; } ul#nav li{ float:left; padding:14px 0 0 8px; color:#ffffff; } ul#nav li a{ font-size:14px; color:#ffffff; text-decoration:none; letter-spacing:0px; } ul#nav li a:hover { color:#fff; text-decoration:underline; } ul#nav li a.active{ color:#fff; text-decoration:underline; } ul#nav-galleries{ position:absolute; left:25px; top:300px; _left:60px; _top:290px; /* IE6 Hack */ list-style: inside; list-style-type:none; } ul#nav-galleries li{ height:38px; } ul#nav-galleries li a{ color:#8b8989; font-size:20px; letter-spacing:.75px; text-decoration:none; text-transform:normal; } ul#nav-galleries li a:hover { color:#403c79; } ul#nav-galleries li a.active{ color:#8b8989; } /* =PHOTO --------------------- */ ul#container li.photo{ float:left; position:relative; margin-right:25px; height:500px; /* ! height must be the same with the height of the pictures you will be using */ } ul#container li .photo-description{ position:absolute; left:2px; bottom:-22px; padding:3px 0px; background:url(images/bg-photo-description.png) repeat top left; color:#403c79; font-size:11px; font-weight:700; width: 219px; height: 13px; } /* =TEXT --------------------- */ ul#container li.text{ float:left; position:relative; overflow:hidden; margin-right:25px; width:270px; height:425px; padding: 45px 30px 30px 30px; /* ! height must be height of the pictures - paddin-top - padding-bottom */ background-color:#EDEFF0; font-size:14px; line-height:22px; } ul#container li.service{ padding-top:0; height:470px; } ul#container li.service img{ margin-bottom:25px; } ul#container li.text h1{ margin-bottom:15px; font-size:30px; letter-spacing:-2px; } ul#container li.text h2{ margin-bottom:15px; font-size:25px; letter-spacing:-1px; } ul#container li.text blockquote{ margin-bottom:15px; padding:5px 25px 0 45px; background: url(images/bg-quote.jpg) no-repeat top left; font-style:italic; } ul#container li.text p { margin-bottom:15px; } ul#container li.text ul{ margin-bottom:15px; list-style: inside; } ul#container li.text a { color:#0085CF; } /* =ENDING --------------------- */ ul#container li.ending{ position:relative; float:left; margin-right:0; width:80px; height:500px; background-color:#EDEFF0; } #line-bottom{ position:absolute; left:0; top:646px; height:2px; background:url(images/bg-line-bottom.jpg) repeat-x top left; } /* =OTHER --------------------- */ /* =SOCIAL-MEDIA --------------------- */ ul#social-media{ list-style:none; } ul#social-media li{ display:inline; } /* =CONTACT-FORM --------------------- */ form{} form p{ clear:both; margin-bottom:0; text-indent:0px; } label{ width:150px; } input, textarea{ width:250px; border:1px solid #ccc; padding:5px; background-color:#fff; } textarea{ height:78px; } .btn{ margin-left:133px; width:120px; } #formstatus{ font-size:13px; font-weight:bold; } .formstatuserror{ color:#000000; } .formstatusok { color:#6c66bc; } /* =HOVER-NAVIGATION --------------------- */ #arrows { position:fixed; top:602px; left:68px; width:90px; height:30px; /* IE6 Hack as position fixed is not supported */ _position: absolute; _top: expression( ( 602 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' ); _left: expression( ( 68 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); } #arrows ul{ margin:0; padding:0; list-style:none; } #arrows ul li{ display:inline; margin:0; padding:0; width:20px; height:20px; } #arrows ul li a{ overflow:hidden; float:left; display:block; margin-right:5px; width:20px; height:20px; cursor:pointer; text-indent:-9000px; } #arrows ul #left a{ background: url(images/bg-arrow-left.png) no-repeat top right; } #arrows ul #right a{ background: url(images/bg-arrow-right.png) no-repeat top left; }