960 Grid İle 12 colon üzerine kurulmuş bir yapı 2 Sorunum Var
1. 960px Genişlikten 1024px Olarak Genişletmek ki bunu yapabiliyorum
2. Sağ ve Sol Sidebar Birbirine bağlı oldugu için grid yapıyı bozmadan bunları sağ ve sol tarafa 5 px boşluk ile yerleştiremedim yardımcı olabilirseniz çok memnun olurum orta metin alanı 500 px genişliğe gelmesi gerekmete
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Free Website Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="Description" content="aciklama" />
<meta name="Keywords" content="anahtarkelime" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/supersubs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish(); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
});
</script>
</head>
<body>
<div id="pageshadow">
<div id="header" class="container_12"> <a href="#"><img id="logo" src="images/logo.png" alt="Logo"/></a>
<div class="headerlinks m_none">
<p><a href="#">About Us</a> | <a href="#">Our Guarantee</a> | <a href="#">Blog</a> | <a href="#">Privacy</a></p>
</div>
</div>
<!--Menu-->
<div id="nav" class="container_12">
<ul class="sf-menu">
<li class="first-item"> <a href="index.html" style="border-left:none;">Anasayfa</a> </li>
<li> <a href="#a">Products</a>
<ul>
<li> <a href="#aa">Menu item that is quite long</a> </li>
</ul>
</li>
<li> <a href="#">Servislerimiz</a>
<ul>
<li> <a href="#aa">Menu item that is quite long</a> </li>
</ul>
</li>
<li> <a href="#">Hakkımızda</a> </li>
<li> <a href="#">İletişim</a> </li>
</ul>
</div>
<!--İcerik-->
<div id="content" class="container_12 bsb_grid_3_3">
<div class="grid_6 push_3">
<h1>About this template (H1 heading)</h1>
<p>This template uses feux sidebars. The sidebar is actually a background image that repeats vertically down the page. The included photoshop document has the sidebar images included so all you need to do is change the color and output the images for an entirely new look for the sidebars.</p>
<h2>Changing sidebar widths (H2 heading)</h2>
<p>To use sidebars of different widths, you first create your sidebar width and content width using the 960 grid classes (you can read more about the 960 grid system at <a href="http://960.gs/">http://960.gs/</a>). This template uses a 12 column grid, so you can have any combination of sidebar/content grids as long as they add up to 12. </p>
<p>So for example, you can apply the grid_3 class to your sidebar div and the grid_9 class to your content div. This would give you a 210 pixel wide sidebar and a 690 pixel wide content area. There is a 30 pixel "gutter" between grid columns, and also a 15 pixel margin on both sides. So this adds up to a total page width of 960 pixels. </p>
<p>For another example, to create a grid_3 left sidebar, a grid_3 right sidebar and a grid_6 content area, you would apply the grid_3 class to both sidebar divs and a grid_6 class to the content div. This would give you sidebars with a width of 210 pixels and a content area width of 410 pixels.</p>
<p>See the template file source code to see how the grid classes are applied for different page layouts.</p>
<h3>Using the 960 grid push and pull classes (H3 heading)</h3>
<p>Since this is an SEO-optimized template, the sidebars are always lower in the source code than the content. So you also need to apply the "push" and "pull" classes to your layout divs in order to properly position them in relation to the content area. </p>
<p>If you are using a left sidebar layout, you need to apply a "pull_x" class to your sidebar div with the 'x' value being the grid with of your content area. You also need to apply a "push_x" class to your content div with the 'x' value being the grid width of your left sidebar. This results in the content area being "pushed" over the width of your sidebar and the sidebar being "pulled" over the width of your content. Your site displays as intended with a left sidebar, but the source code is optimized for search engines so the content displays first.</p>
<p>If you are using a right sidebar, you do not need to apply the push or pull classes because the layout divs are in the correct order (content then sidebar).</p>
<p>If you are using both left and right sidebars, you need to apply the push and pull classes to the left sidebar and content divs as described above, but you do not need to apply any extra classes to the right sidebar div as long as your source code order is content then left sidebar then right sidebar.</p>
<p>View the source code of the template files to get an idea of how the push, pull and grid classes work. It's very simple once you understand the concept behind the 960 grid system.</p>
<h4>Using feux sidebar background images (H4 heading)</h4>
<p>The sidebar background image is applied to the container div that wraps both the sidebar and the content areas. To apply a left sidebar image, use the class lsb_grid_x, with the x representing the grid width of your sidebar.</p>
<p>To apply a right sidebar background image, use the class rsb_grid_x, with the x representing the grid with of your right sidebar.</p>
<p>To apply both left and right images, which are actually one single image, use the class bsb_grid_x_y, with the x being your left sidebar grid width and the y being your right sidebar grid width.</p>
<p>The template includes images for grid_2 to grid_4 sidebars for both left, right and both. If you want different image sizes, you can edit the images in the included PSD file. You can also make the left and right sidebars different colors simply by editing the PSD.</p>
<h5>Editing the included PSD file (H5 heading)</h5>
<p>The template includes the PSD file that was used to create all the images in the template. The PSD is already sliced and optimized for output. You can open the PSD in Photoshop, make your changes and use the 'Save for Web and Devices' command to export your images. </p>
<p>The easiest way to export your images back to Dreamweaver is to set your slice output options to save ONLY the slice name and file extension. Uncheck the option to save your images in a folder named 'images'. When you save your slices, choose 'All user slices' from the drop down menu and export your images directly to the images folder in the template.</p>
<p>This will export and overwrite all images to the template and will include any changes you made to the PSD file. When you go back to Dreamweaver or refresh your site preview in a browser, your new images should be visible (if you're previewing locally). </p>
<div class="button"><a href="#">Detaylı Bilgi</a></div>
</div>
<!--Rightbar-->
<div class="grid_3 pull_6 m_none">
<div class="sidebarbox">
<h3>Sidebar Navigation</h3>
<ul>
<li><a href="index.html">Left Sidebar Layout</a> </li>
<li><a href="right-sidebar.html">Right Sidebar Layout</a></li>
<li><a href="two-sidebars.html">Two Sidebar Layout</a></li>
<li><a href="no-sidebars.html">No Sidebar Layout</a></li>
</ul>
</div>
<div class="sidebarbox">
<h3>Sidebar Content</h3>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. </p>
<p>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. </p>
</div>
</div>
<!--Leftbar-->
<div class="grid_3 m_none">
<div class="sidebarbox">
<h3>Sidebar Navigation</h3>
<ul>
<li><a href="index.html">Left Sidebar Layout</a> </li>
<li><a href="right-sidebar.html">Right Sidebar Layout</a></li>
<li><a href="two-sidebars.html">Two Sidebar Layout</a></li>
<li><a href="no-sidebars.html">No Sidebar Layout</a></li>
</ul>
</div>
<div class="sidebarbox">
<h3>Sidebar Content</h3>
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. </p>
<p>Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. </p>
</div>
</div>
<div class="clear"></div>
</div>
<!--Preefooter-->
<div id="prefooter" class="container_12">
<div class="grid_4">
<h4>Proin elit arcu rutrum commodo</h4>
<ul>
<li><a href="#">Cras et dapibus magna pellentesque habitant morbi</a></li>
<li><a href="#">Tristique senectus et netus et malesuada fames </a></li>
<li><a href="#"> Praesent dolor neque gravida sed tempus a vehicula </a></li>
<li><a href="#"> Cras accumsan ultricies sapien id tincidunt</a></li>
</ul>
</div>
<div class="grid_4">
<h4>Donec sollicitudin mi sit amet</h4>
<ul>
<li><a href="#">Cras et dapibus magna pellentesque habitant morbi</a></li>
<li><a href="#">Tristique senectus et netus et malesuada fames </a></li>
<li><a href="#"> Praesent dolor neque gravida sed tempus a vehicula </a></li>
<li><a href="#"> Cras accumsan ultricies sapien id tincidunt</a></li>
</ul>
</div>
<div class="grid_4">
<h4>Etiam aliquet massa et lorem</h4>
<ul>
<li><a href="#">Cras et dapibus magna pellentesque habitant morbi</a></li>
<li><a href="#">Tristique senectus et netus et malesuada fames </a></li>
<li><a href="#"> Praesent dolor neque gravida sed tempus a vehicula </a></li>
<li><a href="#"> Cras accumsan ultricies sapien id tincidunt</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<!--Footer-->
<div id="footer" class="container_12">
<div class="grid_6">Copyright © 2010 Your Website</div>
<div class="grid_6 m_none" style="text-align:right;"><a href="#">About Us</a> | <a href="#">Contact Us</a> | <a href="#">Our Blog</a></div>
</div>
</div>
</body>
</html>CSS İNCELE
/* YUI CSS reset
----------------------------------------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, 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;
}
address, caption, cite, code, dfn, em, th, var {
font-style:normal;
font-weight:normal;
}
ul, ol {
list-style-type:none;
}
caption, th {
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
q:before, q:after {
content:'';
}
abbr, acronym {
border:0;
}
/* End of reset
----------------------------------------------------------------------------------------------------*/
/* Faux sidebar styles
------------------------------------------------------------------------------------------------------*/
.lsb_grid_2 {
background: #fff url(images/lsb_grid_2.gif) repeat-y top left;
}
.lsb_grid_3 {
background: #fff url(images/lsb_grid_3.gif) repeat-y top left;
}
.lsb_grid_4 {
background: #fff url(images/lsb_grid_4.gif) repeat-y top left;
}
.rsb_grid_2 {
background: #fff url(images/rsb_grid_2.gif) repeat-y top right;
}
.rsb_grid_3 {
background: #fff url(images/rsb_grid_3.gif) repeat-y top right;
}
.rsb_grid_4 {
background: #fff url(images/rsb_grid_4.gif) repeat-y top right;
}
.bsb_grid_2_2 {
background: #fff url(images/bsb_grid_2_2.gif) repeat-y top left;
}
.bsb_grid_2_3 {
background: #fff url(images/bsb_grid_2_3.gif) repeat-y top left;
}
.bsb_grid_2_4 {
background: #fff url(images/bsb_grid_2_4.gif) repeat-y top left;
}
.bsb_grid_3_2 {
background: #fff url(images/bsb_grid_3_2.gif) repeat-y top left;
}
.bsb_grid_3_3 {
background: #fff url(images/bsb_grid_3_3.gif) repeat-y top left;
}
.bsb_grid_3_4 {
background: #fff url(images/bsb_grid_3_4.gif) repeat-y top left;
}
.bsb_grid_4_2 {
background: #fff url(images/bsb_grid_4_2.gif) repeat-y top left;
}
.bsb_grid_4_3 {
background: #fff url(images/bsb_grid_4_3.gif) repeat-y top left;
}
.bsb_grid_4_4 {
background: #fff url(images/bsb_grid_4_4.gif) repeat-y top left;
}
/* 960 Grid System Containers
----------------------------------------------------------------------------------------------------*/
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
/* Grid >> 960 Grid System Global
----------------------------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display:inline;
float: left;
position: relative;
margin-left: 15px;
margin-right: 15px;
}
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .grid_1 {
width:50px;
}
.container_12 .grid_2 {
width:130px;
}
.container_12 .grid_3 {
width:210px;
}
.container_12 .grid_4 {
width:290px;
}
.container_12 .grid_5 {
width:370px;
}
.container_12 .grid_6 {
width:450px;
}
.container_12 .grid_7 {
width:530px;
}
.container_12 .grid_8 {
width:610px;
}
.container_12 .grid_9 {
width:690px;
}
.container_12 .grid_10 {
width:770px;
}
.container_12 .grid_11 {
width:850px;
}
.container_12 .grid_12 {
width:930px;
}
/* Prefix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .prefix_1 {
padding-left:80px;
}
.container_12 .prefix_2 {
padding-left:160px;
}
.container_12 .prefix_3 {
padding-left:240px;
}
.container_12 .prefix_4 {
padding-left:320px;
}
.container_12 .prefix_5 {
padding-left:400px;
}
.container_12 .prefix_6 {
padding-left:480px;
}
.container_12 .prefix_7 {
padding-left:560px;
}
.container_12 .prefix_8 {
padding-left:640px;
}
.container_12 .prefix_9 {
padding-left:720px;
}
.container_12 .prefix_10 {
padding-left:800px;
}
.container_12 .prefix_11 {
padding-left:880px;
}
/* Suffix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .suffix_1 {
padding-right:80px;
}
.container_12 .suffix_2 {
padding-right:160px;
}
.container_12 .suffix_3 {
padding-right:240px;
}
.container_12 .suffix_4 {
padding-right:320px;
}
.container_12 .suffix_5 {
padding-right:400px;
}
.container_12 .suffix_6 {
padding-right:480px;
}
.container_12 .suffix_7 {
padding-right:560px;
}
.container_12 .suffix_8 {
padding-right:640px;
}
.container_12 .suffix_9 {
padding-right:720px;
}
.container_12 .suffix_10 {
padding-right:800px;
}
.container_12 .suffix_11 {
padding-right:880px;
}
/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .push_1 {
left:80px;
}
.container_12 .push_2 {
left:160px;
}
.container_12 .push_3 {
left:240px;
}
.container_12 .push_4 {
left:320px;
}
.container_12 .push_5 {
left:400px;
}
.container_12 .push_6 {
left:480px;
}
.container_12 .push_7 {
left:560px;
}
.container_12 .push_8 {
left:640px;
}
.container_12 .push_9 {
left:720px;
}
.container_12 .push_10 {
left:800px;
}
.container_12 .push_11 {
left:880px;
}
/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/
.container_12 .pull_1 {
right:80px;
}
.container_12 .pull_2 {
right:160px;
}
.container_12 .pull_3 {
right:240px;
}
.container_12 .pull_4 {
right:320px;
}
.container_12 .pull_5 {
right:400px;
}
.container_12 .pull_6 {
right:480px;
}
.container_12 .pull_7 {
right:560px;
}
.container_12 .pull_8 {
right:640px;
}
.container_12 .pull_9 {
right:720px;
}
.container_12 .pull_10 {
right:800px;
}
.container_12 .pull_11 {
right:880px;
}
/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* CSS Container Styles
----------------------------------------------------------------------------------------------------*/
body {
z-index: -100;
font: 12px Arial, Helvetica, sans-serif;
background-color: #415367;
background-image: url(images/bgrepeat.png);
background-repeat: repeat;
}
#pageshadow {
background-image: url(images/body-bg.png);
background-repeat: no-repeat;
background-position: center top;
}
#header {
z-index: 2;
height: 160px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000;
border-left-color: #000;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#logo{
float:left;
margin-top:20px;
padding-left:20px;
}
#nav {
z-index: 10;
position: relative;
background: #333 url(images/nav-bg.jpg) repeat-x bottom;
font: 12px Arial, Helvetica, sans-serif;
height: 40px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000;
border-left-color: #000;
}
#content {
clear: both;
padding-top: 15px;
padding-bottom: 15px;
border-right: 1px solid #000;
border-left: 1px solid #000;
font: 12px/18px Arial, Helvetica, sans-serif;
}
#prefooter {
color: #BEC5CB;
width: 960px;
padding-top: 20px;
padding-bottom: 20px;
background-color: #13161A;
border-top-width: 4px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #40474F;
border-right-color: #000;
border-left-color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#prefooter ul {
list-style-type: disc;
list-style-position: inside;
}
#prefooter h4 {
color: #D8DCE0;
}
#prefooter a {
font-weight: normal;
text-decoration: none;
color: #B85C25;
}
#prefooter a:hover {
color: #D8DCE0;
}
#footer {
background: #20252B;
height: 15px;
color: #6B7B8F;
width: 960px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
font: 11px Arial, Helvetica, sans-serif;
font-weight: bold;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 15px;
}
#footer a {
color: #6B7B8F;
}
#footer a:hover {
color: #A45526;
}
/* Suckerfish Menu Styles
----------------------------------------------------------------------------------------------------*/
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 12em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 40px; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul, ul.sf-menu li:hover li li:hover ul, ul.sf-menu li.sfHover li li.sfHover ul {
left: 12em; /* match ul width */
top: -1px; /* to accomodate top border */
}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
left: 12em; /* match ul width */
top: 0;
}
.sf-menu {
float: left;
margin-bottom: 0em;
width: 960px;
}
.sf-menu a { /* top level menu items */
padding: 14px 12px;
text-decoration:none;
}
.sf-menu li li a {
border-bottom: 1px solid #000; /* sub menu borders */
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 10px 12px; /* set drop down menu height by adjusting the 10px value */
}
.sf-menu li li:first-child {
border-top: 1px solid #000; /* sub menu top border */
}
.sf-menu a, .sf-menu a:visited { /* main level menu color */
color: #FBD1A4;
}
.sf-menu li li a, .sf-menu li li a:visited { /* sub menu text color */
color: #F8B705;
}
.sf-menu li li, .sf-menu li li li {
background-color: #943E0A; /* drop-down menu background color */
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
background-color: #6A2F07; /* drop-down menu hover color */
}
.sf-menu li {
}
.first-item a {
border-left: none;
}
.sf-menu li li, .sf-menu li li li {
background-image: none;
}
.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: url(images/nav-bg-hov.jpg) repeat-x bottom;
outline: 0;
}
.sf-menu li li:hover, .sf-menu li li.sfHover, .sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
background-image: none;
outline: 0;
}
/*** arrows **/
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
position: absolute;
display: block;
right: 10px;
top: 17px; /* IE6 only */
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
li li .sf-sub-indicator {
top: 13px; /* IE6 drop down arrow position */
}
a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: 14px;
background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
li li a > .sf-sub-indicator { /* give all except IE6 the correct values */
top: 10px;
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px; /* arrow hovers for modern browsers*/
}
/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator {
background-position: -10px 0;
}
.sf-menu ul a > .sf-sub-indicator {
background-position: 0 0;
}
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/*** shadows for all but IE6 ***/
.sf-shadow ul {
background: url('images/shadow.png') no-repeat bottom right;
padding: 0 8px 9px 0;
-moz-border-radius-bottomleft: 17px;
-moz-border-radius-topright: 17px;
-webkit-border-top-right-radius: 17px;
-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
background: transparent;
}
/* Styles for vertical Suckerfish menu - probably not used
----------------------------------------------------------------------------------------------------*/
/*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
.sf-vertical, .sf-vertical li {
width: 210px;
}
/* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
.sf-vertical li:hover ul, .sf-vertical li.sfHover ul {
left: 210px; /* match ul width */
top: 0;
}
/*** alter arrow directions ***/
.sf-vertical .sf-sub-indicator {
background-position: -10px 0;
} /* IE6 gets solid image only */
.sf-vertical a > .sf-sub-indicator {
background-position: 0 0;
} /* use translucent arrow for modern browsers*/
/* hover arrow direction for modern browsers*/
.sf-vertical a:focus > .sf-sub-indicator, .sf-vertical a:hover > .sf-sub-indicator, .sf-vertical a:active > .sf-sub-indicator, .sf-vertical li:hover > a > .sf-sub-indicator, .sf-vertical li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0; /* arrow hovers for modern browsers*/
}
/* Type styles
----------------------------------------------------------------------------------------------------*/
a {
color: #A46200;
}
p {
padding-bottom: 10px;
}
h1 {
color: #415367;
letter-spacing: -1px;
margin-bottom: 10px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 28px;
font-style: normal;
line-height: 34px;
font-weight: normal;
font-variant: normal;
}
h2 {
color: #000;
margin-bottom: 10px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 28px;
font-weight: bold;
}
h3 {
color: #7D380E;
margin-bottom: 10px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
font-style: normal;
line-height: 26px;
font-weight: normal;
font-variant: normal;
}
h4 {
margin-bottom: 8px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
line-height: 24px;
font-weight: normal;
font-variant: normal;
}
h5 {
color: #7F3B0E;
margin-bottom: 5px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 20px;
font-weight: bold;
}
/* Sidebar content and nav styles
----------------------------------------------------------------------------------------------------*/
.sidebarbox {
background: #F0F3F4;
border: 2px solid #B8BFC7;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom:15px;
}
.sidebarbox h3 {
font-weight: normal;
color: #FBC942;
font-size: 17px;
line-height: normal;
margin-bottom: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-top-left-radius: 4px;
padding-top: 4px;
padding-right: 8px;
padding-bottom: 4px;
padding-left: 8px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 0px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #B8BFC7;
border-right-color: #B8BFC7;
border-bottom-color: #B8BFC7;
border-left-color: #B8BFC7;
background-image: url(images/sidebar-h3-bg.gif);
background-repeat: repeat-x;
background-position: left top;
}
.sidebarbox p {
padding:8px;
}
.sidebarbox ul {
margin: 0px;
list-style-type:none;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 0px;
padding-left: 2px;
background-color: #B8BFC7;
}
.sidebarbox ul li {
list-style: none;
display: inline;
}
.sidebarbox ul li a {
display: block;
line-height: 18px;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
color: #EFEFEF;
background-color: #75838E;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #B8BFC7;
padding-top: 5px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 10px;
}
.sidebarbox ul li a:hover {
text-decoration: none;
color: #0F1015;
background-color: #B66114;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #F8B705;
}
.simple {
margin-bottom:15px;
}
.simple ul li a {
display: block;
line-height: 18px;
text-decoration:none;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #A3ACB6;
color: #2B3035;
padding-top: 5px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 10px;
}
.simple ul li a:hover {
text-decoration: none;
color: #803B11;
background-color: #B9C0C8;
}
/* Header links/text styles
----------------------------------------------------------------------------------------------------*/
.headerlinks {
float: right;
text-align: right;
margin-top: 10px;
padding-right: 15px;
color: #6F3007;
}
.headerlinks a {
color:#B68105;
text-decoration:none;
font-weight: bold;
}
.headerlinks a:hover {
color: #F8B90D;
}
.headerlinks strong {
color: #FFF;
font: normal 24px Georgia, "Times New Roman", Times, serif;
letter-spacing: -1px;
}
/* Misc styles
----------------------------------------------------------------------------------------------------*/
.toppad { /* Generic style applied anywhere top padding needed */
padding-top:20px;
}
#credit {
text-align:center;
color: #20252B;
height: 25px;
font-size: 11px;
}
#credit a {
color: #20252B;
}