#blue{
   width: 100%;
   background-color:cornflowerblue;
   direction: rtl;
}
#blue p{
    padding:5px;
}
#blue div{
    display:inline-block;
}
.sideMenuTitle div{
    display:inline-block;
}
#title-name{
    margin-right:50px;
}
#title-city {
    margin-right: 220px;
}
#title-tel {
    margin-right: 220px;
}
#name {
    margin-right: 10px;
}


#city {
    margin-right: 200px;
}

#tel {
    margin-right: 200px;
}


p
{
    margin: 20px 0;
}

/* 
	Generic Styling, for Desktops/Laptops 
	*/
table
{
    width: 100%;
    border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd)
{
    background: #eee;
}

tr:hover
{
    background-color: #e3f3fe;
}

th
{
    background: #0b688a;
    color: white;
    font-weight: bold;
    text-align: center;
}

td, th
{
    padding: 6px;
    border: 1px solid #ccc;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
}


@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
{

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr
    {
        display: block;
        direction: rtl;
        text-align: center;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr
        {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr
    {
        border: 1px solid #ccc;
    }

    td
    {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-right: 50%;
    }

        td:after
        {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            right: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
		Label the data
		*/
        td:nth-of-type(1):after
        {
            content: "نام نرم افزار";
        }

        td:nth-of-type(2):after
        {
            content: "نوع قفل";
        }

        td:nth-of-type(3):after
        {
            content: "تعداد";
        }

        td:nth-of-type(4):after
        {
            content: "قفل اضافه";
        }

        td:nth-of-type(5):after
        {
            content: "تخفیف";
        }

        td:nth-of-type(6):after
        {
            content: "مبلغ کل";
        }

        td:nth-of-type(7):after
        {
            content: "ویرایش";
        }

        td:nth-of-type(8):after
        {
            content: "حذف";
        }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
    body
    {
        padding: 0;
        margin: 0;
        /*width: 320px;*/
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
{
    body
    {
        /*width: 495px;*/
    }
}