File: examples/cms/css/layout.css

html, html body {
margin:0;
padding:0;
}

body {
font-family:arial;
font-size:12px;
}

img {border:0;}
a {text-decoration:none}


body {
font-family: Arial;
font-size:12px;
color:#333;
}



/* Site Layout */

#container {
width:818px;
margin:auto;
background: #eaeffa;
padding-top:185px;
overflow:hidden;
position:relative;
border: 1px solid #ccc;
-moz-border-radius:5px;
}


/* ---------------*/
/* developer mode */
	#container {
		margin-bottom: 60px;
	}
/* ---------------*/



/*above content sessionmessages*/
#messageBox.hasContent {
background-color: #0065b3;
color:#FFFFFF;
font-size:14px;
margin: 0 31px 15px 31px;
padding:5px;
display:none;
}

#messageBox.hasContent {
display:block;
}

#messageBox ul {
list-style:none;
margin: 0;
}

/*within content session messages*/
#content #sessMessageList {
-moz-border-radius:8px;
-webkit-border-radius:8px;
background:#EAEFFA;
list-style-position:inside;
margin-left:0;
padding:10px;
}






#content {
/* background:url(../images/sidelines.gif) left top  #fff; */
background:#fff;
border:1px solid #ccc;
display:inline;
float:left;
margin-left:20px;
overflow:auto;
padding:9px;
position:relative;
width:582px;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}


.topleft, .topright, .bottomleft, .bottomright {
background:transparent url(../images/sprite_corners.gif) repeat scroll 0%;
height:8px;
position:absolute;
width:8px;
overflow:hidden;
}
.topleft {
left:0pt;
top:0pt;
background-position:top left;
}
.topright {
right:0pt;
top:0pt;
background-position:top right;
}
.bottomleft {
bottom:0pt;
left:0pt;
background-position:0px 8px;
}
.bottomright {
bottom:0pt;
right:0pt;
background-position: 8px 8px;
}

.toptop {
border-top:1px solid #ccc;
width:590px;
height:2px;
overflow:hidden;
position:absolute;
top:0;
left:5px;
}

.bottombottom {
border-bottom:1px solid #ccc;
width:590px;
height:2px;
overflow:hidden;
position:absolute;
bottom:0;
left:5px;
}


#sidebar {
width:140px;
float:right;
margin-right:29px;
display:inline;
}




#sidenav {
list-style-type:none;
margin:0 0 15px 0;
padding:0;
}
#sidenav li {
border:1px solid #CCCCCC;
-moz-border-radius: 5px;
background: #fff;
width:142px;
line-height: 16px;
margin-bottom: 4px;
}
#sidenav li a {
-moz-border-radius: 5px;
color:#000066;
display:block;
font-size:12px;
padding:5px 0 5px 10px;
}




#quicksearch {
width:138px;
overflow:hidden;
margin: 0 auto 15px auto;
background:url(../images/bg_quicksearch.gif) no-repeat top center;
padding-top:25px;
}

#quicksearch * {
outline: 0; /*remove blur from safari*/
}

#quicksearch form {
margin:0;
}

#quicksearch input,
#quicksearch select {
width:138px;
margin-bottom:5px;
}


#quicksearch #radioz {
margin:0px auto auto auto;

}

#quicksearch input.radio {
width:12px;
margin:0;
}

#quicksearch #advancedlink {
text-align:center;
display:block;
margin:2px 0
}

#socialNetworks {
margin: 0 0 15px 0;
color: blue;
text-align: center;
height:55px;
overflow:hidden;
}

#socialNetworks a {
background-image:url(../images/sprite_social.png);
display:block;
float:left;
height:32px;
overflow:hidden;
text-indent:-9999px;
width:30px;
margin-top: 5px;
}

#socialNetworks #facebook {
background-position: 0px 0px;
margin-right: 6px;
}

#socialNetworks #rss {
background-position: -37px 0px;
margin-right: 6px;
}

#socialNetworks #twitter {
background-position: -73px 0px;
margin-right: 6px;
}

#socialNetworks #youtube {
background-position: -110px 0px;
}


.sidebox {
margin: 0 0 15px 0;
border:1px solid #ccc;
background:url(../images/bg_gradient.gif) top left repeat-x #eff4ff;
padding: 5px;
color:#006;
font-size: 11px;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

.sidebox h2 {
margin: 5px 0 5px 0;
font-size: 15px;
text-align:center;
}




/* Sidebar login box */
#loginbox form {
margin:0;
}

#sidebarEmail, #sidebarPassword {
width: 122px;
margin-bottom: 8px;
}

#loginbox a {
display:block;
padding: 8px 0 0 0;
}



/* View by island list box */
#viewByIsland ul {
text-align:center;
list-style-type:none;
margin:0;
padding;0;
}

#viewByIsland ul li a {
display:block;
width:100%;
height:100%;
padding: 3px 0;
}

#viewByIsland ul li a:hover {
background:#fff;
}




/* Page header */
#header {
background:#0065B3 none repeat scroll 0 0;
height:135px;
left:0px;
position:absolute;
top:0;
width:100%;
z-index:99;
}

#header h1 {

}

#header a {
background:#003366 none repeat scroll 0 0;
color:#FFFFFF;
display:block;
margin:36px;
overflow:hidden;
padding: 14px;
text-align:center;
width:140px;
-moz-border-radius: 15px;
}

/* TOP NAVIGATION */

#main-navigation {
position:absolute;
top:135px;
left:0;
z-index:99;
height:30px;
width:818px;
overflow:hidden;
background: #133c8c;
}

ul#topnav {
list-style-type:none;
margin:0;
padding:0;
width:818px;
height:30px;
}

ul#topnav li {
float:left;
}

#topnav li a {
color: #fff;
display:block;
font-size: 12px;
height: 30px;
line-height:30px;
text-align:center;
}

#topnav li a:hover {
background: #036;
}


#t1 {width:100px;}
	#t1 a:hover {background-position: -10px 42px}
#t2 {width: 96px;}
	#t2 a:hover {background-position:-123px 42px}
#t3 {width: 127px;}
	#t3 a:hover {background-position:-219px 42px}
#t4 {width:102px;}
	#t4 a:hover {background-position:-390px 42px}
#t5 {width: 108px;}
	#t5 a:hover {background-position:-492px 42px}
#t6 {width: 74px;}
	#t6 a:hover {background-position:-600px 42px}
#t7 {width: 87px;}
	#t7 a:hover {background-position:-674px 42px}
#t8 {width: 48px;}
	#t8 a:hover {background-position: 57px 42px}

#t9 {width: 72px;}
	#t9 a:hover {background-position:-318px 42px}


#footer {
clear:both;
height:38px;
width:786px;
padding: 0px 16px;
overflow:hidden;
background: #036;
color:#fff;
font-size:10px;
position: relative;
-moz-border-radius: 5px;
margin-top: 15px;
float: left; /*so the margin will affect the floats above*/
}

#footer a {
color: #fff;
text-decoration: underline;
}

#footer p {
margin:0;
width: 730px;
padding: 12px 17px;
}

a#footerToTop {
background:#0065B3 none repeat scroll 0 0;
color:#FFFFFF;
font-size:17px;
height:13px;
overflow:hidden;
position:absolute;
right:10px;
text-align:center;
text-indent:-9999px;
top:12px;
width:36px;
-moz-border-radius: 15px;
}

a#footerToTop:hover {
background: yellow;
}