style for SOE menus

accordion_content.markdown

#Information For Widget Content

###Future Students

Links for Prospective Undergraduates

• Future Undergraduates

arrow.png

�PNG

���
IHDR���������;0�����tEXtSoftware�Adobe ImageReadyq�e<����IDATx�Ė1�Q�/J�L&�U)��� ���`2���ʪX�DdV&e2�d3�L_)}�S���g<=_�;���C��=ȁ�A�d���%MеK�h!�,@�B
[g��J��T�$
fbIY�.v:bu�d2�0X�[,��<�K��`Bl�$FbgqԒ��gP
/��J��<jyU����.�6��L�]�
=�8�@�=�7P�S���؛�
��)��b�깎�8��7o
�m}&�Y&�q����IEND�B`�

footer.css

.ftrTable {
    border-spacing: 0;
    clear: both;
    color: white;
    font-family: Nobile,Lucida,Arial;
    font-size: 11.5px;
    padding: 0;
    width: 100%;
}
.ftrTable #ftrLogo {
    height: 40px;
    left: 20px;
    margin: 0;
    position: relative;
    width: 219px;
}
.ftrTable #ftrMotto {
    color: white;
    font-family: Nobile,Lucida,Arial,sans-serif;
    font-size: 11.5px;
    margin: 0;
    padding: 0 0 20px;
    text-align: right;
}

header.css

/*This should help with some of the weirdness I'm seeing with header, specifically the space between the header and the body*/

#hdrContainer {
    background-color: transparent;
    height: 137px;
    margin-bottom: 10px;
}
#hdrContainer #hdr {
    height: 137px;
    margin: 0 auto;
    padding: 0;
    width: 1024px;
}

homepage_news_event_info.css

#homeBottom #item #homeNews {
background: #6d7c6c;
background: -webkit-gradient(
    linear, 0% 100%, 0% 0%,
    color-stop(0.36, #6D7C6C), 
    color-stop(0.93, #8A9989)
);
background: -moz-linear-gradient(
    center bottom,
    rgb(109,124,108) 36%,
    rgb(138,153,137) 93%
);
}
#homeBottom #item #homeEvents{
background: #75674a;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.36, rgb(117,103,74)),
    color-stop(0.93, rgb(145,131,102))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(117,103,74) 36%,
    rgb(145,131,102) 93%
);
}
#homeBottom #item #homeNews {
-webkit-box-shadow: black 0px 0px 9px;
-moz-box-shadow: black 0px 0px 9px;
box-shadow: black 0px 0px 9px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0px 0px 10px 11px;
max-height: 115px;
min-height: 115px;
overflow: hidden;
padding: 35px 10px 10px;
position: relative;
width: 440px;
}

#homeBottom #item .title {
color: #fff;
display: block;
font-family: Cardo, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-size: 20px;
left: 34%;
margin: 0px auto;
padding: 0px;
position: absolute;
text-align: center;
top: 7px;
width: 31%;
}

#homeBottom #item #homeNews .photo-news, 
#homeBottom #item #homeEvents .photo-event {
float: left;
margin: 0px 20px 0px 0px;
width: 110px;
height: 110px;
}
#homeBottom #item #homeNews a.header-news, 
#homeBottom #item #homeEvents a.header-event {
border-bottom: 1px dotted white;
color: #fff;
display: block;
font-size: 18px;
font-weight: bold;
margin: 0px;
padding: 0px;
text-decoration: none;
}
#homeBottom #item #homeInformation {
-webkit-box-shadow: black 0px 0px 9px;
-moz-box-shadow: black 0px 0px 9px;
box-shadow: black 0px 0px 9px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #3C4B3D;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.36, rgb(60,75,61)),
    color-stop(0.93, rgb(87,102,88))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(60,75,61) 36%,
    rgb(87,102,88) 93%
);
margin: 0px;
padding: 0px;
position: relative;
width: 474px;
}

left_menu.css

dl.portlet ul.navTree{
margin:0;
width:200px;
background: #28508c;
padding: 10px 0 0 0;

-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;

box-shadow: 6px 10px 10px 0px rgba(0, 0, 6, 0.35);
-moz-box-shadow: 6px 10px 10px 0px rgba(0, 0, 6, 0.35);
-webkit-box-shadow: 6px 10px 10px 0px rgba(0, 0, 6, 0.35);
overflow: visible;
}

dl.portlet ul.navTree li.navTreeItem {
width: auto;
font-size: 15px;
height: 30px;
line-height: 30px;
margin: 0;
padding:0;
display: block;
list-style:none;
background: #fff;
border-bottom: 1px solid #94A8C6;
}

dl.portlet ul.navTree li.navTreeItem:first-child {
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
}

dl.portlet ul.navTree li.navTreeItem:last-child {
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
border-bottom: 0 none;
}

dl.portlet ul.navTree li.navTreeCurrentNode {
background: #ffde90;
}

dl.portlet ul.navTree li.navTreeItem a {
font-family: Nobile,Lucida,Arial,sans-serif;
font-size: 15px;
color: #28508C;
display: block;
padding:0;
margin:0;
font-weight: bold;
text-decoration: none;
border: 0px solid;
padding-left: 20px;
}
#portal-column-one {
vertical-align: top;
padding-top: 130px;
}

dl.portlet ul.navTree li.navTreeCurrentNode a{
background: url('arrow.png?03') no-repeat transparent right;
color: #704F00;
text-shadow: 0 1px rgba(255,255,255,0.5);
width: 193px;
}

dl.portlet ul.navTree li.navTreeItem a:hover {
color: #75AD0A;
}

dl.portlet ul.navTree li.navTreeCurrentNode a:hover{
color: #704F00 !important;
cursor: text;
}

left_menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>


<div>

  <ul class="navTree navTreeLevel0">

    <li class="navTreeItem visualNoMarker section-administration">
      <a href="http://engsoe00.ucmerced.edu:20801/Plone3/about-us/administration" class="state-published contenttype-document" title=""><span>Administration</span></a>
    </li>
  
    <li class="navTreeItem visualNoMarker section-history">
      <a href="http://engsoe00.ucmerced.edu:20801/Plone3/about-us/history" class="state-published contenttype-document" title=""><span>History</span></a>
    </li>

    <li class="navTreeItem visualNoMarker section-fast-facts">
      <a href="http://engsoe00.ucmerced.edu:20801/Plone3/about-us/fast-facts" class="state-published contenttype-document" title=""><span>Fast Facts</span></a>
    </li>

    <li class="navTreeItem visualNoMarker section-school-partners">
      <a href="http://engsoe00.ucmerced.edu:20801/Plone3/about-us/school-partners" class="state-published contenttype-document" title=""><span>School Partners</span></a>
    </li>

    <li class="navTreeItem visualNoMarker section-facilities">
      <a href="http://engsoe00.ucmerced.edu:20801/Plone3/about-us/facilities" class="state-published contenttype-document" title=""><span>Facilities</span></a>
    </li>

    <li class="navTreeItem visualNoMarker navTreeCurrentNode section-visit-us">
      <a href="http://engsoe00.ucmerced.edu:20801/Plone3/about-us/visit-us" class="state-published navTreeCurrentItem navTreeCurrentNode contenttype-document" title=""><span>Visit Us</span></a>
    </li>

  </ul>

</div>

</body>
</html>

link_list.markdown

##Project Link list

• Home example
• About

SpryAccordion.css

.acc {
  overflow: hidden;
  font-size: 16px;
}

.acc .accPanelTab {
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  height: 20px;
  border-bottom: solid 1px #fff;
  margin: 0px;
  padding: 5px 0 10px;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  text-align: left;
}

.acc .accPanelContent {
  overflow: auto;
  margin: 0px;
  padding: 0px;
  background-image: url(images/gray-gradient.gif);
  background-repeat: repeat-x;
}

.acc .accTabHover {
  background: #292e29;
  background: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.08, rgb(38,43,38)),
      color-stop(0.97, rgb(92,112,93))
  );
  background: -moz-linear-gradient(
      center bottom,
      rgb(38,43,38) 8%,
      rgb(92,112,93) 97%
  );
}

.acc .accOpen {
  background: url("http://www.ucmerced.edu/images/soe/graphic-information-on.png") no-repeat right 10px transparent;
}

.acc .accClosed {
  background: url("http://www.ucmerced.edu/images/soe/graphic-information-off.png") no-repeat right 10px transparent;
}

.acc .accFocused {
  /*  */
}

widget_acordian.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script language="JavaScript" type="text/javascript" src="SpryAccordion.js"></script>
<link href="SpryAccordion.css" rel="stylesheet" type="text/css" />

<style type="text/css">
  body {
    background: #000;
    color: #fff;
    font: normal normal normal 16px/1.5em 'Helvetica Neue', Arial, sans-serif;
    padding: 50px;
  }
  div.repeat {
    background: #435244;
    width: 400px;
    height: 300px;
    padding: 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  div.repeat a.title {
    text-align: center;
    display: block;
  }
</style>

</head>
<body>

<div class="repeat">
                <a href="#" class="title">Information For</a>
                    <div id="SpryAccordion1" class="acc">

<div class="accPanel accClosed"> 
                                <div class="accPanelTab"> 
                                    Future Students <p class="plus">&oplus;</p><p class="minus">&ominus;</p>
                                </div> 
                                <div class="accPanelContent"> 
                                    <div class="acontent"> 
                                        <p>Eskobo goowy manjam. Guba simpy bebo, zecco plazes moola gpokr.</p> 
 
                                    </div> 
                                </div> 
                            </div>

<div class="accPanel accClosed"> 
                                <div class="accPanelTab"> 
                                    Current Students <p class="plus">⊕</p><p class="minus">⊖</p>
                                </div> 
                                <div class="accPanelContent"> 
                                    <div class="acontent"> 
                                        <p>Eskobo goowy manjam. Guba simpy bebo, zecco plazes moola gpokr.</p> 
 
                                    </div> 
                                </div> 
                            </div>

<div class="accPanel accClosed"> 
                                <div class="accPanelTab"> 
                                    Prospective Faculty <p class="plus">⊕</p><p class="minus">⊖</p>
                                </div> 
                                <div class="accPanelContent"> 
                                    <div class="acontent"> 
                                        <p>Eskobo goowy manjam. Guba simpy bebo, zecco plazes moola gpokr.</p> 
 
                                    </div> 
                                </div> 
                            </div>

<div class="accPanel accClosed"> 
                                <div class="accPanelTab"> 
                                    Alumni <p class="plus">⊕</p><p class="minus">⊖</p>
                                </div> 
                                <div class="accPanelContent">
                                    <div class="acontent"> 
                                        <p>Eskobo goowy manjam. Guba simpy bebo, zecco plazes moola gpokr.</p> 
 
                                    </div> 
                                </div> 
                            </div>

                </div>
            </div>

<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("SpryAccordion1", { hoverClass: "accTabHover", openClass: "accOpen", closedClass: "accClosed", focusedClass: "accFocused" });
</script>

</body>
</html>

This is a basic style setup for SOE homepage and internal menus. The CSS is really what's needed the HTML is just for me.

Menu sample can be previewed here