#page-wrap
{
    margin: 10px;
}

p
{
    margin: 20px 0;
}

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

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

td, th
{
    padding: 6px;
    border: 1px solid #ccc;
    text-align: right;
}


        @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: "تاریخ انقضاء آگهی";
                }
        }

        /* 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;
            }
        }