a.squarebutton{
background: transparent url('../images/square-gray-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 11px Tahoma; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('../images/square-gray-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}




#modernbricksmenu{
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu ul{
font: bold 11px Arial;
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu a{
float: left;
display: block;
color: white;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
text-decoration: none;
letter-spacing: 1px;
background-color: #033e8a; /*Default menu color*/
border-bottom: 1px solid white;
}

#modernbricksmenu a:hover{
background-color: gray; /*Menu hover bgcolor*/
}

#modernbricksmenu #current a{ /*currently selected tab*/
background-color: #0075df; /*Brown color theme*/ 
border-color: #0075df; /*Brown color theme*/ 
}

#modernbricksmenuline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #0075df; /*Brown color theme*/ 
}

#myform{ /*CSS for sample search box. Remove if desired */
float: right;
margin: 0;
padding: 0;
}

#myform .textinput{
width: 190px;
border: 1px solid gray;
}

#myform .submit{
font: bold 11px Verdana;
height: 22px;
background-color: lightyellow;
}


#modernbricksmenu2{
padding: 0;
width: 100%;
border-top: 5px solid #D25A0B; /*Brown color theme*/ 
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#modernbricksmenu2 ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

#modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

#modernbricksmenu2 a{
float: left;
display: block;
font: bold 12px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: #0075df; /*Brown color theme*/ 
border-top: 1px solid white;
}

#modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
}

#modernbricksmenu2 #current a{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/ 
color: white;
border-color: #D25A0B; /*Brown color theme*/ 
}

.markermenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
}

.markermenu li a{
background: white url(../images/arrow-list.gif) no-repeat 2px center;
font: normal 12px Tahoma;
color: #033e8a;
display: block;
width: auto;
padding: 5px 0;
padding-left: 18px;
text-decoration: none;
border-bottom: 1px solid #9A9A9A;
}


* html .markermenu li a{ /*IE only. Actual menu width minus left padding of LINK (20px) */
width: 180px;
}

.markermenu li a:visited, .markermenu li a:active{
color: #033e8a;
}

.markermenu li a:hover{
color:#FF0000;
background-color: #ffffcb;
background-image:url(../images/arrow-list-red.gif); /*onMouseover image change. Remove if none*/
}

.cat_sub
{
font-family: Tahoma;
text-decoration: none;
color:#FF6633;
font-size:12px;
}
.cat_sub A
{
font-family: Tahoma;
text-decoration:none;
color:#0066CC;
font-size:12px;
}
.cat_sub A:hover
{
font-family: Tahoma;
text-decoration:underline;
color:#0066CC;
font-size:12px;
}

.pages
{
font-family: Tahoma;
text-decoration: none;
color:#333333;
font-size:13px;
}
.pages A
{
font-family: Tahoma;
text-decoration: none;
color:#333333;
font-size:13px;
}
.pages A:hover
{
font-family: Tahoma;
text-decoration: none;
color:#FF6600;
font-size:13px;
}

.pro_code
{
font: bold 12px Tahoma;
color:#999999;
text-align:center;
}
.pro_name
{
font: bold 13px Tahoma;
color: #d25a0b;
}
.pro_price
{
font: bold 12px Tahoma;
color:#FF6600;
}
.pro_demo
{
font: 12px Tahoma;
color:#333333;
line-height: 150%;
}
.title_box
{
font: bold 12px Tahoma;
color:#FFFFFF;
background-color:#033e8a;
text-align:center;
}
.title_page
{
padding-top:8px;
font: bold 14px Tahoma;
color: #033e8a;
padding-bottom:12px;
}
.notice
{
font: bold 13px Tahoma;
color:#FF6600;
}



.cssform p{
width: 500px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
font-family:Tahoma;
font-size:12px;
height: 1%;
}

.cssform label{
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}


* html .threepxfix{
margin-left: 3px;
}

.field_main
{
width:97%;
}

.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;
background:url(../images/formbg.gif) repeat-x left top;
}