*{ margin:0; padding:0; } #page{ /* The main container div */ width:620px; margin:100px auto 0; } h1{ font-family:Corbel,'Myriad Pro',Arial, Helvetica, sans-serif; background:url('../images/heading.png') no-repeat center top; text-indent:-9999px; overflow:hidden; height:90px; } #searchForm{ /* The search form. background-color:#4C5A65; */ padding:50px 50px 30px; margin:80px 0; position:relative; -moz-border-radius:16px; -webkit-border-radius:16px; border-radius:16px; } fieldset{ border:none; } #searchInputContainer{ /* This div contains the transparent search box */ width:420px; height:36px; background:url("../images/searchBox.png") no-repeat; float:left; margin-right:12px; } #s{ /* The search text box. */ border:none; color:#888888; background:url("../images/searchBoxSm.png") no-repeat; position:relative; float:left; font-family:Arial,Helvetica,sans-serif; font-size:15px; height:26px; line-height:36px; margin-right:12px; outline:medium none; padding:0 0 0 35px; text-shadow:1px 1px 0 white; width:385px; top:5px; right: 10px; } /* The UL that contains the search type icons */ .icons{ list-style:none; margin:-19px 0 0 235px; height:19px; position:relative; } .icons li{ background:url("../images/icons.png") no-repeat; float:left; height:19px; text-indent:-9999px; cursor:pointer; margin-right:5px; position:relative; top:5px; left:-50px; } /* Styling each icon */ li.web{ width:15px;} li.web.active, li.web:hover{ background-position:left bottom;} li.images{ width:22px; background-position:-18px 0;} li.images.active, li.images:hover{ background-position:-18px bottom;} li.news{ width:14px; background-position:-44px 0;} li.news.active, li.news:hover{ background-position:-44px bottom;} li.videos{ width:17px; background-position:right 0;} li.videos.active, li.videos:hover{ background-position:right bottom;} /*span.arrow{ The little arrow that moves below the icons width:11px; height:6px; margin:21px 0 0 5px; position:absolute; background:url('../images/arrow-2.png') no-repeat; left:0; }*/ /* The submit button */ #submitButton{ background:url('../images/button-2.png') no-repeat; width:83px; height:26px; text-indent:-40px; overflow:hidden; text-transform:uppercase; border:none; cursor:pointer; position:relative; top:-20px; left:-88px; } #submitButton:hover{ background-position:left bottom; } /* The Search tutorialzine.com / Search the Web radio buttons */ #searchInContainer{ float:left; margin-top:12px; width:330px; left:-30px; position:relative; } label{ color:#d4c4a3; cursor:pointer; font-size:11px; position:relative; right:-2px; top:-2px; margin-right:10px; white-space:nowrap; /*float:left;*/ } input[type=radio]{ cursor:pointer; /*float:left;*/ } /* Styling the search results */ .pageContainer{ /* Holds each page with search results. Has an inset bottom border. */ border-bottom:1px solid #5e7481; margin-bottom:50px; /* Adding a dark bottom border with box shadow */ -moz-box-shadow:0 1px 0 #798e9c; -webkit-box-shadow:0 1px 0 #798e9c; box-shadow:0 1px 0 #798e9c; } p.notFound{ text-align:center; padding:10px 0 0 40px; } /* Web & news results */ .webResult{ text-shadow:1px 1px 0 #586a75; padding-bottom:5px; margin-bottom:5px; margin-top:10px; background-color:#000000; opacity:0.8;} .webResult h2{ background-color:#4d2111; font-size:14px; font-weight:normal; padding:8px 20px; line-height:1.5; /* Applying CSS3 rounded corners */ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } .webResult h2 b{ color:#fff; } .webResult h2 a{ color:#eee;border:none;} .webResult p{ line-height:1.5;padding:15px 20px;} .webResult p b{ color:white;} .webResult > a{ margin-left:20px;} /* Image & video search results */ .imageResult{ float:left; height:180px; margin:0 0 20px 40px; text-align:center; width:152px; overflow:hidden; background-color:#000000; /*background-image :url(../images/leatherback1.jpg);*/ opacity:0.8; margin-bottom:5px; } .imageResult img{ display:block;border:none; padding-top:7px;} .imageResult a.pic{ /*outline:1px solid #777;*/ display:block; margin:0 auto 15px; } /* The show more button */ #more{ width:83px; height:24px; background:url('../images/more.png') no-repeat; cursor:pointer; margin:0px auto; } #more:hover{ background-position:left bottom; } /* Giving Credit */ p.credit{ margin:20px 0; text-align:center; } p.credit a{ background-color:#4B5A64; border:1px solid; border-color:#3D4D57 #788E9B #788E9B #3D4D57; color:#c0d0d8; font-size:10px; padding:4px 8px; text-shadow:1px 1px 0 #38464F; } p.credit a:hover{ background-color:#38464f; border-color:#38464f #788E9B #788E9B #38464f; } a, a:visited { text-decoration:none; outline:none; color:#97cae6; } a:hover{ border-bottom:1px dashed transparent; } .clear{ clear:both; }