ActionItem1: Layout Bar

git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@473 3f533792-8f58-4932-b0fe-aaf55b0a4547

ActionItem1: Layout Bar
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@473 3f533792-8f58-4932-b0fe-aaf55b0a4547
ValessioBrito
1 parent e50b4ce5
Showing 12 changed files with 293 additions and 76 deletions Show diff stats
public/artwork/newbar/NoosferoBar.png
public/artwork/newbar/images/bg_item_bar_blue_active.png
public/artwork/newbar/images/bg_item_bar_blue_off.png
public/artwork/newbar/images/bg_item_bar_blue_on.png
public/artwork/newbar/images/bg_item_bar_red_active.png
public/artwork/newbar/images/bg_item_bar_red_off.png
public/artwork/newbar/images/bg_item_bar_red_on.png
public/artwork/newbar/images/bg_noosfero_bar.png
public/artwork/newbar/images/bg_noosfero_bar_red.png
public/artwork/newbar/images/icon_enter_mini.png
public/artwork/newbar/menu.css
public/artwork/newbar/menu.html
+body {
+margin:0px;
+padding: 0px;
+}
+
+#wrap {
+border: 3px solid #204a87;
+}
+
+/* Core do Tango na Barra 
+* Azul Escuro - 204a87
+*/
+
+
+#noosfero_bar {
+  position: fixed;
+  background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
+  top: -3px;
+  height: 35px;
+  margin-left: -3px;
+  margin-top: 3px;
+  margin-right: 3px;
+  padding: 0px;
+  font-family: serif-Sans, Verdana, Arial;
+}
+
+#noosfero_bar *:focus {
+  color: red !important;
+}
+  
 #accessibility_menu {
   float: left;
+  font-size: 10px;
+  padding: 1px;
+  color: #dfdfdf;
 }
  
-#navigation_bar {
-  float: right;
-}
-#search_box {
-  clear: both;
+#accessibility_menu a {
+  padding-left: 7px;
+  margin-left: 2px;
+  background: url("./images/icon_enter_mini.png") 0px 5px no-repeat;
+  color: #dfdfdf;
+  text-decoration: none;
 }
  
+#accessibility_menu a:hover {
+  color: #fff;
+}
  
-#navigation_bar ul{
-  margin: 0px;
+#navigation_bar ul {
+  float: right;
+  margin: 7px;
   padding: 0px;
+  right: 0px;
+  text-align: right;
+  top: 0px;
 }
  
-#navigation_bar ul li{
+#navigation_bar ul li {
   list-style: none;
-  margin: 0px 0px 0px 15px;
-  position: relative;
   display: inline;
-  font-family: sans-serif;
-  font-weight: 800;
-  font-size: 12px;
+  font-size: 17px;
+  margin-right: 5px;
 }
  
-#navigation_bar ul ul li{
-  font-weight: 500;
-  float: none;
-  margin: 0px 0px 0px -40px;
-  padding: 0px;
-  border: none;
-  border-top: 1px solid #F8F8F8;
-  border-bottom: 1px solid #C0C0C0;
-  display: block;
-  float: left;
-  width: 100px;
+#navigation_bar ul li a {
+  padding-left: 5px;
+  padding-right: 5px;
+  padding-top: -2px;
+  padding-bottom: 3px;
+  color: #fff;
+  text-decoration: none;
 }
-#navigation_bar.msie ul ul li{
-  margin-left: 0px;
+
+#navigation_bar ul li ul {
+  padding: 10px;
 }
  
-#navigation_bar ul ul{
-  margin: 0px;
-  clear: left;
-  display: none;
-  position: absolute;
-  top: 20px;
-  left: 0px;
-  background-color: #E0E0E0;
-  border: 1px solid #808080;
-  width: 150px;
+#navigation_bar ul li ul li {
+ display: block;
+ float: right;
+ margin: 5px;
 }
-#navigation_bar.msie ul ul{
-  width: 180px;
+
+
+/* ITEM 1 */
+
+#noosfero_bar.category1 {
+  background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
 }
  
-#navigation_bar ul ul ul{
-  top: 5px;
-  left: 50px;
+#wrap.category1 {
+border: 3px solid #204a87 !important;
 }
  
-#navigation_bar a:link,
-#navigation_bar a:active,
-#navigation_bar a:visited{
-  text-decoration: none;
-  color: #707070;
-  overflow: hidden;
+#category1 a {
+  border: 1px outset #6692c4;
+  background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x;
+}
+
+#category1 a:hover, li#category1.active a:hover {
+  border: 1px inset #6692c4 !important;
+  background: #3b6096 url("./images/bg_item_bar_blue_on.png") repeat-x !important;
+}
+
+li#category1.active a {
+  border: 1px inset #6692c4;
+  background: #719ece url("./images/bg_item_bar_blue_active.png") repeat-x;
+}
+
+li#category1 ul li a {
+  border: 1px outset #6692c4 !important;
+  background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x !important;
+}
+
+#category1 ul {
+  background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
+}
+
+
+/* ITEM 2 red */
+
+#noosfero_bar.category2 {
+  background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x;
+}
+
+#wrap.category2 {
+border: 3px solid #a40000 !important;
+}
+
+#category2 a {
+  border: 1px outset #a40000;
+  background: #a40000 url("./images/bg_item_bar_red_off.png") repeat-x;
+}
+
+#category2 a:hover, li#category2.active a:hover {
+  border: 1px inset #a40000;
+  background: #ae1c1c url("./images/bg_item_bar_red_on.png") repeat-x;
+}
+
+li#category2.active a {
+  border: 1px inset #a40000;
+  background: #ee2828 url("./images/bg_item_bar_red_active.png") repeat-x;
+}
+
+#category2 ul {
+  background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x;
+}
+
+
+/* ITEM 3 */
+
+#noosfero_bar.category3 {
+  background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
+}
+
+#wrap.category3 {
+border: 3px solid #204a87 !important;
+}
+
+#category3 a {
+  border: 1px outset #6692c4;
+  background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x;
 }
  
-#navigation_bar ul ul a{
-  padding: 0px 2px 0px 5px;
-  display: block;
-  width: 100px;
-  background-color: #DCDCDC;
+#category3 a:hover, li#category3.active a:hover {
+  border: 1px inset #6692c4 !important;
+  background: #3b6096 url("./images/bg_item_bar_blue_on.png") repeat-x !important;
 }
  
-#navigation_bar ul ul a:hover{
-  background-color: #EEE;
+li#category3.active a {
+  border: 1px inset #6692c4;
+  background: #719ece url("./images/bg_item_bar_blue_active.png") repeat-x;
 }
  
-#navigation_bar ul ul a.linkSubMenu:link,
-#navigation_bar ul ul a.linkSubMenu:active,
-#navigation_bar ul ul a.linkSubMenu:visited{
-  font-weight: 800;
+li#category3 ul li a {
+  border: 1px outset #6692c4 !important;
+  background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x !important;
+}
+
+#category3 ul {
+  background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
+}
+
+
+/* ITEM 4 red */
+
+#noosfero_bar.category4 {
+  background: #a40000 url("./images/bg_noosfero_red.png") repeat-x;
+}
+
+#wrap.category4 {
+border: 3px solid #a40000 !important;
+}
+
+#category4 a {
+  border: 1px outset #a40000;
+  background: #a40000 url("./images/bg_item_bar_red_off.png") repeat-x;
+}
+
+#category4 a:hover, li#category4.active a:hover {
+  border: 1px inset #a40000;
+  background: #ae1c1c url("./images/bg_item_bar_red_on.png") repeat-x;
+}
+
+li#category4.active a {
+  border: 1px inset #a40000;
+  background: #ee2828 url("./images/bg_item_bar_red_active.png") repeat-x;
+}
+
+#category4 ul {
+  background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x;
+}
+
+
+
+
+#navigation_bar ul ul {
+margin: 0px;
+padding: 0px;
+width: 100%;
+left: 0px;
+position: absolute;
+margin-top: 34px;
+display: none;
+}
+
+#search_box {
+display: none;
+clear: both;
 }
@@ -7,23 +7,38 @@
     <script type="text/javascript" src="menu.js"></script>
   </head>
   <body>
-
+<div id="wrap" class='category1'>
+      
+<div id='noosfero_bar' class='category1'> 
     <div id='accessibility_menu'>
-      <a href='#'>Acesibilidade</a> |
-      <a href='#'>Central de Buscas</a> |
-      <a href='#'>Ir para conteúdo</a>
+       <a href='#'>Acessibilidade</a>
+       <a href='#'>Central de Buscas</a>
+       <a href='#'>Ir para conteúdo</a>
     </div><!-- accessibility_menu -->
  
     <div id='navigation_bar'>
       <ul>
-        <li id='category1'>
-        Noosfero
+        <li id='category1' class='active'>
+         Noosfero 
         <ul>
-          <li><a href=''><span>Item 1</span></a></li>
-          <li><a href=''><span>Item 2</span></a></li>
-          <li><a href=''><span>Item 3</span></a></li>
-          <li><a href=''><span>Item 4</span></a></li>
-          <li><a href=''><span>Item 5</span></a></li>
+          <li><a href=''><span>Iteam 1</span></a></li>
+          <li><a href=''><span>Itemdasd 2</span></a></li>
+          <li><a href=''><span>Iteaam 3</span></a></li>
+          <li><a href=''><span>Iteaam 4</span></a></li>
+          <li><a href=''><span>Itemdasds 5</span></a></li>
+          <li><a href=''><span>Itesdm 2</span></a></li>
+          <li><a href=''><span>Iteam 3</span></a></li>
+          <li><a href=''><span>Iteasdasdm 4</span></a></li>
+          <li><a href=''><span>Itesdasm 5</span></a></li>
+          <li><a href=''><span>Itesdm 2</span></a></li>
+          <li><a href=''><span>Itedsadm 3</span></a></li>
+          <li><a href=''><span>Itedsm 4</span></a></li>
+          <li><a href=''><span>Itessdsm 5</span></a></li>
+          <li><a href=''><span>Itessasm 2</span></a></li>
+          <li><a href=''><span>Isssssstesm 3</span></a></li>
+          <li><a href=''><span>Iteasdm 3</span></a></li>
+          <li><a href=''><span>Itessm 4</span></a></li>
+          <li><a href=''><span>Iteasdm 5</span></a></li>
         </ul>
         </li>
  
@@ -31,21 +46,32 @@
         Territorios
         <ul>
           <li><a href=''><span>Item 1</span></a></li>
-          <li><a href=''><span>Item 2</span></a></li>
-          <li><a href=''><span>Item 3</span></a></li>
+          <li><a href=''><span>Itssssem 2</span></a></li>
+          <li><a href=''><span>Itsssssem 3</span></a></li>
           <li><a href=''><span>Item 4</span></a></li>
-          <li><a href=''><span>Item 5</span></a></li>
+          <li><a href=''><span>Itssssem 5</span></a></li>
         </ul>
         </li>
  
-        <li id='category2'>
+        <li id='category3'>
         Lalala
         <ul>
           <li><a href=''><span>Item 1</span></a></li>
-          <li><a href=''><span>Item 2</span></a></li>
-          <li><a href=''><span>Item 3</span></a></li>
+          <li><a href=''><span>Issstem 2</span></a></li>
+          <li><a href=''><span>Itsssem 3</span></a></li>
           <li><a href=''><span>Item 4</span></a></li>
-          <li><a href=''><span>Item 5</span></a></li>
+          <li><a href=''><span>Itssem 5</span></a></li>
+        </ul>
+        </li>
+      
+        <li id='category4'>
+        Lalala
+        <ul>
+          <li><a href=''><span>Iaaaatem 1</span></a></li>
+          <li><a href=''><span>Item 2</span></a></li>
+          <li><a href=''><span>Itaaaem 3</span></a></li>
+          <li><a href=''><span>Itaaem 4</span></a></li>
+          <li><a href=''><span>Itaaaaaaaaem 5</span></a></li>
         </ul>
         </li>
       </ul>
@@ -60,6 +86,53 @@
         <input type='submit' value='Buscar'>
       </form>
     </div><!-- id='search_box' -->
+</div>
+        <div id="header">
+          <div id="virtual_community_identification">Default Virtual Community</div>
+        </div>
+
+        <div id='content'>
+	  <!-- <a name='main_content'/></a> -->
+          <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
+          <!--
+          <div id='header_content'>
+          </div>
+          -->
+          
+            <div id="boxes"><h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+<h1>Account options</h1>
+
+</div>
+          
+        </div>
+
+        <div id="footer">
+          <!-- <a name='footer'/></a> -->
+          nothing in the footer yet
+          <div action="list" class="none_back back"></div>
+        </div>
+      </div>
+    </div>
+    <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" />
  
   </body>
 </html>
	1	+body {
	2	+margin:0px;
	3	+padding: 0px;
	4	+}
	5	+
	6	+#wrap {
	7	+border: 3px solid #204a87;
	8	+}
	9	+
	10	+/* Core do Tango na Barra
	11	+* Azul Escuro - 204a87
	12	+*/
	13	+
	14	+
	15	+#noosfero_bar {
	16	+ position: fixed;
	17	+ background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
	18	+ top: -3px;
	19	+ height: 35px;
	20	+ margin-left: -3px;
	21	+ margin-top: 3px;
	22	+ margin-right: 3px;
	23	+ padding: 0px;
	24	+ font-family: serif-Sans, Verdana, Arial;
	25	+}
	26	+
	27	+#noosfero_bar *:focus {
	28	+ color: red !important;
	29	+}
	30	+
1	31	#accessibility_menu {
2	32	float: left;
	33	+ font-size: 10px;
	34	+ padding: 1px;
	35	+ color: #dfdfdf;
3	36	}
4	37
5		-#navigation_bar {
6		- float: right;
7		-}
8		-#search_box {
9		- clear: both;
	38	+#accessibility_menu a {
	39	+ padding-left: 7px;
	40	+ margin-left: 2px;
	41	+ background: url("./images/icon_enter_mini.png") 0px 5px no-repeat;
	42	+ color: #dfdfdf;
	43	+ text-decoration: none;
10	44	}
11	45
	46	+#accessibility_menu a:hover {
	47	+ color: #fff;
	48	+}
12	49
13		-#navigation_bar ul{
14		- margin: 0px;
	50	+#navigation_bar ul {
	51	+ float: right;
	52	+ margin: 7px;
15	53	padding: 0px;
	54	+ right: 0px;
	55	+ text-align: right;
	56	+ top: 0px;
16	57	}
17	58
18		-#navigation_bar ul li{
	59	+#navigation_bar ul li {
19	60	list-style: none;
20		- margin: 0px 0px 0px 15px;
21		- position: relative;
22	61	display: inline;
23		- font-family: sans-serif;
24		- font-weight: 800;
25		- font-size: 12px;
	62	+ font-size: 17px;
	63	+ margin-right: 5px;
26	64	}
27	65
28		-#navigation_bar ul ul li{
29		- font-weight: 500;
30		- float: none;
31		- margin: 0px 0px 0px -40px;
32		- padding: 0px;
33		- border: none;
34		- border-top: 1px solid #F8F8F8;
35		- border-bottom: 1px solid #C0C0C0;
36		- display: block;
37		- float: left;
38		- width: 100px;
	66	+#navigation_bar ul li a {
	67	+ padding-left: 5px;
	68	+ padding-right: 5px;
	69	+ padding-top: -2px;
	70	+ padding-bottom: 3px;
	71	+ color: #fff;
	72	+ text-decoration: none;
39	73	}
40		-#navigation_bar.msie ul ul li{
41		- margin-left: 0px;
	74	+
	75	+#navigation_bar ul li ul {
	76	+ padding: 10px;
42	77	}
43	78
44		-#navigation_bar ul ul{
45		- margin: 0px;
46		- clear: left;
47		- display: none;
48		- position: absolute;
49		- top: 20px;
50		- left: 0px;
51		- background-color: #E0E0E0;
52		- border: 1px solid #808080;
53		- width: 150px;
	79	+#navigation_bar ul li ul li {
	80	+ display: block;
	81	+ float: right;
	82	+ margin: 5px;
54	83	}
55		-#navigation_bar.msie ul ul{
56		- width: 180px;
	84	+
	85	+
	86	+/* ITEM 1 */
	87	+
	88	+#noosfero_bar.category1 {
	89	+ background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
57	90	}
58	91
59		-#navigation_bar ul ul ul{
60		- top: 5px;
61		- left: 50px;
	92	+#wrap.category1 {
	93	+border: 3px solid #204a87 !important;
62	94	}
63	95
64		-#navigation_bar a:link,
65		-#navigation_bar a:active,
66		-#navigation_bar a:visited{
67		- text-decoration: none;
68		- color: #707070;
69		- overflow: hidden;
	96	+#category1 a {
	97	+ border: 1px outset #6692c4;
	98	+ background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x;
	99	+}
	100	+
	101	+#category1 a:hover, li#category1.active a:hover {
	102	+ border: 1px inset #6692c4 !important;
	103	+ background: #3b6096 url("./images/bg_item_bar_blue_on.png") repeat-x !important;
	104	+}
	105	+
	106	+li#category1.active a {
	107	+ border: 1px inset #6692c4;
	108	+ background: #719ece url("./images/bg_item_bar_blue_active.png") repeat-x;
	109	+}
	110	+
	111	+li#category1 ul li a {
	112	+ border: 1px outset #6692c4 !important;
	113	+ background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x !important;
	114	+}
	115	+
	116	+#category1 ul {
	117	+ background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
	118	+}
	119	+
	120	+
	121	+/* ITEM 2 red */
	122	+
	123	+#noosfero_bar.category2 {
	124	+ background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x;
	125	+}
	126	+
	127	+#wrap.category2 {
	128	+border: 3px solid #a40000 !important;
	129	+}
	130	+
	131	+#category2 a {
	132	+ border: 1px outset #a40000;
	133	+ background: #a40000 url("./images/bg_item_bar_red_off.png") repeat-x;
	134	+}
	135	+
	136	+#category2 a:hover, li#category2.active a:hover {
	137	+ border: 1px inset #a40000;
	138	+ background: #ae1c1c url("./images/bg_item_bar_red_on.png") repeat-x;
	139	+}
	140	+
	141	+li#category2.active a {
	142	+ border: 1px inset #a40000;
	143	+ background: #ee2828 url("./images/bg_item_bar_red_active.png") repeat-x;
	144	+}
	145	+
	146	+#category2 ul {
	147	+ background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x;
	148	+}
	149	+
	150	+
	151	+/* ITEM 3 */
	152	+
	153	+#noosfero_bar.category3 {
	154	+ background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
	155	+}
	156	+
	157	+#wrap.category3 {
	158	+border: 3px solid #204a87 !important;
	159	+}
	160	+
	161	+#category3 a {
	162	+ border: 1px outset #6692c4;
	163	+ background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x;
70	164	}
71	165
72		-#navigation_bar ul ul a{
73		- padding: 0px 2px 0px 5px;
74		- display: block;
75		- width: 100px;
76		- background-color: #DCDCDC;
	166	+#category3 a:hover, li#category3.active a:hover {
	167	+ border: 1px inset #6692c4 !important;
	168	+ background: #3b6096 url("./images/bg_item_bar_blue_on.png") repeat-x !important;
77	169	}
78	170
79		-#navigation_bar ul ul a:hover{
80		- background-color: #EEE;
	171	+li#category3.active a {
	172	+ border: 1px inset #6692c4;
	173	+ background: #719ece url("./images/bg_item_bar_blue_active.png") repeat-x;
81	174	}
82	175
83		-#navigation_bar ul ul a.linkSubMenu:link,
84		-#navigation_bar ul ul a.linkSubMenu:active,
85		-#navigation_bar ul ul a.linkSubMenu:visited{
86		- font-weight: 800;
	176	+li#category3 ul li a {
	177	+ border: 1px outset #6692c4 !important;
	178	+ background: #204a87 url("./images/bg_item_bar_blue_off.png") repeat-x !important;
	179	+}
	180	+
	181	+#category3 ul {
	182	+ background: #204a87 url("./images/bg_noosfero_bar.png") repeat-x;
	183	+}
	184	+
	185	+
	186	+/* ITEM 4 red */
	187	+
	188	+#noosfero_bar.category4 {
	189	+ background: #a40000 url("./images/bg_noosfero_red.png") repeat-x;
	190	+}
	191	+
	192	+#wrap.category4 {
	193	+border: 3px solid #a40000 !important;
	194	+}
	195	+
	196	+#category4 a {
	197	+ border: 1px outset #a40000;
	198	+ background: #a40000 url("./images/bg_item_bar_red_off.png") repeat-x;
	199	+}
	200	+
	201	+#category4 a:hover, li#category4.active a:hover {
	202	+ border: 1px inset #a40000;
	203	+ background: #ae1c1c url("./images/bg_item_bar_red_on.png") repeat-x;
	204	+}
	205	+
	206	+li#category4.active a {
	207	+ border: 1px inset #a40000;
	208	+ background: #ee2828 url("./images/bg_item_bar_red_active.png") repeat-x;
	209	+}
	210	+
	211	+#category4 ul {
	212	+ background: #a40000 url("./images/bg_noosfero_bar_red.png") repeat-x;
	213	+}
	214	+
	215	+
	216	+
	217	+
	218	+#navigation_bar ul ul {
	219	+margin: 0px;
	220	+padding: 0px;
	221	+width: 100%;
	222	+left: 0px;
	223	+position: absolute;
	224	+margin-top: 34px;
	225	+display: none;
	226	+}
	227	+
	228	+#search_box {
	229	+display: none;
	230	+clear: both;
87	231	}
...	...
...	...	@@ -7,23 +7,38 @@
7	7	<script type="text/javascript" src="menu.js"></script>
8	8	</head>
9	9	<body>
10		-
	10	+<div id="wrap" class='category1'>
	11	+
	12	+<div id='noosfero_bar' class='category1'>
11	13	<div id='accessibility_menu'>
12		- <a href='#'>Acesibilidade</a> \|
13		- <a href='#'>Central de Buscas</a> \|
14		- <a href='#'>Ir para conteúdo</a>
	14	+ <a href='#'>Acessibilidade</a>
	15	+ <a href='#'>Central de Buscas</a>
	16	+ <a href='#'>Ir para conteúdo</a>
15	17	</div><!-- accessibility_menu -->
16	18
17	19	<div id='navigation_bar'>
18	20	<ul>
19		- <li id='category1'>
20		- Noosfero
	21	+ <li id='category1' class='active'>
	22	+ Noosfero
21	23	<ul>
22		- <li><a href=''><span>Item 1</span></a></li>
23		- <li><a href=''><span>Item 2</span></a></li>
24		- <li><a href=''><span>Item 3</span></a></li>
25		- <li><a href=''><span>Item 4</span></a></li>
26		- <li><a href=''><span>Item 5</span></a></li>
	24	+ <li><a href=''><span>Iteam 1</span></a></li>
	25	+ <li><a href=''><span>Itemdasd 2</span></a></li>
	26	+ <li><a href=''><span>Iteaam 3</span></a></li>
	27	+ <li><a href=''><span>Iteaam 4</span></a></li>
	28	+ <li><a href=''><span>Itemdasds 5</span></a></li>
	29	+ <li><a href=''><span>Itesdm 2</span></a></li>
	30	+ <li><a href=''><span>Iteam 3</span></a></li>
	31	+ <li><a href=''><span>Iteasdasdm 4</span></a></li>
	32	+ <li><a href=''><span>Itesdasm 5</span></a></li>
	33	+ <li><a href=''><span>Itesdm 2</span></a></li>
	34	+ <li><a href=''><span>Itedsadm 3</span></a></li>
	35	+ <li><a href=''><span>Itedsm 4</span></a></li>
	36	+ <li><a href=''><span>Itessdsm 5</span></a></li>
	37	+ <li><a href=''><span>Itessasm 2</span></a></li>
	38	+ <li><a href=''><span>Isssssstesm 3</span></a></li>
	39	+ <li><a href=''><span>Iteasdm 3</span></a></li>
	40	+ <li><a href=''><span>Itessm 4</span></a></li>
	41	+ <li><a href=''><span>Iteasdm 5</span></a></li>
27	42	</ul>
28	43	</li>
29	44
...	...	@@ -31,21 +46,32 @@
31	46	Territorios
32	47	<ul>
33	48	<li><a href=''><span>Item 1</span></a></li>
34		- <li><a href=''><span>Item 2</span></a></li>
35		- <li><a href=''><span>Item 3</span></a></li>
	49	+ <li><a href=''><span>Itssssem 2</span></a></li>
	50	+ <li><a href=''><span>Itsssssem 3</span></a></li>
36	51	<li><a href=''><span>Item 4</span></a></li>
37		- <li><a href=''><span>Item 5</span></a></li>
	52	+ <li><a href=''><span>Itssssem 5</span></a></li>
38	53	</ul>
39	54	</li>
40	55
41		- <li id='category2'>
	56	+ <li id='category3'>
42	57	Lalala
43	58	<ul>
44	59	<li><a href=''><span>Item 1</span></a></li>
45		- <li><a href=''><span>Item 2</span></a></li>
46		- <li><a href=''><span>Item 3</span></a></li>
	60	+ <li><a href=''><span>Issstem 2</span></a></li>
	61	+ <li><a href=''><span>Itsssem 3</span></a></li>
47	62	<li><a href=''><span>Item 4</span></a></li>
48		- <li><a href=''><span>Item 5</span></a></li>
	63	+ <li><a href=''><span>Itssem 5</span></a></li>
	64	+ </ul>
	65	+ </li>
	66	+
	67	+ <li id='category4'>
	68	+ Lalala
	69	+ <ul>
	70	+ <li><a href=''><span>Iaaaatem 1</span></a></li>
	71	+ <li><a href=''><span>Item 2</span></a></li>
	72	+ <li><a href=''><span>Itaaaem 3</span></a></li>
	73	+ <li><a href=''><span>Itaaem 4</span></a></li>
	74	+ <li><a href=''><span>Itaaaaaaaaem 5</span></a></li>
49	75	</ul>
50	76	</li>
51	77	</ul>
...	...	@@ -60,6 +86,53 @@
60	86	<input type='submit' value='Buscar'>
61	87	</form>
62	88	</div><!-- id='search_box' -->
	89	+</div>
	90	+ <div id="header">
	91	+ <div id="virtual_community_identification">Default Virtual Community</div>
	92	+ </div>
	93	+
	94	+ <div id='content'>
	95	+ <!-- <a name='main_content'/></a> -->
	96	+ <!-- Aqui entra um conteudo tipo o titulo da pagina do usuário e os botoes do comatose? -->
	97	+ <!--
	98	+ <div id='header_content'>
	99	+ </div>
	100	+ -->
	101	+
	102	+ <div id="boxes"><h1>Account options</h1>
	103	+<h1>Account options</h1>
	104	+<h1>Account options</h1>
	105	+<h1>Account options</h1>
	106	+<h1>Account options</h1>
	107	+<h1>Account options</h1>
	108	+<h1>Account options</h1>
	109	+<h1>Account options</h1>
	110	+<h1>Account options</h1>
	111	+<h1>Account options</h1>
	112	+<h1>Account options</h1>
	113	+<h1>Account options</h1>
	114	+<h1>Account options</h1>
	115	+<h1>Account options</h1>
	116	+<h1>Account options</h1>
	117	+<h1>Account options</h1>
	118	+<h1>Account options</h1>
	119	+<h1>Account options</h1>
	120	+<h1>Account options</h1>
	121	+<h1>Account options</h1>
	122	+<h1>Account options</h1>
	123	+
	124	+</div>
	125	+
	126	+ </div>
	127	+
	128	+ <div id="footer">
	129	+ <!-- <a name='footer'/></a> -->
	130	+ nothing in the footer yet
	131	+ <div action="list" class="none_back back"></div>
	132	+ </div>
	133	+ </div>
	134	+ </div>
	135	+ <img alt="Image for Loading..." id="spinner" src="/images/loading.gif?1186069142" style="display:none; float:right;" />
63	136
64	137	</body>
65	138	</html>
...	...