/* Penfriend CSS */

body
{
  font-family: Georgia, sans-serif;
  background: #eeeeee;
}

div.content
{
  flex: auto; /* only applicable if parent is display:flex */
  grid-row: 1; /* only applicable if parent is display:grid */
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  padding-left: 8px;
  padding-right: 8px;
  background: white;
}

.content .intro_content
{
  font-size: 180%;
  color: #440000;
  transition: text-shadow 1s;
}

.content .intro_content:hover
{
  text-shadow: #ffcc00 1px 0 10px;
}

.content .arabic
{
  font-size: 140%;
  direction: rtl;
  text-align: right;
}

a
{
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

.product_menu, .product_menu embed
{
  width: 120px;
  height: 250px;
  flex: initial; /* only applicable if parent is display:flex */
  grid-row: 2; /* only applicable if parent is display:grid */
}

.action_menu, .action_menu embed
{
  width: 120px;
  height: 250px;
  flex: initial; /* only applicable if parent is display:flex */
  grid-row: 3; /* only applicable if parent is display:grid */
}

.page_footer, .page_footer embed
{
  text-align: center;
  flex: auto;
  width: 400px;
  height: 80px;
  flex-direction: row;
}

p.image
{
  text-align: center;
}

.banner_menu, .banner_menu embed
{
  text-align: center;
  width: 500px;
  height: 100px;
  flex: auto;
  background: #eeeeee;
}

div.sales_paypal_menus
{
  display: inline-block;
}
div.sales_paypal_item 
{ display: table-cell;
}
div.sales_name
{ display: table-cell;
}
div.sales_group 
{
  display: table-row;
}

/* The priority at all screen widths is the main content.
   With a wide screen, we use Flex and fix the sizes of the side panels. 
   With a narrow screen, we use Grid and move the panels lower down the page.
*/

@media (min-width: 700px) {
    div.main_page
    {
      display: flex;
      flex-direction: row;
    }
}

div.full_width
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 700px) {
  div.main_page
   {
     display: grid;
  }
}