@charset "utf-8";

/*-------------------------
CSS Information
File name : index.css
-------------------------*/

/*top
-------------------------*/

#top {
    float : left ;
    width : 200px ;
    height : 240px ;
    padding : 20px ;
}

#top li.filemaker , #top li.clearworks , #top li.web {
    width : 192px ;
    height : 52px ;
    padding : 4px ;
    background : #e0e6da url(../../img/top/top.png) no-repeat ;
}

#top .filemaker a , #top .clearworks h2 , #top .web a {
    display : block ;
    width : 110px ;
    line-height : 50px ;
    padding-left : 80px ;
    border : 1px solid #FFF ;
    color : #656559 ;
}

#top .filemaker a {
    background : #f0f3ea url(../../img/top/filemaker.png) no-repeat 15px 8px ;
}

#top .clearworks h2 {
    background : #f0f3ea url(../../img/top/clearworks.png) no-repeat 15px 8px ;
}

#top .web a {
    background : #f0f3ea url(../../img/top/web.png) no-repeat 15px 8px ;
}

#top a:hover {
    border : 1px solid #656559 ;
	text-decoration : none ;
}

#top h3 {
    line-height : 16px ;
    margin-bottom : 6px ;
    font-size : 0.9em ;
    font-weight : normal ;
    color : #656559 ;
    text-align : center ;
}


/*clearworks
-------------------------*/

#clearworks {
    position : relative ;
    float : right ;
    width : 460px ;
    height : 230px ;
    margin : 20px 20px 20px 0 ;
    padding : 0 10px 10px 10px ;
    background : url(../../img/top/clearworks/back/clearworks.png) no-repeat ;
}

#clearworks #label {
    position : absolute ;
    top : -8px ;
    left : 0 ;
}

#clearworks .loader {
    position : absolute ;
    top : 114px ;
    left : 218px ;
}


/*slider
-------------------------*/

#clearworks .slidercontentwrapper {
    position : relative ;
    width : 460px ;
    height : 208px ;
    overflow : hidden ;
}

#clearworks .slidercontent {
    position : absolute ;
    visibility : hidden ;
	background : url(../../img/top/clearworks/back/slider.png) no-repeat ;
}

#clearworks .slidertoggler {
    width : 370px ;
    margin-left : 68px ;
    padding : 0 11px ;
}

#clearworks .slidertoggler li {
    float : left ;
    width : 74px ;
}

#clearworks .slidertoggler a.toc {
    display : block ;
    width : 74px ;
    line-height : 22px ;
    color : #FFF ;
    font-weight : bold ;
    text-align : center ;
}

#clearworks .slidertoggler a.selected {
	background : url(../../img/top/clearworks/nav/nav_hover.gif) no-repeat ;
    color : #7EC521 ;

}

#clearworks .slidertoggler a:hover {
	background : url(../../img/top/clearworks/nav/nav_hover.gif) no-repeat ;
    color : #7EC521 ;
    text-decoration : none ;
}


/*section h3
-------------------------*/

#clearworks .slidercontent h3 {
    width : 372px ;
    line-height : 38px ;
    margin-left : 68px ;
    padding-left : 20px ;
    color : #666 ;
    text-align : center ;
}

#section1 h3 {
	background : url(../../img/top/clearworks/icon/calculator.png) no-repeat left 8px ;
}

#section2 h3 {
	background : url(../../img/top/clearworks/icon/building.png) no-repeat left 8px ;
}

#section3 h3 {
	background : url(../../img/top/clearworks/icon/bricks.png) no-repeat left 8px ;
}

#section4 h3 {
	background : url(../../img/top/clearworks/icon/printer.png) no-repeat left 8px ;
}

#section5 h3 {
	background : url(../../img/top/clearworks/icon/computer.png) no-repeat left 8px ;
}


/*intro
-------------------------*/

.intro {
    width : 460px ;
	height : 170px ;
}

.intro ul {
    float : left ;
    width : 200px ;
    height : 170px ;
}

#section5 .intro ul {
    width : 450px ;
}

.intro ul li.top {
    width : 200px ;
	line-height : 22px ;
    color : #FFF ;
    font-weight : bold ;
    text-align : center ;
    margin-bottom : 8px ;
    padding : 0 ;
	background : url(../../img/top/clearworks/icon/intro.png) no-repeat left center ;
}

.intro ul li {
	line-height : 20px ;
	background : url(../../img/top/clearworks/icon/bullet_green.png) no-repeat left center ;
	padding-left : 12px ;
}

.intro ul li.body {
	background : 0 ;
}

.block {
    float : right ;
    width : 244px ;
    height : 162px ;
    padding : 4px ;
	background : url(../../img/top/clearworks/block.png) no-repeat ;
}

.block a {
    display : block ;
    border : 1px solid #F6F6F6 ;
}

.block a:hover {
    border : 1px solid #666 ;
}

.block a.left {
    float : left ;
}

.block a.right {
    float : right ;
}