﻿

/*** for PC Browser ***/
@media (min-width:401px)
{
#tool_all{
background-color:#fff;
padding-top:6px;
padding-bottom:6px;
}

#tool_all2{
background-color:#cdcdcd;
padding-top:6px;
padding-bottom:6px;
}


.tools{
width: 100%;
margin-bottom:6px;
    display: flex;
    flex-wrap: wrap;
}

.tool{
    width: 32%;
    display: inline-block;
    vertical-align: top;
    float: none;
    margin: 0 4px 10px;
    padding-bottom: 7px;
    border: 1px solid #000;
    border-radius: 8px 8px / 8px 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.tool h3{
 margin:0px;
 padding:5px 0px 0px;
 margin-left:6px;
  background: repeating-linear-gradient(#ffffff, #ffffff 1px, #efefef 1px, #efefef 2px);
}

.tool a{
text-decoration:none;
}

.tool a:link{
text-decoration:none;
}


.tool a:visited{
text-decoration:none;
}

.tool a:hover{
text-decoration:none;
}




.tools br{
font-size:1%
CLEAR: both;
}



.tool p
{
    margin: 0px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    background-repeat: repeat-y;
    background-position: left;
    padding-top: 3px;
    padding-bottom: 2px;
    min-height: 120px;
    border-top: 1px dotted #cccccc;
}


.tooltop
{
    background-repeat: no-repeat;
    background-position: left top;
}


#tool_h2 {
 PADDING: 8px;
 MARGIN: 0px; 
 BORDER-LEFT: #33cc99 5px solid;
 margin-bottom: 4px;
}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
#tool_all{
background-color:#fff;
padding-top:6px;
padding-bottom:6px;
}

#tool_all2{
background-color:#cdcdcd;
padding-top:6px;
padding-bottom:6px;
}


.tools{width:99%;margin-bottom:6px;}

.tool
{
width:320px;
    display: inline-block;
    vertical-align: top;
    float: none;
    margin-left: 10px;
    margin-right: 3px;
    padding-bottom: 7px;
    border: 1px solid #000;
    border-radius: 8px 8px / 8px 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.tool h3{
 margin:0px;
 padding:5px 0px 0px;
 margin-left:6px;
 background: repeating-linear-gradient(#ffffff, #ffffff 1px, #efefef 1px, #efefef 2px);
}

.tool a{
text-decoration:none;
}

.tool a:link{
text-decoration:none;
}


.tool a:visited{
text-decoration:none;
}

.tool a:hover{
text-decoration:none;
}


.tools
{
margin-bottom:0px !important;
}

.tools br{
font-size:1px;
CLEAR: both;
}



.tool p
{
    margin: 0px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    background-repeat: repeat-y;
    background-position: left;
    padding-top: 3px;
    padding-bottom: 2px;
    border-top: 1px dotted #cccccc;
}

.tool p a img
{
margin-left:3px !important;
}

.tooltop
{
    background-repeat: no-repeat;
    background-position: left top;
}


#tool_h2 {
 PADDING: 8px;
 MARGIN: 0px; 
 BORDER-LEFT: #33cc99 5px solid;
 margin-bottom: 4px;
}
}
